socketio-file-upload icon indicating copy to clipboard operation
socketio-file-upload copied to clipboard

Ability to cancel an upload in progress

Open TroyWolf opened this issue 7 years ago • 2 comments

How difficult would it be to provide a method to cancel an in-progress file upload? Dropzone.js offers this functionality: http://www.dropzonejs.com/#config-addRemoveLinks. I'm thinking something similar.

To understand why someone might want this, "accidentally" drop a folder with a dozen 500MB video files onto your application's dropzone. It would be nice if the user could click to cancel either individual files or all files.

TroyWolf avatar Dec 06 '17 00:12 TroyWolf

exactly, siofu have this feature already // but only in server side

at doc, we can cancel(abort) the upload with instance.abort(id, socket)

Sadly, tha'st a bit hard to used (if wrong, correct me please) when cancel a specific upload

on web side

let serialNum = 0
function startAddMeta (event) {
// we make every upload a own tag before we upload
  event.file.meta.serialNum = serialNum // tag it
  siofu.removeEventListener('start', startAddMeta)
}
siofu.addEventListener('start', startAddMeta)

function cancelUpload() { // use this to cancel 
  console.log('cancel serial num ', 2)// now we will cancel the No.2 upload
  socket.emit('abortupload', 2)
})

on server side

let needaborts = []
socket.on('abortupload', function (whichAbort) {
  needaborts.push(Number(whichAbort))
})

uploader.on('progress', function (event) {
// check if cancel needed when process event happen
  while (needaborts.length > 0) {
    let slotaborted = needaborts.pop()
    if (Number(event.file.meta.serialNum) === slotaborted) {
      uploader.abort(event.file.id, socket)
    }
  }
})

ryanaltair avatar Jun 14 '18 08:06 ryanaltair

ryanaltair's solution looks like it should work, but I agree that it is not very elegant.

One issue in ryanaltair's code: you'll need to increment serialNum to prevent two uploads getting the same ID.

sffc avatar Jun 19 '18 07:06 sffc