Sync with upstream

CHANGELOG.md

@@ -1,4 +1,61 @@
 
+##### 5.0.0
+
+* Update several dependencies, moving some to `optional` and `dev`
+* Update many typescript definitions
+* Added `mime-types` fallback when browser doesn't provide `file.type` [#223]
+
+##### 4.9.3
+
+* Add missing typescript definitions [#216]
+
+##### 4.9.2
+
+* Added typescript definitions
+
+##### 4.9.0
+
+* Better error messaging [#207]
+* Configurable Expires time [#208]
+
+##### 4.8.0
+
+* Allow 201 response code from PUT [#174]
+
+##### 4.7.0
+
+* Add an `onSignedUrl` lifecycle hook [#170]
+
+##### 4.6.2
+
+* Fix `undefined` in file path when not providing `s3path` prop [#160]
+
+##### 4.6.1
+
+* Fix `s3path` and `uniquePrefix` ordering when applied together [#156]
+
+##### 4.6.0
+
+* Add `autoUpload` prop, which can be set to `false` to disable automatic upload [#95] [#107] [#155]
+
+##### 4.5.1
+
+* Add `inputRef` prop [#153]
+
+##### 4.5.0
+
+* Removed `peerDependencies` on react and react-dom [#136]
+
+##### 4.4.0
+
+* Support `getS3` function in bundled router options [#139]
+* Support `s3Path` string prefix prop [#140]
+
+##### 4.3.0
+
+* Support middleware in express module with optional second arg
+* Allow 200 or 201 for success on sign request
+
 ##### 4.2.0
 
 * Switch to `uuid` instead of `node-uuid` [#115]

README.md

@@ -20,7 +20,9 @@ var ReactS3Uploader = require('react-s3-uploader');
     signingUrl="/s3/sign"
     signingUrlMethod="GET"
     accept="image/*"
+    s3path="/uploads/"
     preprocess={this.onUploadStart}
+    onSignedUrl={this.onSignedUrl}
     onProgress={this.onUploadProgress}
     onError={this.onUploadError}
     onFinish={this.onUploadFinish}
@@ -30,7 +32,10 @@ var ReactS3Uploader = require('react-s3-uploader');
     uploadRequestHeaders={{ 'x-amz-acl': 'public-read' }}  // this is the default
     contentDisposition="auto"
     scrubFilename={(filename) => filename.replace(/[^\w\d_\-.]+/ig, '')}
-    server="http://cross-origin-server.com" />
+    server="http://cross-origin-server.com"
+    inputRef={cmp => this.uploadInput = cmp}
+    autoUpload={true}
+    />
 ```
 
 The above example shows all supported `props`.
@@ -58,8 +63,7 @@ The resulting DOM is essentially:
 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.  You can listen for progress (and
-create a status bar, for example) by providing an `onProgress` function to the component.
+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.
@@ -114,6 +118,7 @@ app.use('/s3', require('react-s3-uploader/s3router')({
     bucket: "MyS3Bucket",
     region: 'us-east-1', //optional
     signatureVersion: 'v4', //optional (use for some amazon regions: frankfurt and others)
+    signatureExpires: 60, //optional, number of seconds the upload signed URL should be valid for (defaults to 60)
     headers: {'Access-Control-Allow-Origin': '*'}, // optional
     ACL: 'private', // this is default
     uniquePrefix: true // (4.0.2 and above) default is true, setting the attribute to false preserves the original filename in S3
@@ -124,6 +129,9 @@ This also provides another endpoint: `GET /s3/img/(.*)` and `GET /s3/uploads/(.*
 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](https://www.npmjs.com/package/express) in your package.json dependencies.**
 
 #### Access/Secret Keys
@@ -178,6 +186,53 @@ respond_to do |format|
 end
 ```
 
+#### [Micro](https://github.com/zeit/micro)
+
+```javascript
+const aws = require('aws-sdk')
+const uuidv4 = require('uuid/v4')
+const { createError } = require('micro')
+
+const options = {
+  bucket: 'S3_BUCKET_NAME',
+  region: 'S3_REGION',
+  signatureVersion: 'v4',
+  ACL: 'public-read'
+}
+
+const s3 = new aws.S3(options)
+
+module.exports = (req, res) => {
+  const originalFilename = req.query.objectName
+
+  // custom filename using random uuid + file extension
+  const fileExtension = originalFilename.split('.').pop()
+  const filename = `${uuidv4()}.${fileExtension}`
+
+  const params = {
+    Bucket: options.bucket,
+    Key: filename,
+    Expires: 60,
+    ContentType: req.query.contentType,
+    ACL: options.ACL
+  }
+
+  const signedUrl = s3.getSignedUrl('putObject', params)
+
+  if (signedUrl) {
+    // you may also simply return the signed url, i.e. `return { signedUrl }`
+    return {
+      signedUrl,
+      filename,
+      originalFilename,
+      publicUrl: signedUrl.split('?').shift()
+    }
+  } else {
+    throw createError(500, 'Cannot create S3 signed URL')
+  }
+}
+```
+
 
 ##### Other Servers
 

ReactS3Uploader.js

@@ -13,6 +13,7 @@ var ReactS3Uploader = createReactClass({
         signingUrl: PropTypes.string,
         getSignedUrl: PropTypes.func,
         preprocess: PropTypes.func,
+        onSignedUrl: PropTypes.func,
         onProgress: PropTypes.func,
         onFinish: PropTypes.func,
         onError: PropTypes.func,
@@ -29,29 +30,40 @@ var ReactS3Uploader = createReactClass({
         uploadRequestHeaders: PropTypes.object,
         contentDisposition: PropTypes.string,
         server: PropTypes.string,
-        scrubFilename: PropTypes.func
+        scrubFilename: PropTypes.func,
+        s3path: PropTypes.string,
+        inputRef: PropTypes.oneOfType([
+          PropTypes.object,
+          PropTypes.func
+        ]),
+        autoUpload: PropTypes.bool
     },
 
     getDefaultProps: function() {
         return {
             preprocess: function(file, next) {
-                console.log('Pre-process: ' + file.name);
+                console.log('Pre-process: ',file.name);
                 next(file);
             },
-            onProgress: function(percent, message) {
-                console.log('Upload progress: ' + percent + '% ' + message);
+            onSignedUrl: function( signingServerResponse ) {
+                console.log('Signing server response: ', signingServerResponse);
+            },
+            onProgress: function(percent, message, file) {
+                console.log('Upload progress: ',`${percent} % ${message}`);
             },
             onFinish: function(signResult) {
-                console.log("Upload finished: " + signResult.publicUrl)
+                console.log("Upload finished: ",signResult.publicUrl)
             },
             onError: function(message) {
-                console.log("Upload error: " + message);
+                console.log("Upload error: ",message);
             },
             server: '',
             signingUrlMethod: 'GET',
             scrubFilename: function(filename) {
                 return filename.replace(/[^\w\d_\-\.]+/ig, '');
-            }
+            },
+            s3path: '',
+            autoUpload: true
         };
     },
 
@@ -61,6 +73,7 @@ var ReactS3Uploader = createReactClass({
             signingUrl: this.props.signingUrl,
             getSignedUrl: this.props.getSignedUrl,
             preprocess: this.props.preprocess,
+            onSignedUrl: this.props.onSignedUrl,
             onProgress: this.props.onProgress,
             onFinishS3Put: this.props.onFinish,
             onError: this.props.onError,
@@ -71,7 +84,8 @@ var ReactS3Uploader = createReactClass({
             uploadRequestHeaders: this.props.uploadRequestHeaders,
             contentDisposition: this.props.contentDisposition,
             server: this.props.server,
-            scrubFilename: this.props.scrubFilename
+            scrubFilename: this.props.scrubFilename,
+            s3path: this.props.s3path
         });
     },
 
@@ -88,7 +102,18 @@ var ReactS3Uploader = createReactClass({
     },
 
     getInputProps: function() {
-        var temporaryProps = objectAssign({}, this.props, {type: 'file', onChange: this.uploadFile});
+        // declare ref beforehand and filter out
+        // `inputRef` by `ReactS3Uploader.propTypes`
+        var additional = {
+            type: 'file',
+            ref: this.props.inputRef
+        };
+
+        if ( this.props.autoUpload ) {
+            additional.onChange = this.uploadFile;
+        }
+
+        var temporaryProps = objectAssign({}, this.props, additional);
         var inputProps = {};
 
         var invalidProps = Object.keys(ReactS3Uploader.propTypes);

index.d.ts

@@ -0,0 +1,77 @@
+declare module 'react-s3-uploader' {
+  import { Component } from 'react';
+
+  export interface S3Response {
+    signedUrl: string;
+    publicUrl: string;
+    filename: string;
+    fileKey: string;
+  }
+
+  export interface ReactS3UploaderProps {
+    signingUrl?: string;
+    signingUrlMethod?: 'GET' | 'POST';
+    getSignedUrl?: (file: File, callback: (params: S3Response) => void) => void;
+    accept?: string;
+    s3path?: string;
+    preprocess?: (file: File, next: (file: File) => void) => void;
+    onSignedUrl?: (response: S3Response) => void;
+    onProgress?: (percent: number, status: string, file: File) => void;
+    onError?: (message: string) => void;
+    onFinish?: (result: S3Response, file: File) => void;
+    signingUrlHeaders?: {
+      additional: object;
+    };
+    signingUrlQueryParams?: {
+      additional: object;
+    };
+    signingUrlWithCredentials?: boolean;
+    uploadRequestHeaders?: object;
+    contentDisposition?: string;
+    server?: string;
+    inputRef?: (ref: HTMLInputElement) => any;
+    autoUpload?: boolean;
+    scrubFilename?: (filename: string) => string;
+    [key: string]: any;
+  }
+
+  class ReactS3Uploader extends Component<ReactS3UploaderProps, unknown> { }
+
+  export default ReactS3Uploader;
+}
+
+declare module 'react-s3-uploader/s3upload' {
+  import { ReactS3UploaderProps, S3Response } from 'react-s3-uploader';
+
+  export interface S3UploadOptions extends Pick<
+    ReactS3UploaderProps,
+    | 'contentDisposition'
+    | 'getSignedUrl'
+    | 'onProgress'
+    | 'onError'
+    | 'onSignedUrl'
+    | 'preprocess'
+    | 's3path'
+    | 'server'
+    | 'signingUrl'
+    | 'signingUrlHeaders'
+    | 'signingUrlMethod'
+    | 'signingUrlQueryParams'
+    | 'signingUrlWithCredentials'
+    | 'uploadRequestHeaders'> {
+    fileElement?: HTMLInputElement | null;
+    files?: HTMLInputElement['files'] | null;
+    onFinishS3Put?: ReactS3UploaderProps['onFinish'];
+    successResponses?: number[];
+    scrubFilename?: (filename: string) => string;
+  }
+
+  class S3Upload {
+    constructor(options: ReactS3UploaderProps);
+    abortUpload(): void;
+    uploadFile(file: File): Promise<S3Response>;
+    uploadToS3(file: File, signResult: S3Response): void;
+  }
+
+  export default S3Upload;
+}