Comments (12)
My solution with reading file, decode to ArrayBuffer and upload to s3
// @flow
import { S3 } from "aws-sdk";
import { config } from "../environments/config";
import fs from "react-native-fs";
import { decode } from "base64-arraybuffer";
// init s3 client with your credentials
const s3 = new AWS.S3();
// path = "file://...", name = "profile.jpg"
const uploadFile = async (path: string, name: string): Promise => {
try {
const base64 = await fs.readFile(path, "base64");
const arrayBuffer = decode(base64);
const params = {
Body: arrayBuffer,
Bucket: config.aws.s3.bucket,
Key: `${config.aws.s3.folder}/${name}`,
ACL: "public-read",
ContentEncoding: "utf-8",
ContentType: "binary"
};
const uploadData = await s3.putObject(params).promise();
return Promise.resolve(uploadData);
} catch (error) {
return Promise.reject(error);
}
}
from react-native-aws3.
I ended up with a working solution by using aws-sdk
instead:
const Buffer = global.Buffer || require('buffer').Buffer;
var AWS = require('aws-sdk/dist/aws-sdk-react-native');
AWS.config.update({
accessKeyId: myKeyId,
secretAccessKey: mySecretKey,
region: myRegion
})
var s3 = new AWS.S3()
buf = new Buffer(base64image.replace(/^data:image\/\w+;base64,/, ""), 'base64')
let keyPrefix = `uploads/image.png`
var params = {
Bucket: "mybucket",
Key: keyPrefix,
Body: buf,
ContentType: 'image/png',
ContentEncoding: 'base64',
ACL: 'public-read'
}
let putObjectPromise = await s3.upload(params).promise()
from react-native-aws3.
@bdesouza I was using a signature capture component which returned a Base64 Encoded String. That component doesn't sound like it would be any help for you with audio.
from react-native-aws3.
Unfortunately, I am not sure. Did you try to use this library and pass the base64 data and see if that worked?
from react-native-aws3.
It didn't work. Error: Could not retrieve file for contentUri
from react-native-aws3.
@note89 @agrass did you figure out how to upload an image in base64 format? If yes, could you please share your solution? Thanks.
from react-native-aws3.
@benjreinhart answers on Stack Overflow suggest using Buffer
and then uploading the file with the S3 plugin, ie:
buf = new Buffer(req.body.imageBinary.replace(/^data:image\/\w+;base64,/, ""),'base64')
var data = {
Key: req.body.userId,
Body: buf,
ContentEncoding: 'base64',
ContentType: 'image/jpeg'
};
s3Bucket.putObject(data, function(err, data){
I believe the react-native-aws3 codebase uses FormData
to create a set of key/value pairs representing form fields and their values for uri
, name
and type
. It then uses XMLHttpRequest
to submit to AWS S3. I think.
Is there anyway to use a buffer object in place of the uri key and object?
When I try to upload with the current code base (nothing to do with the buffer example above) with a file object like:
let file = {
uri: `data:image/png;base64, ${base64Image}`,
name: "image.png",
type: "image/png"
}
I get the error:
Error Domain=NSCocoaErrorDomain Code=256 "The file couldn’t be opened." UserInfo={NSURL
from react-native-aws3.
As an update, I believe S3 POST
requires a file
object, whereas S3 PUT
does not. I have unsuccessfully tried converting the base64 format to a file object to use react-native-aws3
but get a Possible Unhandled Promise Rejection
error:
let fetchResponse = await fetch(base64image)
let buffResponse = await fetchResponse.arrayBuffer()
let file = new File([buffResponse], 'image.png', {type:'image/png'})
uploader(file, (percent, modalVisible, response) => {
if(response)
{
console.log(response)
this.buildRequest(prestart)
}
})
//uploader.js
RNS3.put(file, options).then(response => {
if (response.status !== 201)
throw new Error("Failed to upload image to S3")
callback(0, false, response)
}).progress((e) => callback(e.percent, true, false))
.catch((error) => {
let errorMessage = error.text
callback(0, false, false)
})
Next I plan on using the default aws-sdk gem to put
with a buffer body as shown in a pervious comment rather than post
with a file object. If that works I may try to submit a pull request for react-native-aws3
to support put
as well as post
.
from react-native-aws3.
@MrHubble great idea! Thanks for sharing. I'm running into something similar but with audio. How did you construct the base64image
?
from react-native-aws3.
Oh that's an interesting approach. I ended up going the route of creating a presigned url and then doing and xhr post to it. That way I avoided having to use fs library which isn't fully supported on the Expo
framework as yet.
//Upload File
const xhr = new XMLHttpRequest();
xhr.open('PUT', presignedUrl);
xhr.setRequestHeader('X-Amz-ACL', 'public-read');
xhr.setRequestHeader('Content-Type', fileType);
xhr.onreadystatechange = function() {
console.log(xhr.responseText);
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// Successfully uploaded the file.
console.log('File Uploaded!')
} else {
// The file could not be uploaded.
console.log('File upload failed. :( ')
}
}
}
xhr.send({ uri: filePath, type: fileType, name: fileName });
from react-native-aws3.
I spent two days trying to solve this issue! Thanks @frayeralex your solution did it for me 🎉
from react-native-aws3.
@frayeralex, I tried, but I'm getting:
{ [Error: Permission Denial: reading com.android.providers.media.MediaDocumentsProvider uri content://com.android.providers.media.documents/document/image%3A315/pexels-photo-267151.jpeg from pid=9944, uid=10168 requires android.permission.MANAGE_DOCUMENTS, or grantUriPermission()]
framesToPop: 1,
code: 'EUNSPECIFIED',
line: 11732,
column: 29,
sourceURL: 'http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false' }
Any Idea how to fix?
from react-native-aws3.
Related Issues (20)
- Mulitple upload HOT 2
- I have only identityPoolId. So, what should I do? is this library support?
- File Upload Dont work in Android HOT 3
- A server with the specified hostname could not be found. HOT 2
- How use Amazon S3 Transfer Acceleration
- postResponse null issue HOT 1
- How to upload multiple files? `Solution`
- Write error: ssl=0x752c77f708: I/O error during system call, Broken pipe
- {"headers": {}, "status": 0, "text": "Stream Closed"} HOT 13
- How to access(get uploaded file) the private bucket in aws s3 repo ?
- Unable to upload video when bucket name contains dots eg. domain names
- FormData and XMLHttpRequest are not defined
- Google play - Leaked AWS credentials HOT 1
- Failed to upload image to S3
- Abort upload HOT 2
- Stream Closed HOT 10
- Error :- read failed: EBADF (Bad file descriptor) when upload image. HOT 2
- Check s3 folder size through RNS3
- Is this going to be affected by AWS’s Move to Its Own Certificate Authority?
- In Android its not working HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-aws3.