I am trying to add resume functionality to html5 file uploader.
I need to be able to resume after browser was closed (and reopened) and I lost the file object, I do not want the user to drag/open the file again.
Until now I used java applet to do it but I was hoping to find an html5 solution for this problem.
I thought about saving the files in local storage but they are too big.
Is there a way to save only the file object the path or any other information that might help me reopen the file without asking the user to reopen the file?
You might want to try out Resumable.js - JavaScript Library Providing Multiple Simultaneous, Stable And Resumable Uploads Via The HTML5 File API (or its domain www.resumablejs.com).
Resumable. js a JavaScript library providing multiple simultaneous, stable and resumable uploads via the HTML5 File API.
The library is designed to introduce fault-tolerance into the upload of large files through HTTP. This is done by splitting each files into small chunks; whenever the upload of a chunk fails, uploading is retried until the procedure completes. This allows uploads to automatically resume uploading after a network connection is lost either locally or to the server. Additionally, it allows for users to pause and resume uploads without loosing state.
Resumable.js relies on the HTML5 File API and the ability to chunks files into smaller pieces. Currently, this means that support is limited to Firefox 4+ and Chrome 11+.
sorry, it is not possible. The link between the file and the browser, that you can access with javascript (the FileURL) is destroyed after closing the window (and for sure, when closing the browser). You could save the name of the file and the amounts/parts uploaded and request the user to upload that file again, continuing from where he left off, but not automatically, without the users consent.
/Edit: Why the negative votes? Please leave a comment so I know what I said wrong! The question is about how to resume an upload when the user closes the browser. And that isn't possible. It is possible to stop/resume an upload while the Browser remains open and connection is lost, but not when the user closes the browser (references are lost). You could however copy the file to a temporary filesystem and then resume upload from there but that needs user consent and its limited to the amount of space the user provisions you to use.
This is possible with newer browsers(Chrome, Firefox).
The youtube uploader is a good example.
http://support.google.com/youtube/bin/static.py?hl=en&topic=1719827&guide=1719823&page=guide.cs&answer=1672758
http://www.youtube.com/watch?v=L5ebSn9HgJ4
I'm not entirely sure how their implementation fully works, but it is possible.
Related
I am writing a single page application where the user can upload photos. But I am not clear about a situation in which while user is uploading multiple photos, he closes the browser. Now when he logs in again, the browser should automatically resume the upload from the last uploading image. Is this possible? How?
I cannot store the image in local storage and upload since the image
size can go beyond the local storage capacity.
I cannot store the file path and resume by using the file path.
Since the browser security won't allow me to.
When you are working with an SPA and the browser is closed the data in the SPA is lost. Even if you want them to resume uploading(which browser security won't allow) using the path there are 2 case scenario:
1)Does the file actually exist in the old path(No)
2)What if the user deleted or moved the file.
Anyways this should not be done using browser. Better to use a tool with 3rd party. like if you shut down the client, then the client will stop sending data to the server.
If you want to upload large files on a regular basis and not have the process be interrupted by people forgetting that their browser is uploading in another tab and quitting, then you might consider using a stand-alone upload tool (http://www.flickr.com/tools/uploadr/)
However It can be achieved by designing a special type of browser.
What would be the best way of triggering a download outside of the browser?
I have a Html Page which is not on a Server but should only function as a Digital Signage Viewer. The Server (which already exists) sends a playlist over TCP Sockets (the server is a bit older) telling the client what media it needs to download from where and where the media is supposed to be presented.
The communication between the Javascript Client code and the Tomcat server is irrelevant for now. What I would like to know is if there is a way to download the files to a certain directory without letting the browser download the file (Problems -> Download Pop Up -> Confirmation -> Can't preset different download folders etc. with Javascript), so that I can set the source of the media tags after they have downloaded ?
(If you're asking why I'm not simply streaming the media it's because if the connection is lost the media still needs to continue to play)
I really hope my explanation makes any sense.
Cheers
Cris
You may send the content to a web server and return it back to browser with specified type/filename. For example in PHP you may do something like this:
header('Content-type: text/html');
header('Content-disposition: attachment;filename=myfile.txt');
Another option is this nice JavaaScript library which allows you to save some contents on client-side:
https://github.com/koffsyrup/FileSaver.js
It allows you to do something like this in browser:
saveTextAs("Hi,This,is,a,CSV,File", "test.csv");
You may also want to store your contents in browser's localStorage or sessionStorage.
What I would like to know is if there is a way to download the files to a certain directory without letting the browser download the file
If this would be possible it would open a security leak because it would make it possible to put special files (like programs) into special folders (like autostart) and then cause unwanted execution of code. This this is hopefully not possible due to security concerns.
I have a program where the user does some actions (i.e. clicking on several buttons). I want to record their clicks and the buttons that they click to allow the user to then download a text file with a record of their clicks when they click a separate "download" button. I looked at the File-system APIs for HTML 5, but they seemed to not have cross-browser support. I would ideally like to have this entire file generation and download scheme be entirely client-side, but I am open to server-side ideas as well.
TL;DR: Essentially I'm looking for an equivalent to Java's FileWriter, FileReader, ObjectOutputStream, and ObjectInputStream within Vanilla JS or jQuery (would like to stay away from php, but I'll use it as a last option).
Also, why don't all browsers support the filesystem api? (I'm guessing that it would make MSWord and Pages go out of business with all the open source clientside text editors that could come out.)
Unfortunately the HTML5-File-system is no longer a part of the spec, long story short FF refused to implement because they claimed everything you could do in the File-System API was doable in the HTML5 Indexeddb (which was mostly true). Please see this blog post for more on why FF didn't implement. I do not know IE's story. (I may have exagerated why FireFox didn't implement, I'm still bummed because you cannot actually do everything in indexeddb that you can do in the noew "Chrome File-system API")
Typically if two of those three browsers implement a spec, it stays in the spec. Otherwise that spec gets orphaned. However, I'm fairly certain a large reason the file-system api didn't take off is because of the IndexedDB API (caniuse IndexedDB) really took off when both specs were introduced. If you want cross browser support, check this api out.
That all said if you are still set on the file-system api some developers wrote a nice wrapper around the IndexedDB, the File-system api wouldn't actually supply you with a stream anyway. You would have to keep appending events to a given file given a fileWriter object. you'd then have to read the entire file and send to the server via an ajax request and then downloaded from the server once successfully uploaded.
The better route would be to use the IndexedDB apiwhich as stated on developer.mozilla
Open a database.
Create an object store in upgrading database.
Start a transaction and make a request to do some database operation, like adding or retrieving data.
Wait for the operation to complete by listening to the right kind of DOM event.
Do something
with the results (which can be found on the request object).
Here are a couple tutorials on the IndexedDB.
https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB
http://www.html5rocks.com/en/tutorials/indexeddb/todo/
As for giving the user that file, as mentioned briefly before you would have to upload the file to the server and download upon the "download" request. Unfortunately you have to trick the user into giving them the data already on their machine. Anyway, hope this all helps.
I have an embedded system with a web server Mongoose, I have to allow the client to download some log files generated at runtime, I have a problem during the download, in practice, the browser first downloads the file and then asks where to save the file .
The behavior is unpleasant because the download takes a few seconds and the client does not understand what's going on.
Is there any option, for example, in the header of the file, to force the browser to ask before making the download where to save the file?
Thanks.
it is not up to you to decide how the client's browser is behaving.
if the browser is set to save the file automatically in a specific place, then there is nothing you can do.
your only workarounds is to either upload your file somewhere and suggest the viewer to right-click a download link that points to the file, it will open the dialog,
or suggest the viewer to change browser settings,
or write a browser extension that does that and offer viewers to install it.
I want to allow a web site users to be able to download files from my site, but with the help of a client-side downloader with an ability to continue an interrupted download.
For example, I want to sent a person a file with a size of 30+ Meg. I want the user to have the best downloading experience, so I can't afford him downloading 25 Meg and then getting the download dropped due to the network problems on his side.
Therefore, I want to have a javascript downloader rendered on a download page, that will show the actual client-side file delivery, and when it is downloaded, to give an ability to a user to save the file.
Or is it not possible due to the fact that javascript won't be able to open a save file dialog and save to a file system?
I'm afraid that is not possible with JavaScript and that's why:
To continue downloading from the certain point you should send to the server the position number to start downloading from. And as JavaScript has no access to local file system, you can't get that position.
UPD: it seems that I was too hurrying with the reply.
The file size can be gotten using the HTML5 File API and after getting the file size you can pass it to the server which should support the partial downloading.
But anyway, after downloading another part of the file you should sew two pieces together in some way; standard web browser dialog will only suggest to overwrite the file.
UPD2: to work with files in some Internet Explorers you can use FileSystemObject:
var fso;
fso = new ActiveXObject("Scripting.FileSystemObject");
I'd look into making a plugin or extension. Like those DownloadThemAll extensions for firefox and Google chrome. Another alternative would be to use Flash, either alone or integrating it with javascript like hinted here: http://www.communitymx.com/content/article.cfm?cid=0922A