rn-aws3

rn-aws3 is a modified version of the React Native AWS3 library, with an enhanced timeout option. It provides an easy-to-use interface for uploading files to Amazon S3 using React Native.

npm install --save rn-aws3

Note on S3 user permissions

The user associated with the accessKey and secretKey you use must have the appropriate permissions assigned to them. My user's IAM policy looks like:

1{
2  "Version": "2012-10-17",
3  "Statement": [
4    {
5      "Sid": "Stmt1458840156000",
6      "Effect": "Allow",
7      "Action": [
8        "s3:GetObject",
9        "s3:GetObjectAcl",
10        "s3:GetObjectVersion",
11        "s3:PutObject",
12        "s3:PutObjectAcl",
13        "s3:PutObjectVersionAcl"
14      ],
15      "Resource": ["arn:aws:s3:::my-bucket/uploads/*"]
16    }
17  ]
18}

Example

1import { RNS3 } from "rn-aws3";
2
3const file = {
4  // `uri` can also be a file system path (i.e. file://)
5  uri: "assets-library://asset/asset.PNG?id=655DBE66-8008-459C-9358-914E1FB532DD&ext=PNG",
6  name: "image.png",
7  type: "image/png",
8};
9
10const options = {
11  keyPrefix: "uploads/",
12  bucket: "your-bucket",
13  region: "us-east-1",
14  accessKey: "your-access-key",
15  secretKey: "your-secret-key",
16  successActionStatus: 201,
17};
18
19RNS3.put(file, options).then((response) => {
20  if (response.status !== 201) throw new Error("Failed to upload image to S3");
21  console.log(response.body);
22  /**
23   * {
24   *   postResponse: {
25   *     bucket: "your-bucket",
26   *     etag : "9f620878e06d28774406017480a59fd4",
27   *     key: "uploads/image.png",
28   *     location: "https://your-bucket.s3.amazonaws.com/uploads%2Fimage.png"
29   *   }
30   * }
31   */
32});

Usage

put(file, options)

Upload a file to S3.

Arguments:

1. file

• uri required - File system URI, can be assets library path or file:// path
• name required - The name of the file, will be stored as such in S3
• type required - The mime type, also used for Content-Type parameter in the S3 post policy

2. options

• acl - The Access Control List of this object. Defaults to public-read
• keyPrefix - Prefix, or path to the file on S3, i.e. uploads/ (note the trailing slash)
• bucket required - Your S3 bucket
• region required - The region of your S3 bucket
• accessKey required - Your S3 AWSAccessKeyId
• secretKey required - Your S3 AWSSecretKey
• successActionStatus - HTTP response status if successful, defaults to 201
• awsUrl - AWS S3 url. Defaults to s3.amazonaws.com
• timeDelta - Devices time offset from world clock in milliseconds, defaults to 0

Returns an object that wraps an XMLHttpRequest instance and behaves like a promise, with the following additional methods:

• progress - accepts a callback which will be called with an event representing the progress of the upload. Event object is of shape
  • loaded - amount uploaded
  • total - total amount to upload
  • percent - number between 0 and 1 representing the percent completed
• abort - aborts the xhr instance

Examples:

1RNS3.put(file, options).progress((e) => console.log(e.loaded / e.total)); // or console.log(e.percent)
2
3RNS3.put(file, option).abort();

License

MIT