How to upload to S3 bucket?

[desaawa]

Hi,
Is there a way to upload to S3 bucket?

I tried it like this and got the following error:

const options = {
    url: 'https://s3.amazonaws.com/mybucketname',
    method: 'POST',
    path: uri, // /Users/user/Library/.../5D94544E-E33B-475E-BB3F-5BFA72E15A63.jpg
    type: 'multipart',
    headers: {
    },
    field: 'uploaded_media',
    region: "us-east-1",
    accessKey: 'myaccesskey',
    secretKey: "mysecretkey",
    // Below are options only supported on Android
    notification: {
      enabled: true
    }
  };

  Upload.startUpload(options).then((uploadId) => {
    console.log('Upload started');
    Upload.addListener('progress', uploadId, (data) => {
      console.log(`Progress: ${data.progress}%`)
    });
    Upload.addListener('error', uploadId, (data) => {
      console.log(`Error: ${data.error}%`)
    });
    Upload.addListener('cancelled', uploadId, (data) => {
      console.log(`Cancelled!`)
    });
    Upload.addListener('completed', uploadId, (data) => {
      console.log('Completed!', data)
    })
  }).catch((err) => {
    console.log('Upload error!', err)
  });

and i got this error:

{id: "9", responseCode: 400, responseBody: "<?xml version="1.0" encoding="UTF-8"?>↵<Error><Cod…lyaNSBlMomTWSgYgOloDwFtOReU01RA=</HostId></Error>"}
id
:
"9"
responseBody
:
"<?xml version="1.0" encoding="UTF-8"?>↵<Error><Code>MaxPostPreDataLengthExceeded</Code><Message>Your POST request fields preceeding the upload file was too large.</Message><MaxPostPreDataLengthBytes>20480</MaxPostPreDataLengthBytes><RequestId>83B08A26C8A163F4</RequestId><HostId>EKI1mI93HBz1uQIdo+gk4aTATLawDTb/hUYGvR/JNtDilyaNSBlMomTWSgYgOloDwFtOReU01RA=</HostId></Error>"
responseCode
:
400

[StevePotter]

@awadesmoline I haven't done this but from what I see you aren't providing any headers to S3, which would be required if the bucket does not allow public uploads.

Has anyone else uploaded to a private S3 bucket that would be willing to provide instructions in the README or a sample?

[MrHubble]

@awadesmoline were you able to upload to S3? If yes, are you willing to share your solution? Thanks.

[desaawa]

@MrHubble I was not able to upload with this package. I used react-native-s3 which also uploads in the background.

[TSMMark]

It should be possible to upload to S3 following their Authenticating Requests: Browser-Based Uploads Using POST (AWS Signature Version 4) documentation here: https://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-authentication-HTTPPOST.html

It is a little bit of work to set up, but it should work fine when set up properly.

Authenticating Requests: Browser-Based Uploads Using POST (AWS Signature Version 4)

Amazon S3 supports HTTP POST requests so that users can upload content directly to Amazon S3. Using HTTP POST to upload content simplifies uploads and reduces upload latency where users upload data to store in Amazon S3. This section describes how you authenticate HTTP POST requests. For more information about HTTP POST requests, how to create a form, create a POST policy, and an example, see Authenticating Requests in Browser-Based Uploads Using POST (AWS Signature Version 4).

To authenticate an HTTP POST request you do the following:

The form must include the following fields to provide signature and relevant information that Amazon S3 can use to re-calculate the signature upon receiving the request:

Element Name	Description
policy	The Base64-encoded security policy that describes what is permitted in the request. For signature calculation this policy is the string you sign. Amazon S3 must get this policy so it can re-calculate the signature.
x-amz-algorithm	The signing algorithm used. For AWS Signature Version 4, the value is AWS4-HMAC-SHA256.
x-amz-credential	In addition to your access key ID, this provides scope information you used in calculating the signing key for signature calculation.It is a string of the following form:////aws4_requestFor example:AKIAIOSFODNN7EXAMPLE/20130728/us-east-1/s3/aws4_request. .For Amazon S3, the aws-service string is s3. For a list of Amazon S3 aws-region strings, see Regions and Endpoints in the AWS General Reference.
x-amz-date	It is the date value in ISO8601 format. For example, 20130728T000000Z.It is the same date you used in creating the signing key. This must also be the same value you provide in the policy (x-amz-date) that you signed.
x-amz-signature	(AWS Signature Version 4) The HMAC-SHA256 hash of the security policy.

The POST policy must include the following elements:

Element Name	Description
x-amz-algorithm	The signing algorithm that you used to calculation the signature. For AWS Signature Version 4, the value is AWS4-HMAC-SHA256.
x-amz-credential	In addition to your access key ID, this provides scope information you used in calculating the signing key for signature calculation.It is a string of the following form:////aws4_requestFor example,AKIAIOSFODNN7EXAMPLE/20130728/us-east-1/s3/aws4_request. .
x-amz-date	The date value specified in the ISO8601 formatted string. For example, "20130728T000000Z". The date must be same that you used in creating the signing key for signature calculation.

For signature calculation the POST policy is the string to sign.

Calculating a Signature

The following diagram illustrates the signature calculation process.

To Calculate a signature

Create a policy using UTF-8 encoding.

Convert the UTF-8-encoded policy to Base64. The result is the string to sign.

Create the signature as an HMAC-SHA256 hash of the string to sign. You will provide the signing key as key to the hash function.

Encode the signature by using hex encoding.

[brianephraim]

I too was getting the MaxPostPreDataLengthExceeded error when trying to upload to S3. I solved this by changing the field option to "file".

From:

field: 'uploaded_media',

to

field: 'file',

Thanks to a comment from 2008

[princesust]

Hi @defualt , Could you please provide the detail options parameters?

[brianephraim]

       import Upload from 'react-native-background-upload';
       import { S3Policy } from 'common/react-native-aws3/S3Policy'; // https://github.com/benjreinhart/react-native-aws3

        const fileInfo = await Upload.getFileInfo(videoPath);
        const options = {
          type: 'multipart',
          method: 'POST',
          headers: {
            'content-type': fileInfo.mimeType, // server requires a content-type header
            'content-length': `${fileInfo.size}`,
          },
          url: 'https://asdf.s3.amazonaws.com',
          field: 'file',
          path: videoPath,
          parameters: {
            ...S3Policy.generate({
              bucket: 'qwer',
              region: 'us-east-1',
              accessKey: 'XX',
              secretKey: 'YY',
              successActionStatus: 201,
              key: `uploads/${fileInfo.name}`,
              date: new Date(),
              contentType: fileInfo.mimeType,
            }),
          },
        };

        const uploadId = await Upload.startUpload(options);
``

[otusweb]

If like me you are looking to simply upload to a public bucket, here is the code I used that worked:

const options = {
            url: 'https://s3-eu-west-1.amazonaws.com/xxxxxxxx/',
            path: result.fileCopyUri,
            method: 'POST',
            type: 'multipart',
            field: 'file',
            maxRetries: 2, // set retry count (Android only). Default 2
            headers: {
              'content-type': 'application/octet-stream', // Customize content-type
            },
            parameters:{
              key: result.name
            }
          };

          Upload.startUpload(options)