Skip to content

Instantly share code, notes, and snippets.

@tomduncalf
Last active December 17, 2022 02:52
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save tomduncalf/17f57adf5a1343d20b3b3eee11cc7893 to your computer and use it in GitHub Desktop.
Save tomduncalf/17f57adf5a1343d20b3b3eee11cc7893 to your computer and use it in GitHub Desktop.
How to upload a local (iOS filesystem) file to S3 using React Native with temporary credentials
/**
* I recently needed to upload a file from the phone's filesystem to S3 using temporary credentials
* (i.e. access key, secret key and session token) issued by an API for a React Native application,
* without the overhead of Base64 encoding the file and passing it over the bridge (as it could be
* several MB big), and wanted to avoid writing native code to do this.
*
* None of the S3 libraries online worked with the temporary credentials, but I figured out a
* solution using the official AWS SDK (which is good, as it supports all the relevant authentication
* out of the box) and the react-native-fetch-blob module, which allows you to upload directly from the
* filesystem with the correct Content-type header (as far as I can tell, React Native's fetch only
* allows multipart/form-data, which was causing the pre-signed URL signature check to fail).
*
* Below is a skeleton version, which requires the aws-sdk and react-native-fetch-blob npm modules.
*/
import AWS from 'aws-sdk/dist/aws-sdk-react-native';
import RNFetchBlob from 'react-native-fetch-blob'
const uploadFile = async (localPath, contentType, region, accessKeyId, secretAccessKey, sessionToken, bucket, key) => {
try {
// Configure the AWS SDK with the credentials
AWS.config.update({
region,
accessKeyId,
secretAccessKey,
sessionToken,
});
// Create a new instance of the S3 API
const s3 = new AWS.S3();
const s3Url = await s3.getSignedUrl('putObject', {
Bucket: bucket,
Key: key,
ContentType: contentType,
});
const result = await RNFetchBlob.fetch('PUT', s3Url, {
'Content-Type': contentType
}, RNFetchBlob.wrap(localPath));
} catch (e) {
console.error('Error', e);
}
}
@mxmzb
Copy link

mxmzb commented Mar 24, 2018

Could you please show, how your localPath looks? Especially interesting on iOS device and iOS simulator. Greatly appreciate!

@Sangrene
Copy link

You sir are a life saver !

@developercode1
Copy link

How can I set the meta data of the image if I use the above method ?

@yannoudou
Copy link

thanks, sir !

@eyalabadi98
Copy link

Hey, Can you show how you got your Session token?

What was the API you called to obtain it?

@im-aditya
Copy link

I am getting this error:

Write error: ssl=0x7ab6d7de88: I/O error during system call, Connection reset by peer

Any idea ?

@tomduncalf
Copy link
Author

Hmm, no idea, sorry. Not used this code for ages!

@omatrot
Copy link

omatrot commented Apr 15, 2020

This is an old one but:
A call sample would have been much appreciated.
Also the call to obtain the temporary credentials would be interesting in my case.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment