11

A file sharing website known as mega.com has a feature that creates a custom download manager. When you download a file, it shows a custom progress bar on the website (presumably loading the file to the cache), then creates a download prompt for the cached file. How would this be produced with javascript?

2
  • you can use a plain ajax2 request (responseType='blob'), show a progress on that, then use URL.createObjectURL(xhr.response) to feed an <a download>.
    – dandavis
    Commented Jul 16, 2015 at 5:10
  • how about this stackoverflow.com/questions/11265917/…
    – Pham Tung
    Commented Jul 17, 2015 at 2:54

2 Answers 2

16
+100

As far as I know, Mega.com uses this inner download manager because they store data on their servers in an encrypted form; encryption and decryption take place in the browser.

Storage

You can use IndexedDB to store binary data. Here's a tutorial from Mozilla, explaining how to download an image using AJAX and save it in IndexedDB.

When you have data stored in IndexedDB you should have opportunity to download it (from internal browser storage). Here you can read, how to create a download prompt.

Progress bar

When using XMLHttpRequest, you can get download progress by providing a handler for the progress event.

var oReq = new XMLHttpRequest();

oReq.addEventListener("progress", updateProgress, false);

[...]

function updateProgress (oEvent) {
  if (oEvent.lengthComputable) {
    var percentComplete = oEvent.loaded / oEvent.total;
    // ...
  } else {
    // Unable to compute progress information since the total size is unknown
  }
}

Total size of the file would be unavailable if server didn't send Content-Length with headers.

Full source code and description on MDN.

1

There is a complete answer for your question: http://tonistiigi.github.io/mega/.


If you want to create a download manager in JavaScript, these articles will help you do your work:

If you want to create a file download progress, please go to this link: Javascript source file download progress?.


Please put more thought, time, and effort into your to make your work done. If you can't, please post a comment bellow my own answer; I will help you to do it detailly.

1
  • Links gives 404
    – Prakhar
    Commented Dec 31, 2022 at 15:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.