Merge pull request #505 from transloadit/fix/limit-progress

Fix progress with `limit`ed XHRUploads

package-lock.json

@@ -10470,6 +10470,23 @@
         "vlq": "0.2.2"
       }
     },
+    "make-dir": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.1.0.tgz",
+      "integrity": "sha512-0Pkui4wLJ7rxvmfUvs87skoEaxmu0hCUApF8nonzpl7q//FWp9zu8W61Scz4sd/kUiqDxvUhtoam2efDyiBzcA==",
+      "dev": true,
+      "requires": {
+        "pify": "3.0.0"
+      },
+      "dependencies": {
+        "pify": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
+          "dev": true
+        }
+      }
+    },
     "makeerror": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.11.tgz",
@@ -14778,6 +14795,34 @@
         }
       }
     },
+    "temp-dir": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-1.0.0.tgz",
+      "integrity": "sha1-CnwOom06Oa+n4OvqnB/AvE2qAR0=",
+      "dev": true
+    },
+    "temp-write": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/temp-write/-/temp-write-3.4.0.tgz",
+      "integrity": "sha1-jP9jD7fp2gXwR8dM5M5NaFRX1JI=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "4.1.11",
+        "is-stream": "1.1.0",
+        "make-dir": "1.1.0",
+        "pify": "3.0.0",
+        "temp-dir": "1.0.0",
+        "uuid": "3.0.1"
+      },
+      "dependencies": {
+        "pify": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
+          "dev": true
+        }
+      }
+    },
     "test-exclude": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-4.1.1.tgz",

package.json

@@ -92,6 +92,7 @@
     "redux": "^3.7.2",
     "sass": "0.5.0",
     "tape": "^4.8.0",
+    "temp-write": "^3.4.0",
     "tinyify": "^1.0.0",
     "uppy-server": "0.0.7",
     "watchify": "3.7.0",

src/plugins/XHRUpload.js

@@ -199,16 +199,12 @@ module.exports = class XHRUpload extends Plugin {
         // if (!files[file.id]) return
         xhr.abort()
       })
-
-      this.uppy.emit('upload-started', file.id)
     })
   }
 
   uploadRemote (file, current, total) {
     const opts = this.getOptions(file)
     return new Promise((resolve, reject) => {
-      this.uppy.emit('upload-started', file.id)
-
       const fields = {}
       const metaFields = Array.isArray(opts.metaFields)
         ? opts.metaFields
@@ -269,8 +265,12 @@ module.exports = class XHRUpload extends Plugin {
       if (file.error) {
         return () => Promise.reject(new Error(file.error))
       } else if (file.isRemote) {
+        // We emit upload-started here, so that it's also emitted for files
+        // that have to wait due to the `limit` option.
+        this.uppy.emit('upload-started', file.id)
         return this.uploadRemote.bind(this, file, current, total)
       } else {
+        this.uppy.emit('upload-started', file.id)
         return this.upload.bind(this, file, current, total)
       }
     })

test/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../.eslintrc",
+  "env": {
+    "mocha": true
+  }
+}

test/endtoend/specs/uppy.test.js

@@ -1,5 +1,7 @@
 /* global browser, expect, capabilities  */
 var path = require('path')
+var http = require('http')
+var tempWrite = require('temp-write')
 
 var testURL = 'http://localhost:4567'
 
@@ -65,3 +67,83 @@ describe('File upload with DragDrop + Tus, DragDrop + XHRUpload, i18n translated
   //     })
   // })
 // })
+
+describe.skip('XHRUpload with `limit`', () => {
+  let server = null
+  before(() => {
+    server = http.createServer((req, res) => {
+      res.writeHead(200, {
+        'content-type': 'application/json',
+        'access-control-allow-origin': '*'
+      })
+      req.pause()
+      setTimeout(() => {
+        req.resume()
+      }, 3000)
+      req.on('end', () => {
+        res.end('{"status":"ok"}')
+      })
+    }).listen()
+  })
+  after(() => {
+    server.close()
+    server = null
+  })
+
+  it('should start counting progress for all files', () => {
+    const files = [
+      makeFile(1000),
+      makeFile(1000),
+      makeFile(1000),
+      makeFile(1000),
+      makeFile(1000),
+      makeFile(1000),
+      makeFile(1000),
+      makeFile(1000),
+      makeFile(1000),
+      makeFile(1000)
+    ]
+
+    const endpoint = `http://localhost:${server.address().port}`
+    browser.execute((endpoint) => {
+      window.startXHRLimitTest(endpoint)
+    }, endpoint)
+
+    if (browserSupportsChooseFile(capabilities)) {
+      files.forEach((file) => {
+        browser.chooseFile('#uppyXhrLimit .uppy-DragDrop-input', file.path)
+      })
+    } else {
+      browser.execute((files) => {
+        files.forEach((data, i) => {
+          window.uppyXhrLimit.addFile({
+            source: 'test',
+            name: `testfile${i}`,
+            type: 'text/plain',
+            data: new Blob([data], { type: 'text/plain' })
+          })
+        })
+      }, files.map((file) => file.content.toString('hex')))
+    }
+
+    browser.execute(() => {
+      window.uppyXhrLimit.upload()
+    })
+    browser.pause(5000)
+    const status = browser.execute(() => ({
+      started: window.uppyXhrLimit.uploadsStarted,
+      complete: window.uppyXhrLimit.uploadsComplete
+    })).value
+    expect(status.started).to.be.equal(files.length)
+    expect(status.complete).to.be.equal(2)
+  })
+})
+
+function makeFile (size) {
+  const content = Buffer.allocUnsafe(size)
+  for (let i = 0; i < size; i++) {
+    content[i] = Math.floor(Math.random() * 255)
+  }
+
+  return { path: tempWrite.sync(content), content }
+}

test/endtoend/src/index.html

@@ -35,6 +35,11 @@
       <div>
         <div id="uppyDashboard"></div>
       </div>
+
+      <h2>Uppy XHRUpload `limit`</h2>
+      <div>
+        <div id="uppyXhrLimit"></div>
+      </div>
     </main>
 
     <link href="uppy.min.css" rel="stylesheet">

test/endtoend/src/main.js

@@ -45,4 +45,27 @@ const uppyDashboard = Uppy({
   .use(Tus, { endpoint: 'https://master.tus.io/files/' })
   .run()
 
+function startXHRLimitTest (endpoint) {
+  const uppy = Uppy({
+    id: 'uppyXhrLimit',
+    debug: true,
+    autoProceed: false
+  })
+    .use(DragDrop, { target: '#uppyXhrLimit' })
+    .use(XHRUpload, { endpoint, limit: 2 })
+    .run()
+
+  uppy.uploadsStarted = 0
+  uppy.uploadsComplete = 0
+
+  uppy.on('upload-started', () => {
+    uppy.uploadsStarted++
+  })
+  uppy.on('upload-success', () => {
+    uppy.uploadsComplete++
+  })
+}
+
+window.startXHRLimitTest = startXHRLimitTest
+
 console.log(uppyDragDrop, uppyi18n, uppyDashboard)