GithubHelp home page GithubHelp logo

kokoapps / react-native-aws3 Goto Github PK

View Code? Open in Web Editor NEW

This project forked from benjreinhart/react-native-aws3

0.0 0.0 0.0 75 KB

Pure JavaScript React Native library for uploading to AWS S3

License: MIT License

JavaScript 100.00%

react-native-aws3's Introduction

React Native AWS3

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

build status npm version npm downloads

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:

{
    "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/*"
            ]
        }
    ]
}

Example

import { RNS3 } from 'react-native-aws3';

const file = {
  // `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"
}

const options = {
  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)
    throw new Error("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"
   *   }
   * }
   */
});

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
  1. 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:

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

RNS3.put(file, option)
  .abort();

TODO

  • Support DeleteObject and (authenticated) GetObject operations.

License

MIT

react-native-aws3's People

Contributors

benjreinhart avatar chadwilken avatar markudevelop avatar mouneyrac avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.