Uppy: `uppy.reset()` is sending a DELETE request, and it probably shouldn鈥檛

Created on 12 Dec 2018  路  12Comments  路  Source: transloadit/uppy

How can we redirect back to the Dashboard after the upload-success event?

AWS S3 Bug Question

Most helpful comment

Ah, gotcha. uppy.reset() should do it:

uppy.on('complete', function () {
  uppy.reset()
})

All 12 comments

Hi! How do you mean, close the Dashboard during upload, open again when upload is complete? If you are using it in modal mode (inline: false), then you can use uppy.getPlugin('Dashboard').openModal() and uppy.getPlugin('Dashboard').closeModal(): https://uppy.io/docs/dashboard/#Methods.

No, I am using it inline: true

screen shot 2018-12-12 at 9 44 06 am

After the Upload is complete, redirect back to the main Page

screen shot 2018-12-12 at 6 02 21 pm

And If possible can you please look at this issue too.

https://github.com/transloadit/uppy/issues/1193

Ah, gotcha. uppy.reset() should do it:

uppy.on('complete', function () {
  uppy.reset()
})

Feel free to re-open if this doesn鈥檛 help!

this.uppy.reset();

works fine.

But it will send a DELETE request ( which I don't want to).

screen shot 2018-12-17 at 9 09 01 pm

What I wanted is just to clear the uploaded files and let the user see the fresh new upload dashboard, not to delete the uploaded files

  .on('upload-success', (file, res, uploadURL) => {
    const { handleSubmit, contentID, handleSelectReset } = this.props;
    if (contentID) {
      handleSubmit({
        id: contentID,
        size: res.file.size,
        content_type: 'video',
        ext: res.file.type,
        link: uploadURL,
        source: 's3',
      });
      handleSelectReset();
      debugger
      console.log('---', this.uppy)
      this.uppy.reset();
    }
  });

As of now Currently, I achieved the result with following line of code

  .on('upload-success', (file, res, uploadURL) => {
       this.uppy.getState().files = {};
       this.uppy.getState().totalProgress = null;
  });

@goto-bus-stop could you please take a look and share your opinion on this? Do we remove cancel-all event from uppy.reset() (well, it does stop the uploads) or not send a DELETE in s3-multipart (and others) if a file has been successfully uploaded? Or something else? 馃

I think there was another issue about this too, IMO this is entirely an AwsS3Multipart bug, once an upload is complete the DELETE makes no sense anymore (you can't abort a multipart upload that no longer exists)

e; i'll probably do some catchup work on Friday so can address this then

Related issue dealing with aws-s3-multipart plugin. uppy.removeFile() is triggering an abort upload which causes a DELETE request for a file that has already completed upload. I noticed this issue when I wanted to remove a file from the dashboard UI as it completed it's upload and was notified in the upload-success event handler.

.on("upload-success", (file, response) => {
    uppy.removeFile(file.id); // This triggers an abort upload
})

@humblepie

Let me provide you a solution to avoid the DELETE request

use abortMultipartUpload key while instantiating the uppy

    this.uppy = new Uppy({
      // <======== your configurations ===========>
    }).use(AwsS3Multipart, {
        serverUrl: API_BASE,
        abortMultipartUpload: () => {}, // <============ use this exactly =============>
    })

Above solution should work like charm. If it doesn't try using setTimeout inside upload-success event and call the removeFile method

    .on("upload-success", (file, response) => {
       setTimeout(() => {
           uppy.removeFile(file.id);
       }, 2000);
    })

Hope this helps!

@parwat08 Thanks. The first option doesn't work for me because it effectively no-ops the abort method which I still want to have as an available operation. The second option of introducing a delay to remove the file from the UI doesn't trigger the abort call.

However, I've found that removing the file while other files are still in queue & are uploading causes jerky behavior in the progress indicator. So i decided to just hide completed files in the dashboard UI using a .css rule.

    /* Hides completed uppy-io uploads */
    ul.uppy-Dashboard-files > li.uppy-DashboardItem.is-complete {
        display:none;
    }

@humblepie CSS: The rescue king. 馃榾

Hi there, we've been going over all issues with the team again and are marking this one as a duplicate of #1164. We'll be handling it there and happy to accept more feedback there, too.

Was this page helpful?
0 / 5 - 0 ratings