react-s3-uploader - npm Package Compare versions

Comparing version 4.9.3 to 5.0.0

CHANGELOG.md

 
+##### 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
@@ -3,0 +9,0 @@

index.d.ts

@@ -14,10 +14,10 @@ declare module 'react-s3-uploader' {
     signingUrlMethod?: 'GET' | 'POST';
-    getSignedUrl?: (file: File, callback: (params: { signedUrl: string; }) => any) => any;
+    getSignedUrl?: (file: File, callback: (params: S3Response) => void) => void;
     accept?: string;
     s3path?: string;
-    preprocess?: (file: File, next: (file: File) => any) => any;
-    onSignedUrl?: (response: S3Response) => any;
-    onProgress?: (percent: number, status: string, file: File) => any;
-    onError?: (message: string) => any;
-    onFinish?: (result: S3Response, file: File) => any;
+    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?: {
@@ -39,3 +39,3 @@ additional: object;
 
-  class ReactS3Uploader extends React.Component<ReactS3UploaderProps, any> { }
+  class ReactS3Uploader extends Component<ReactS3UploaderProps, unknown> { }
 
@@ -46,7 +46,32 @@ export default ReactS3Uploader;
 declare module 'react-s3-uploader/s3upload' {
-  import { ReactS3UploaderProps } from 'react-s3-uploader';
+  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);
-    uploadFile: (file: File) => Promise<S3Response>;
+    abortUpload(): void;
+    uploadFile(file: File): Promise<S3Response>;
+    uploadToS3(file: File, signResult: S3Response): void;
   }
@@ -53,0 +78,0 @@

package.json

 {
   "name": "react-s3-uploader",
-  "version": "4.9.3",
+  "version": "5.0.0",
   "description": "React component that renders a file input and automatically uploads to an S3 bucket",
@@ -13,2 +13,3 @@ "main": "index.js",
   },
+  "types": "index.d.ts",
   "keywords": [
@@ -28,8 +29,15 @@ "react",
   "dependencies": {
-    "aws-sdk": "2.x",
     "create-react-class": "^15.5.2",
+    "mime-types": "^2.1.24",
     "object-assign": "^2.0.0",
     "prop-types": "^15.5.8",
     "uuid": "^3.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "*",
+    "typescript": "^3.7.5"
+  },
+  "optionalDependencies": {
+    "aws-sdk": "2.x"
   }
 }

ReactS3Uploader.js

@@ -35,3 +35,6 @@ "use strict";
         s3path: PropTypes.string,
-        inputRef: PropTypes.func,
+        inputRef: PropTypes.oneOfType([
+          PropTypes.object,
+          PropTypes.func
+        ]),
         autoUpload: PropTypes.bool
@@ -43,3 +46,3 @@ },
             preprocess: function(file, next) {
-                console.log('Pre-process: ' + file.name);
+                console.log('Pre-process: ',file.name);
                 next(file);
@@ -51,9 +54,9 @@ },
             onProgress: function(percent, message, file) {
-                console.log('Upload progress: ' + percent + '% ' + message);
+                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);
             },
@@ -60,0 +63,0 @@ server: '',

s3upload.js

