react-s3-uploader
Provides a React
component that automatically uploads to an S3 Bucket.
Install
$ npm install --save react-s3-uploader
From Browser
var ReactS3Uploader = ; ... <ReactS3Uploader ="/s3/sign" ="GET" ="image/*" ="/uploads/" = = = = = = = = // = // ="auto" = ="http://cross-origin-server.com" = = />
The above example shows all supported props
.
This expects a request to /s3/sign
to return JSON with a signedUrl
property that can be used
to PUT the file in S3.
contentDisposition
is optional and can be one of inline
, attachment
or auto
. If given,
the Content-Disposition
header will be set accordingly with the file's original filename.
If it is auto
, the disposition type will be set to inline
for images and attachment
for
all other files.
server
is optional and can be used to specify the location of the server which is
running the ReactS3Uploader server component if it is not the same as the one from
which the client is served.
Use scrubFilename
to provide custom filename scrubbing before uploading. Prior to version 4.0, this library used unorm
and latinize
to filter out characters. Since 4.0, we simply remove all characters that are not alphanumeric, underscores, dashes, or periods.
The resulting DOM is essentially:
<input ="file" = />
The preprocess(file, next)
prop provides an opportunity to do something before the file upload begins,
modify the file (scaling the image for example), or abort the upload by not calling next(file)
.
When a file is chosen, it will immediately be uploaded to S3 (unless autoUpload
is false
). You can listen for progress (and create a status bar, for example) by providing an onProgress
function to the component.
Extra props
You can pass any extra props to <ReactS3Uploader />
and these will be passed down to the final <input />
. which means that if you give the ReactS3Uploader a className or a name prop the input will have those as well.
Using custom function to get signedUrl
It is possible to use a custom function to provide signedUrl
directly to s3uploader
by adding getSignedUrl
prop. The function you provide should take file
and callback
arguments. Callback should be called with an object containing signedUrl
key.
; { const client = ; const params = objectName: filename contentType: filetype ; client ;} <ReactS3Uploader className=uploaderClassName getSignedUrl=getSignedUrl accept="image/*" onProgress=onProgress onError=onError onFinish=onFinish uploadRequestHeaders= 'x-amz-acl': 'public-read' contentDisposition="auto"/>
Server-Side
Bundled router
You can use the Express router that is bundled with this module to answer calls to /s3/sign
app;
This also provides another endpoint: GET /s3/img/(.*)
and GET /s3/uploads/(.*)
. This will create a temporary URL
that provides access to the uploaded file (which are uploaded privately by default). The
request is then redirected to the URL, so that the image is served to the client.
If you need to use pass more than region and signatureVersion to S3 instead use the getS3
param. getS3
accepts a
function that returns a new AWS.S3 instance. This is also useful if you want to mock S3 for testing purposes.
To use this you will need to include the express module in your package.json dependencies.
Access/Secret Keys
The aws-sdk
must be configured with your account's Access Key and Secret Access Key. There are a number of ways to provide these, but setting up environment variables is the quickest. You just have to configure environment variables AWS_ACCESS_KEY_ID
and AWS_SECRET_ACCESS_KEY
, and AWS automatically picks them up.
Other Types of Servers
Boto for Python, in a Django project
import botoimport mimetypesimport json ... conn = object_name = content_type = signed_url = return
Ruby on Rails, assuming FOG usage
# Usual fog config, set as an initializer storage = Fog::Storage.new( provider: 'AWS', aws_access_key_id: , aws_secret_access_key: ) # In the controller options = {path_style: true}headers = {"Content-Type" => params[:contentType], "x-amz-acl" => "public-read"} url = storage.put_object_url(, "user_uploads/", 15.minutes.from_now.to_time.to_i, headers, options) respond_to do |format| format.json {render json: {signedUrl: url} }end
Micro
const aws = const uuidv4 = const createError = const options = bucket: 'S3_BUCKET_NAME' region: 'S3_REGION' signatureVersion: 'v4' ACL: 'public-read' const s3 = options module { const originalFilename = reqqueryobjectName // custom filename using random uuid + file extension const fileExtension = originalFilename const filename = `.` const params = Bucket: optionsbucket Key: filename Expires: 60 ContentType: reqquerycontentType ACL: optionsACL const signedUrl = s3 if signedUrl // you may also simply return the signed url, i.e. `return { signedUrl }` return signedUrl filename originalFilename publicUrl: signedUrl else throw }
Other Servers
If you do some work on another server, and would love to contribute documentation, please send us a PR!