react-s3-uploader
Advanced tools
react-s3-uploader - npm Package Compare versions
Comparing version 3.3.0 to 3.4.0
| { | ||
| "name": "react-s3-uploader", | ||
| "version": "3.3.0", | ||
| "version": "3.4.0", | ||
| "description": "React component that renders a file input and automatically uploads to an S3 bucket", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
@@ -17,2 +17,3 @@ "use strict"; | ||
| onError: React.PropTypes.func, | ||
| signingUrlMethod: React.PropTypes.string, | ||
| signingUrlHeaders: React.PropTypes.object, | ||
@@ -23,2 +24,3 @@ signingUrlQueryParams: React.PropTypes.oneOfType([ | ||
| ]), | ||
| signingUrlWithCredentials: React.PropTypes.bool, | ||
| uploadRequestHeaders: React.PropTypes.object, | ||
@@ -44,3 +46,4 @@ contentDisposition: React.PropTypes.string, | ||
| }, | ||
| server: '' | ||
| server: '', | ||
| signingUrlMethod: 'GET' | ||
| }; | ||
@@ -50,3 +53,3 @@ }, | ||
| uploadFile: function() { | ||
| new S3Upload({ | ||
| this.myUploader = new S3Upload({ | ||
| fileElement: ReactDOM.findDOMNode(this), | ||
@@ -59,4 +62,6 @@ signingUrl: this.props.signingUrl, | ||
| onError: this.props.onError, | ||
| signingUrlMethod: this.props.signingUrlMethod, | ||
| signingUrlHeaders: this.props.signingUrlHeaders, | ||
| signingUrlQueryParams: this.props.signingUrlQueryParams, | ||
| signingUrlWithCredentials: this.props.signingUrlWithCredentials, | ||
| uploadRequestHeaders: this.props.uploadRequestHeaders, | ||
@@ -68,2 +73,6 @@ contentDisposition: this.props.contentDisposition, | ||
| abort: function() { | ||
| this.myUploader && this.myUploader.abortUpload(); | ||
| }, | ||
| clear: function() { | ||
@@ -70,0 +79,0 @@ clearInputFile(ReactDOM.findDOMNode(this)); |
@@ -21,2 +21,3 @@ react-s3-uploader | ||
| signingUrl="/s3/sign" | ||
| signingUrlMethod="POST" // default "GET" | ||
| accept="image/*" | ||
@@ -29,2 +30,3 @@ preprocess={this.onUploadStart} | ||
| signingUrlQueryParams={{ additional: query-params }} | ||
| signingUrlWithCredentials={ true } // in case when need to pass authentication credentials via CORS | ||
| uploadRequestHeaders={{ 'x-amz-acl': 'public-read' }} | ||
@@ -61,6 +63,9 @@ contentDisposition="auto" | ||
| ### 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 | ||
| ------------ | ||
| If can use custom function to get 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. | ||
| 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. | ||
@@ -168,6 +173,6 @@ ```javascript | ||
| @url = storage.put_object_url(ENV['S3_BUCKET_NAME'], "user_uploads/#{params[:objectName]}", 15.minutes.from_now.to_time.to_i, headers, options) | ||
| url = storage.put_object_url(ENV['S3_BUCKET_NAME'], "user_uploads/#{params[:objectName]}", 15.minutes.from_now.to_time.to_i, headers, options) | ||
| respond_to do |format| | ||
| format.json { render json: {signedUrl: @url} } | ||
| format.json { render json: {signedUrl: url} } | ||
| end | ||
@@ -185,2 +190,8 @@ ``` | ||
| ##### 3.4.0 | ||
| * Adding optional prop `signingUrlMethod` (default: `GET`) [#103] | ||
| * Adding optional prop `signingUrlWithCredentials` [#103] | ||
| * Adding `abort` to react component [#96] | ||
| ##### 3.3.0 | ||
@@ -187,0 +198,0 @@ * Adding optional preprocess hook supports asynchronous operations such as resizing an image before upload [#79 #72] |
@@ -11,2 +11,3 @@ /** | ||
| S3Upload.prototype.signingUrl = '/sign-s3'; | ||
| S3Upload.prototype.signingUrlMethod = 'GET'; | ||
| S3Upload.prototype.fileElement = null; | ||
@@ -57,6 +58,10 @@ S3Upload.prototype.files = null; | ||
| S3Upload.prototype.createCORSRequest = function(method, url) { | ||
| S3Upload.prototype.createCORSRequest = function(method, url, opts) { | ||
| var opts = opts || {}; | ||
| var xhr = new XMLHttpRequest(); | ||
| if (xhr.withCredentials != null) { | ||
| if (opts.withCredentials != null) { | ||
| xhr.withCredentials = opts.withCredentials; | ||
| } | ||
| xhr.open(method, url, true); | ||
@@ -85,4 +90,4 @@ } | ||
| } | ||
| var xhr = this.createCORSRequest('GET', | ||
| this.server + this.signingUrl + queryString); | ||
| var xhr = this.createCORSRequest(this.signingUrlMethod, | ||
| this.server + this.signingUrl + queryString, { withCredentials: this.signingUrlWithCredentials }); | ||
| if (this.signingUrlHeaders) { | ||
@@ -149,3 +154,3 @@ var signingUrlHeaders = this.signingUrlHeaders; | ||
| var fileName = latinize(normalizedFileName); | ||
| xhr.setRequestHeader('Content-Disposition', disposition + '; filename=' + fileName); | ||
| xhr.setRequestHeader('Content-Disposition', disposition + '; filename="' + fileName + '"'); | ||
| } | ||
@@ -152,0 +157,0 @@ if (this.uploadRequestHeaders) { |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by5.89%
22431
- Lines of code
- increased by3.93%
344
- Number of lines in readme file
- increased by4.58%
251