@@ -6,2 +6,4 @@ /**
 
+var mime = require('mime-types');
+
 S3Upload.prototype.server = '';
@@ -50,2 +52,6 @@ S3Upload.prototype.signingUrl = '/sign-s3';
 
+function getFileMimeType(file) {
+    return file.type || mime.lookup(file.name);
+}
+
 S3Upload.prototype.handleFileSelect = function(files) {
@@ -56,5 +62,5 @@ var result = [];
         this.preprocess(file, function(processedFile){
-          this.onProgress(0, 'Waiting', processedFile);
-          result.push(this.uploadFile(processedFile));
-          return result;
+            this.onProgress(0, 'Waiting', processedFile);
+            result.push(this.uploadFile(processedFile));
+            return result;
         }.bind(this));
@@ -86,6 +92,6 @@ }
     return {
-      response: xhr.responseText,
-      status: xhr.status,
-      statusText: xhr.statusText,
-      readyState: xhr.readyState
+        response: xhr.responseText,
+        status: xhr.status,
+        statusText: xhr.statusText,
+        readyState: xhr.readyState
     };
@@ -96,3 +102,3 @@ }
     var fileName = this.scrubFilename(file.name);
-    var queryString = '?objectName=' + fileName + '&contentType=' + encodeURIComponent(file.type);
+    var queryString = '?objectName=' + fileName + '&contentType=' + encodeURIComponent(getFileMimeType(file));
     if (this.s3path) {
@@ -109,3 +115,3 @@ queryString += '&path=' + encodeURIComponent(this.s3path);
     var xhr = this.createCORSRequest(this.signingUrlMethod,
-        this.server + this.signingUrl + queryString, { withCredentials: this.signingUrlWithCredentials });
+      this.server + this.signingUrl + queryString, { withCredentials: this.signingUrlWithCredentials });
     if (this.signingUrlHeaders) {
@@ -127,5 +133,5 @@ var signingUrlHeaders = typeof this.signingUrlHeaders === 'function' ? this.signingUrlHeaders() : this.signingUrlHeaders;
                 this.onError(
-                    'Invalid response from server',
-                    file,
-                    this._getErrorRequestContext(xhr)
+                  'Invalid response from server',
+                  file,
+                  this._getErrorRequestContext(xhr)
                 );
@@ -137,5 +143,5 @@ return false;
             return this.onError(
-                'Could not contact request signing server. Status = ' + xhr.status,
-                file,
-                this._getErrorRequestContext(xhr)
+              'Could not contact request signing server. Status = ' + xhr.status,
+              file,
+              this._getErrorRequestContext(xhr)
             );
@@ -158,5 +164,5 @@ }
                 return this.onError(
-                    'Upload error: ' + xhr.status,
-                    file,
-                    this._getErrorRequestContext(xhr)
+                  'Upload error: ' + xhr.status,
+                  file,
+                  this._getErrorRequestContext(xhr)
                 );
@@ -167,5 +173,5 @@ }
             return this.onError(
-                'XHR error',
-                file,
-                this._getErrorRequestContext(xhr)
+              'XHR error',
+              file,
+              this._getErrorRequestContext(xhr)
             );
@@ -181,7 +187,12 @@ }.bind(this);
     }
-    xhr.setRequestHeader('Content-Type', file.type);
+
+    var fileType = getFileMimeType(file);
+    var headers = {
+      'content-type': fileType
+    };
+
     if (this.contentDisposition) {
         var disposition = this.contentDisposition;
         if (disposition === 'auto') {
-            if (file.type.substr(0, 6) === 'image/') {
+            if (fileType.substr(0, 6) === 'image/') {
                 disposition = 'inline';
@@ -194,20 +205,15 @@ } else {
         var fileName = this.scrubFilename(file.name)
-        xhr.setRequestHeader('Content-Disposition', disposition + '; filename="' + fileName + '"');
+        headers['content-disposition'] = disposition + '; filename="' + fileName + '"';
     }
-    if (signResult.headers) {
-        var signResultHeaders = signResult.headers
-        Object.keys(signResultHeaders).forEach(function(key) {
-            var val = signResultHeaders[key];
-            xhr.setRequestHeader(key, val);
-        })
-    }
-    if (this.uploadRequestHeaders) {
-        var uploadRequestHeaders = this.uploadRequestHeaders;
-        Object.keys(uploadRequestHeaders).forEach(function(key) {
-            var val = uploadRequestHeaders[key];
-            xhr.setRequestHeader(key, val);
-        });
-    } else {
+    if (!this.uploadRequestHeaders) {
         xhr.setRequestHeader('x-amz-acl', 'public-read');
     }
+    [signResult.headers, this.uploadRequestHeaders].filter(Boolean).forEach(function (hdrs) {
+        Object.entries(hdrs).forEach(function(pair) {
+            headers[pair[0].toLowerCase()] = pair[1];
+        })
+    });
+    Object.entries(headers).forEach(function (pair) {
+        xhr.setRequestHeader(pair[0], pair[1]);
+    })
     this.httprequest = xhr;
@@ -214,0 +220,0 @@ return xhr.send(file);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

31392

increased by3.71%

Lines of code

497

increased by6.2%

Worsened metrics

Dependency count

6

increased by20%

Dev dependency count

2

increased byInfinity%

Dependency changes

• + Addedmime-types@^2.1.24

• + Addedmime-db@1.52.0(transitive)

• + Addedmime-types@2.1.35(transitive)

• - Removedaws-sdk@2.x