@uppy/xhr-upload - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

lib/index.js

@@ -44,3 +44,17 @@ var _class, _temp;
 }
+/**
+ * Set `data.type` in the blob to `file.meta.type`,
+ * because we might have detected a more accurate file type in Uppy
+ * https://stackoverflow.com/a/50875615
+ *
+ * @param {Object} file File object with `data`, `size` and `meta` properties
+ * @returns {Object} blob updated with the new `type` set from `file.meta.type`
+ */
 
+
+function setTypeInBlob(file) {
+  var dataWithUpdatedType = file.data.slice(0, file.data.size, file.meta.type);
+  return dataWithUpdatedType;
+}
+
 module.exports = (_temp = _class =
@@ -56,3 +70,3 @@ /*#__PURE__*/
     _this.type = 'uploader';
-    _this.id = 'XHRUpload';
+    _this.id = _this.opts.id || 'XHRUpload';
     _this.title = 'XHRUpload';
@@ -146,6 +160,6 @@ _this.defaultLocale = {
 
-    var opts = _extends({}, this.opts, overrides || {}, file.xhrUpload || {});
+    var opts = _extends({}, this.opts, {}, overrides || {}, {}, file.xhrUpload || {}, {
+      headers: {}
+    });
 
-    opts.headers = {};
-
     _extends(opts.headers, this.opts.headers);
@@ -212,14 +226,19 @@
 
-  _proto.createFormDataUpload = function createFormDataUpload(file, opts) {
-    var formPost = new FormData();
+  _proto.addMetadata = function addMetadata(formData, meta, opts) {
     var metaFields = Array.isArray(opts.metaFields) ? opts.metaFields // Send along all fields by default.
-    : Object.keys(file.meta);
+    : Object.keys(meta);
     metaFields.forEach(function (item) {
-      formPost.append(item, file.meta[item]);
+      formData.append(item, meta[item]);
     });
+  };
 
+  _proto.createFormDataUpload = function createFormDataUpload(file, opts) {
+    var formPost = new FormData();
+    this.addMetadata(formPost, file.meta, opts);
+    var dataWithUpdatedType = setTypeInBlob(file);
+
     if (file.name) {
-      formPost.append(opts.fieldName, file.data, file.name);
+      formPost.append(opts.fieldName, dataWithUpdatedType, file.meta.name);
     } else {
-      formPost.append(opts.fieldName, file.data);
+      formPost.append(opts.fieldName, dataWithUpdatedType);
     }
@@ -230,2 +249,25 @@
 
+  _proto.createBundledUpload = function createBundledUpload(files, opts) {
+    var _this2 = this;
+
+    var formPost = new FormData();
+
+    var _this$uppy$getState = this.uppy.getState(),
+        meta = _this$uppy$getState.meta;
+
+    this.addMetadata(formPost, meta, opts);
+    files.forEach(function (file) {
+      var opts = _this2.getOptions(file);
+
+      var dataWithUpdatedType = setTypeInBlob(file);
+
+      if (file.name) {
+        formPost.append(opts.fieldName, dataWithUpdatedType, file.name);
+      } else {
+        formPost.append(opts.fieldName, dataWithUpdatedType);
+      }
+    });
+    return formPost;
+  };
+
   _proto.createBareUpload = function createBareUpload(file, opts) {
@@ -236,3 +278,3 @@ return file.data;
   _proto.upload = function upload(file, current, total) {
-    var _this2 = this;
+    var _this3 = this;
 
@@ -242,8 +284,8 @@ var opts = this.getOptions(file);
     return new Promise(function (resolve, reject) {
-      var data = opts.formData ? _this2.createFormDataUpload(file, opts) : _this2.createBareUpload(file, opts);
+      var data = opts.formData ? _this3.createFormDataUpload(file, opts) : _this3.createBareUpload(file, opts);
 
-      var timer = _this2.createProgressTimeout(opts.timeout, function (error) {
+      var timer = _this3.createProgressTimeout(opts.timeout, function (error) {
         xhr.abort();
 
-        _this2.uppy.emit('upload-error', file, error);
+        _this3.uppy.emit('upload-error', file, error);
 
@@ -256,6 +298,6 @@ reject(error);
       xhr.upload.addEventListener('loadstart', function (ev) {
-        _this2.uppy.log("[XHRUpload] " + id + " started");
+        _this3.uppy.log("[XHRUpload] " + id + " started");
       });
       xhr.upload.addEventListener('progress', function (ev) {
-        _this2.uppy.log("[XHRUpload] " + id + " progress: " + ev.loaded + " / " + ev.total); // Begin checking for timeouts when progress starts, instead of loading,
+        _this3.uppy.log("[XHRUpload] " + id + " progress: " + ev.loaded + " / " + ev.total); // Begin checking for timeouts when progress starts, instead of loading,
         // to avoid timing out requests on browser concurrency queue
@@ -267,4 +309,4 @@
         if (ev.lengthComputable) {
-          _this2.uppy.emit('upload-progress', file, {
-            uploader: _this2,
+          _this3.uppy.emit('upload-progress', file, {
+            uploader: _this3,
             bytesUploaded: ev.loaded,
@@ -276,3 +318,3 @@ bytesTotal: ev.total
       xhr.addEventListener('load', function (ev) {
-        _this2.uppy.log("[XHRUpload] " + id + " finished");
+        _this3.uppy.log("[XHRUpload] " + id + " finished");
 
@@ -290,6 +332,6 @@ timer.done();
 
-          _this2.uppy.emit('upload-success', file, uploadResp);
+          _this3.uppy.emit('upload-success', file, uploadResp);
 
           if (uploadURL) {
-            _this2.uppy.log("Download " + file.name + " from " + uploadURL);
+            _this3.uppy.log("Download " + file.name + " from " + uploadURL);
           }
@@ -307,3 +349,3 @@
 
-          _this2.uppy.emit('upload-error', file, error, response);
+          _this3.uppy.emit('upload-error', file, error, response);
 
@@ -314,3 +356,3 @@ return reject(error);
       xhr.addEventListener('error', function (ev) {
-        _this2.uppy.log("[XHRUpload] " + id + " errored");
+        _this3.uppy.log("[XHRUpload] " + id + " errored");
 
@@ -320,3 +362,3 @@ timer.done();
 
-        _this2.uppy.emit('upload-error', file, error);
+        _this3.uppy.emit('upload-error', file, error);
 
@@ -339,3 +381,3 @@ return reject(error);
 
-      _this2.uppy.on('file-removed', function (removedFile) {
+      _this3.uppy.on('file-removed', function (removedFile) {
         if (removedFile.id === file.id) {
@@ -348,3 +390,3 @@ timer.done();
 
-      _this2.uppy.on('cancel-all', function () {
+      _this3.uppy.on('cancel-all', function () {
         timer.done();
@@ -358,3 +400,3 @@ xhr.abort();
   _proto.uploadRemote = function uploadRemote(file, current, total) {
-    var _this3 = this;
+    var _this4 = this;
 
@@ -370,3 +412,3 @@ var opts = this.getOptions(file);
       var Client = file.remote.providerOptions.provider ? Provider : RequestClient;
-      var client = new Client(_this3.uppy, file.remote.providerOptions);
+      var client = new Client(_this4.uppy, file.remote.providerOptions);
       client.post(file.remote.url, _extends({}, file.remote.body, {
@@ -385,3 +427,3 @@ endpoint: opts.endpoint,
         socket.on('progress', function (progressData) {
-          return emitSocketProgress(_this3, progressData, file);
+          return emitSocketProgress(_this4, progressData, file);
         });
@@ -397,3 +439,3 @@ socket.on('success', function (data) {
 
-          _this3.uppy.emit('upload-success', file, uploadResp);
+          _this4.uppy.emit('upload-success', file, uploadResp);
 
@@ -409,3 +451,3 @@ socket.close();
 
-          _this3.uppy.emit('upload-error', file, error);
+          _this4.uppy.emit('upload-error', file, error);
 
@@ -419,20 +461,15 @@ reject(error);
   _proto.uploadBundle = function uploadBundle(files) {
-    var _this4 = this;
+    var _this5 = this;
 
     return new Promise(function (resolve, reject) {
-      var endpoint = _this4.opts.endpoint;
-      var method = _this4.opts.method;
-      var formData = new FormData();
-      files.forEach(function (file, i) {
-        var opts = _this4.getOptions(file);
+      var endpoint = _this5.opts.endpoint;
+      var method = _this5.opts.method;
 
-        if (file.name) {
-          formData.append(opts.fieldName, file.data, file.name);
-        } else {
-          formData.append(opts.fieldName, file.data);
-        }
-      });
+      var optsFromState = _this5.uppy.getState().xhrUpload;
+
+      var formData = _this5.createBundledUpload(files, _extends({}, _this5.opts, {}, optsFromState || {}));
+
       var xhr = new XMLHttpRequest();
 
-      var timer = _this4.createProgressTimeout(_this4.opts.timeout, function (error) {
+      var timer = _this5.createProgressTimeout(_this5.opts.timeout, function (error) {
         xhr.abort();
@@ -445,3 +482,3 @@ emitError(error);
         files.forEach(function (file) {
-          _this4.uppy.emit('upload-error', file, error);
+          _this5.uppy.emit('upload-error', file, error);
         });
@@ -451,3 +488,3 @@ };
       xhr.upload.addEventListener('loadstart', function (ev) {
-        _this4.uppy.log('[XHRUpload] started uploading bundle');
+        _this5.uppy.log('[XHRUpload] started uploading bundle');
 
@@ -460,4 +497,4 @@ timer.progress();
         files.forEach(function (file) {
-          _this4.uppy.emit('upload-progress', file, {
-            uploader: _this4,
+          _this5.uppy.emit('upload-progress', file, {
+            uploader: _this5,
             bytesUploaded: ev.loaded / ev.total * file.size,
@@ -471,4 +508,4 @@ bytesTotal: file.size
 
-        if (_this4.opts.validateStatus(ev.target.status, xhr.responseText, xhr)) {
-          var body = _this4.opts.getResponseData(xhr.responseText, xhr);
+        if (_this5.opts.validateStatus(ev.target.status, xhr.responseText, xhr)) {
+          var body = _this5.opts.getResponseData(xhr.responseText, xhr);
 
@@ -480,3 +517,3 @@ var uploadResp = {
           files.forEach(function (file) {
-            _this4.uppy.emit('upload-success', file, uploadResp);
+            _this5.uppy.emit('upload-success', file, uploadResp);
           });
@@ -486,3 +523,3 @@ return resolve();
 
-        var error = _this4.opts.getResponseError(xhr.responseText, xhr) || new Error('Upload error');
+        var error = _this5.opts.getResponseError(xhr.responseText, xhr) || new Error('Upload error');
         error.request = xhr;
@@ -494,3 +531,3 @@ emitError(error);
         timer.done();
-        var error = _this4.opts.getResponseError(xhr.responseText, xhr) || new Error('Upload error');
+        var error = _this5.opts.getResponseError(xhr.responseText, xhr) || new Error('Upload error');
         emitError(error);
@@ -500,3 +537,3 @@ return reject(error);
 
-      _this4.uppy.on('cancel-all', function () {
+      _this5.uppy.on('cancel-all', function () {
         timer.done();
@@ -509,14 +546,14 @@ xhr.abort();
 
-      xhr.withCredentials = _this4.opts.withCredentials;
+      xhr.withCredentials = _this5.opts.withCredentials;
 
-      if (_this4.opts.responseType !== '') {
-        xhr.responseType = _this4.opts.responseType;
+      if (_this5.opts.responseType !== '') {
+        xhr.responseType = _this5.opts.responseType;
       }
 
-      Object.keys(_this4.opts.headers).forEach(function (header) {
-        xhr.setRequestHeader(header, _this4.opts.headers[header]);
+      Object.keys(_this5.opts.headers).forEach(function (header) {
+        xhr.setRequestHeader(header, _this5.opts.headers[header]);
       });
       xhr.send(formData);
       files.forEach(function (file) {
-        _this4.uppy.emit('upload-started', file);
+        _this5.uppy.emit('upload-started', file);
       });
@@ -527,3 +564,3 @@ });
   _proto.uploadFiles = function uploadFiles(files) {
-    var _this5 = this;
+    var _this6 = this;
 
@@ -541,13 +578,13 @@ var actions = files.map(function (file, i) {
         // that have to wait due to the `limit` option.
-        _this5.uppy.emit('upload-started', file);
+        _this6.uppy.emit('upload-started', file);
 
-        return _this5.uploadRemote.bind(_this5, file, current, total);
+        return _this6.uploadRemote.bind(_this6, file, current, total);
       } else {
-        _this5.uppy.emit('upload-started', file);
+        _this6.uppy.emit('upload-started', file);
 
-        return _this5.upload.bind(_this5, file, current, total);
+        return _this6.upload.bind(_this6, file, current, total);
       }
     });
     var promises = actions.map(function (action) {
-      var limitedAction = _this5.limitUploads(action);
+      var limitedAction = _this6.limitUploads(action);
 
@@ -560,3 +597,3 @@ return limitedAction();
   _proto.handleUpload = function handleUpload(fileIDs) {
-    var _this6 = this;
+    var _this7 = this;
 
@@ -570,3 +607,3 @@ if (fileIDs.length === 0) {
     var files = fileIDs.map(function (fileID) {
-      return _this6.uppy.getFile(fileID);
+      return _this7.uppy.getFile(fileID);
     });
@@ -585,4 +622,4 @@
     if (this.opts.bundle) {
-      var _this$uppy$getState = this.uppy.getState(),
-          capabilities = _this$uppy$getState.capabilities;
+      var _this$uppy$getState2 = this.uppy.getState(),
+          capabilities = _this$uppy$getState2.capabilities;
 
@@ -601,4 +638,4 @@ this.uppy.setState({
     if (this.opts.bundle) {
-      var _this$uppy$getState2 = this.uppy.getState(),
-          capabilities = _this$uppy$getState2.capabilities;
+      var _this$uppy$getState3 = this.uppy.getState(),
+          capabilities = _this$uppy$getState3.capabilities;
 
@@ -616,2 +653,2 @@ this.uppy.setState({
   return XHRUpload;
-}(Plugin), _class.VERSION = "1.1.0", _temp);
+}(Plugin), _class.VERSION = "1.2.0", _temp);

package.json

 {
   "name": "@uppy/xhr-upload",
   "description": "Plain and simple classic HTML multipart form uploads with Uppy, as well as uploads using the HTTP PUT method.",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "license": "MIT",
@@ -27,8 +27,8 @@ "main": "lib/index.js",
   "dependencies": {
-    "@uppy/companion-client": "1.1.0",
-    "@uppy/utils": "1.1.0",
+    "@uppy/companion-client": "1.2.0",
+    "@uppy/utils": "1.2.0",
     "cuid": "^2.1.1"
   },
   "devDependencies": {
-    "@uppy/core": "1.1.0"
+    "@uppy/core": "1.2.0"
   },
@@ -38,3 +38,3 @@ "peerDependencies": {
   },
-  "gitHead": "28d235fe2fb57d87a399c20883fd6590aa49f4f4"
+  "gitHead": "bd2beedcffbaa840de7069860e341f02268ddbb1"
 }

src/index.js

@@ -24,2 +24,15 @@ const { Plugin } = require('@uppy/core')
 
+/**
+ * Set `data.type` in the blob to `file.meta.type`,
+ * because we might have detected a more accurate file type in Uppy
+ * https://stackoverflow.com/a/50875615
+ *
+ * @param {Object} file File object with `data`, `size` and `meta` properties
+ * @returns {Object} blob updated with the new `type` set from `file.meta.type`
+ */
+function setTypeInBlob (file) {
+  const dataWithUpdatedType = file.data.slice(0, file.data.size, file.meta.type)
+  return dataWithUpdatedType
+}
+
 module.exports = class XHRUpload extends Plugin {
@@ -31,3 +44,3 @@ static VERSION = require('../package.json').version
     this.type = 'uploader'
-    this.id = 'XHRUpload'
+    this.id = this.opts.id || 'XHRUpload'
     this.title = 'XHRUpload'
@@ -116,8 +129,8 @@
     const overrides = this.uppy.getState().xhrUpload
-    const opts = Object.assign({},
-      this.opts,
-      overrides || {},
-      file.xhrUpload || {}
-    )
-    opts.headers = {}
+    const opts = {
+      ...this.opts,
+      ...(overrides || {}),
+      ...(file.xhrUpload || {}),
+      headers: {}
+    }
     Object.assign(opts.headers, this.opts.headers)
@@ -177,17 +190,23 @@ if (overrides) {
 
-  createFormDataUpload (file, opts) {
-    const formPost = new FormData()
-
+  addMetadata (formData, meta, opts) {
     const metaFields = Array.isArray(opts.metaFields)
       ? opts.metaFields
       // Send along all fields by default.
-      : Object.keys(file.meta)
+      : Object.keys(meta)
     metaFields.forEach((item) => {
-      formPost.append(item, file.meta[item])
+      formData.append(item, meta[item])
     })
+  }
 
+  createFormDataUpload (file, opts) {
+    const formPost = new FormData()
+
+    this.addMetadata(formPost, file.meta, opts)
+
+    const dataWithUpdatedType = setTypeInBlob(file)
+
     if (file.name) {
-      formPost.append(opts.fieldName, file.data, file.name)
+      formPost.append(opts.fieldName, dataWithUpdatedType, file.meta.name)
     } else {
-      formPost.append(opts.fieldName, file.data)
+      formPost.append(opts.fieldName, dataWithUpdatedType)
     }
@@ -198,2 +217,23 @@
 
+  createBundledUpload (files, opts) {
+    const formPost = new FormData()
+
+    const { meta } = this.uppy.getState()
+    this.addMetadata(formPost, meta, opts)
+
+    files.forEach((file) => {
+      const opts = this.getOptions(file)
+
+      const dataWithUpdatedType = setTypeInBlob(file)
+
+      if (file.name) {
+        formPost.append(opts.fieldName, dataWithUpdatedType, file.name)
+      } else {
+        formPost.append(opts.fieldName, dataWithUpdatedType)
+      }
+    })
+
+    return formPost
+  }
+
   createBareUpload (file, opts) {
@@ -376,11 +416,6 @@ return file.data
 
-      const formData = new FormData()
-      files.forEach((file, i) => {
-        const opts = this.getOptions(file)
-
-        if (file.name) {
-          formData.append(opts.fieldName, file.data, file.name)
-        } else {
-          formData.append(opts.fieldName, file.data)
-        }
+      const optsFromState = this.uppy.getState().xhrUpload
+      const formData = this.createBundledUpload(files, {
+        ...this.opts,
+        ...(optsFromState || {})
       })
@@ -387,0 +422,0 @@

No alert changes

Improved metrics

Total package byte prevSize

42599

increased by5.47%

Lines of code

1073

increased by5.3%

Dependency changes

• + Added@uppy/companion-client@1.2.0(transitive)

• + Added@uppy/utils@1.2.0(transitive)

• - Removed@uppy/companion-client@1.1.0(transitive)

• - Removed@uppy/utils@1.1.0(transitive)

• Updated@uppy/companion-client@1.2.0

• Updated@uppy/utils@1.2.0