CODEWITHSUNDEEP
javascriptjqueryfile-upload
EaBengaluru
EaBengaluru

Reputation: 81

How to resume and upload file upload using tus-client

i want to pause and resume file upload as shown in this example https://tus.io/demo.html

i'm using this https://github.com/tus/tus-js-client Plugin

i searched for every where but did not find any solution

Question: i want to pause and resume fileupload for multiple file

here is my full code: https://codepen.io/eabangalore/pen/dwXEMM?editors=1010

Please help me thanks in advance!!

Upvotes: 3

Views: 5203

Answers (1)

Azaz ul Haq
Azaz ul Haq

Reputation: 1747

Uppy

You can use Uppy File Uploader for resumable uploads. It wraps tus-js-client.js and provide a simplified interface.

You can find its documentation here and live example here

After importing Uppy JS and CSS files on your web page you need to do some scripting something similar to following:

<script type="text/javascript">
  var uppy = new Uppy.Core({ debug: true, autoProceed: false });
  uppy.use(Uppy.Dashboard, {
    trigger: '.UppyModalOpenerBtn',
    inline: true,
    target: '.DashboardContainer'
});
  uppy.use(Uppy.Tus10, { endpoint: 'http://localhost:1080/files/' });
  uppy.run();
</script>

Some HTML:

<div class="DashboardContainer"></div>

Hope this would help. If not, feel free to further discuss the issue.

TUS protocol (Edit)

As discussed in comments, you want to upload multiple files usingtus-client-js instead of Uppy. For that you can have a look at this post to handle multiple uploads scenario: https://github.com/tus/tus-js-client/issues/115

The post is about initiating another file upload after the first one is completed successfully.

EDIT

As per the documentation of tus-js-client library, you need to call abort to pause and start method of your file upload object to pause/resume the upload:

  1. Optionally pause the upload if the user/application wishes to do so using Upload#abort. This will cause any currently running transfers to be immediately stopped.

  2. Optionally resume the previously paused upload by called Upload#start again. This will resume the upload at the point at which it had stopped before. You can also use this approach to continue the upload after an error has occurred.

To learn more about what is going on under the hood, please visit this link.

Upvotes: 5

Related Questions