Skip to content

Instantly share code, notes, and snippets.

@tomduncalf
Last active December 17, 2022 02:52
Show Gist options
  • Select an option

  • Save tomduncalf/17f57adf5a1343d20b3b3eee11cc7893 to your computer and use it in GitHub Desktop.

Select an option

Save tomduncalf/17f57adf5a1343d20b3b3eee11cc7893 to your computer and use it in GitHub Desktop.

Revisions

  1. tomduncalf revised this gist Oct 24, 2017. 1 changed file with 0 additions and 2 deletions.
    2 changes: 0 additions & 2 deletions example.js
    Original file line number Diff line number Diff line change
    @@ -16,8 +16,6 @@
    import AWS from 'aws-sdk/dist/aws-sdk-react-native';
    import RNFetchBlob from 'react-native-fetch-blob'

    import { getAwsCredentials } from './api';

    const uploadFile = async (localPath, contentType, region, accessKeyId, secretAccessKey, sessionToken, bucket, key) => {
    try {
    // Configure the AWS SDK with the credentials
  2. tomduncalf revised this gist Oct 24, 2017. 1 changed file with 3 additions and 2 deletions.
    5 changes: 3 additions & 2 deletions example.js
    Original file line number Diff line number Diff line change
    @@ -1,9 +1,10 @@
    /**
    * 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,
    * and wanted to avoid writing native code to do this.
    * 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 libraries online worked with the temporary credentials, but I eventually figured out a
    * 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
  3. tomduncalf created this gist Oct 24, 2017.
    46 changes: 46 additions & 0 deletions example.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,46 @@
    /**
    * 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,
    * and wanted to avoid writing native code to do this.
    *
    * None of the libraries online worked with the temporary credentials, but I eventually 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'

    import { getAwsCredentials } from './api';

    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);
    }
    }