How can i show progress & speed of download

Question

First, thanks to help me! How can i make a file first download to the browser and after that just popup the file... e.g http://mega.nz

I did server side script php, it sends to browser the file in chunks with the content-disposition header and it works!

But i want first download it to browser and show progress & speed.

English isn't my main language...

Stackoverflow is here for specific programming questions, and this question is fairly open ended and doesn't provide any specific examples, so you're likely to be downvoted. Por favor proporcione un ejemplo específico. — Xander Luciano, Aug 11 '16 at 21:33
I just want some idea... cuz in my example it worked, but i have no clue. I want to display info about the file's progress&speed (i've set limit in php) — Gabriel dos Anjos, Aug 11 '16 at 21:43
Ok, I posted some API's you can hook into, both chrome's and the HTML5's standard, and also a library someone made on github you could use to get started with quickly. Hope that helps get you started in the right direction! — Xander Luciano, Aug 11 '16 at 21:54
@nicematt how can i join '-'... there is a number or something?... — Gabriel dos Anjos, Aug 16 '16 at 20:38
@GabrieldosAnjos Create a new question instead, specifying the problem... as well... if you've strength! — , Aug 16 '16 at 20:39
@nicematt & XanderLuciano I did that but the question was downvoted... i'm half way there, haha. I'm using FileSaver but before using saveAs() method i have to construct the file from XMLHttpRequest.responseText using File API or Blob and the file is too heavy, the browser crashes. — Gabriel dos Anjos, Aug 16 '16 at 20:46
@GabrieldosAnjos I know how to solve this, but it'd be better if you tell the code again, or you can post it in http://pastebin.com, so it'll be better to explain it. You're not correctly declaring the .zip content, a .zip isn't specified in this way. But, yeah, the file size contribute the browser to crash... — , Aug 16 '16 at 20:50
@GabrieldosAnjos http://pastebin.com/MAH8RMCN I've included JSZip library in your code. You shouldn't handle this process by hands. — , Aug 16 '16 at 21:19
I found the anwser http://stackoverflow.com/questions/17274655/how-to-download-zip-and-save-multiple-files-with-javascript-and-get-progress — Gabriel dos Anjos, Aug 16 '16 at 21:20
@nicematt Yeah i looked into zip content download and found that — Gabriel dos Anjos, Aug 16 '16 at 21:21
@nicematt i'll do ur code, thanks for helping me, seriously!! — Gabriel dos Anjos, Aug 16 '16 at 21:26
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/121106/discussion-between-gabriel-dos-anjos-and-nicematt). — Gabriel dos Anjos, Aug 16 '16 at 21:39
[StreamSaver.js](https://github.com/jimmywarting/StreamSaver.js/) is another way to go — Endless, Aug 31 '16 at 22:15

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

This is not going to be a complete answer, but I will try and get you started on the right path.

First off, you'll need to use the a filesystem API to download your file to the browser cache. For chrome you can find more info here: https://developer.chrome.com/apps/fileSystem

The API extends through HTML5 though, so you can do this in other browsers as well. See this article for more information: http://www.html5rocks.com/en/tutorials/offline/quota-research/#toc-desktop

Now that is how it works behind the scenes, as far as implementing it yourself, take a look at FileSaver.js
From their Github:

FileSaver.js implements the saveAs() FileSaver interface in browsers that do not natively support it. There is a FileSaver.js demo that demonstrates saving various media types.

FileSaver.js is the solution to saving files on the client-side, and is perfect for webapps that need to generate files, or for saving sensitive information that shouldn't be sent to an external server.

This should allow you to target any modern browser for large file downloading, as well as pausing and resuming downloads.

You may also want to look into NodeJS as there will likely be some packages made already you could leverage in your server application.

Thank you for the time to point me to right direction! Why is [on hold] on my title? — Gabriel dos Anjos, Aug 15 '16 at 13:08
How can i explain better in order to allow other users find usefull content as this answer provides? — Gabriel dos Anjos, Aug 15 '16 at 13:32
@GabrieldosAnjos You'll need to try some code out, and when you run into a specific problem, then post that. As of right now, your question is too broad for anyone to give you specific help on Stack Overflow. If you post a new question, tag me, or reply to this comment and I'll help you out. — Xander Luciano, Aug 15 '16 at 14:35

score 0 · Answer 2 · answered Aug 11 '16 at 21:43

0

The way Mega.nz works is by using the FileSystem API. It writes the file in a "cached" form on your system in an example location as such: AppData\Local\Google\Chrome\User Data\Default\File System\

What are the benefits of this? Visually none, other than it just makes the feel of downloading something different.

How do you do this? It's not an easy, type this code and you're done! They have clouds set up for this. I would first research FileSystem.

answered Aug 11 '16 at 21:43

Blake Connally

689
1
4
16

Thank you so much! – Gabriel dos Anjos Aug 11 '16 at 21:52
1

You are wrong about the benefits, it allows pausing and resuming downloading as well as being able to leverage asynchronous streams. This is likely not his case, but for other sites it's very possible to change stream sources mid download to accommodate server load. It can also prevent users from directlinking to a download URL (otherwise you can create single use tokens for download URL's), and lastly, you could also throttle the stream to change the download speeds (e.g. free vs paid user sites). – Xander Luciano Aug 11 '16 at 21:52
@XanderLuciano Don't make an answer for a question that is not present. It is not required for pausing and resuming downloads, therefore, it is not a part of this question. – Blake Connally Aug 11 '16 at 22:01
1

Just because he didn't ask about it doesn't mean we shouldn't provide the information. Please remember that often times future users will come across questions looking for information also. – Xander Luciano Aug 11 '16 at 22:04

How can i show progress & speed of download

2 Answers2