React Native AWS3 is a module for uploading files to S3. Unlike other libraries out there, there are no native dependencies.
npm install --save react-native-aws3
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:
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "Stmt1458840156000",
"Effect": "Allow",
"Action": [
"s3:GetObject",
"s3:GetObjectAcl",
"s3:GetObjectVersion",
"s3:PutObject",
"s3:PutObjectAcl",
"s3:PutObjectVersionAcl"
],
"Resource": [
"arn:aws:s3:::my-bucket/uploads/*"
]
}
]
}import{RNS3}from'react-native-aws3';constfile={// `uri` can also be a file system path (i.e. file://)uri: "assets-library://asset/asset.PNG?id=655DBE66-8008-459C-9358-914E1FB532DD&ext=PNG",name: "image.png",type: "image/png"}constoptions={keyPrefix: "uploads/",bucket: "your-bucket",region: "us-east-1",accessKey: "your-access-key",secretKey: "your-secret-key",successActionStatus: 201}RNS3.put(file,options).then(response=>{if(response.status!==201)thrownewError("Failed to upload image to S3");console.log(response.body);/** * { * postResponse: { * bucket: "your-bucket", * etag : "9f620878e06d28774406017480a59fd4", * key: "uploads/image.png", * location: "https://your-bucket.s3.amazonaws.com/uploads%2Fimage.png" * } * } */});Upload a file to S3.
Arguments:
file
urirequired - File system URI, can be assets library path orfile://pathnamerequired - The name of the file, will be stored as such in S3typerequired - The mime type, also used forContent-Typeparameter in the S3 post policy
options
acl- The Access Control List of this object. Defaults topublic-readkeyPrefix- Prefix, or path to the file on S3, i.e.uploads/(note the trailing slash)bucketrequired - Your S3 bucketregionrequired - The region of your S3 bucketaccessKeyrequired - Your S3AWSAccessKeyIdsecretKeyrequired - Your S3AWSSecretKeysuccessActionStatus- HTTP response status if successful, defaults to 201awsUrl- AWS S3 url. Defaults tos3.amazonaws.comtimeDelta- 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 shapeloaded- amount uploadedtotal- total amount to uploadpercent- number between 0 and 1 representing the percent completed
abort- aborts the xhr instance
Examples:
RNS3.put(file,options).progress((e)=>console.log(e.loaded/e.total));// or console.log(e.percent)RNS3.put(file,option).abort();- Support
DeleteObjectand (authenticated)GetObjectoperations.