I'm writing a web application which allows a user to select a PNG file, write an iTXt chunk to it and then save it back to their local file system. I would use the new FileWriter API to do so but currently only Google Chrome has added support for it.
Since my file is represented in memory as a binary string I use data URIs to prompt the user to save the file as follows:
window.location.href = "data:application/octet-stream;base64," + btoa(blob);
Since the mime-type is application/octet-stream the browser prompts the user to open or save it. However the problem is that the user does not know which type of file it is. So the user has to add the file extension manually.
Currently I alert the user which extension the file needs to be saved with. However this seems like an inelegant solution. Is there a better way to achieve the same result?
If this were HTTP, then you'd either have to set the content disposition to attachment, to get the file saved even if its mime type is known, or to set the file name for an attachment of octet-stream type. Neither of these headers can be emulated using the data: URI, though, so I see no way to open a “Save as…” dialog using such a URI.
Others have asked how to open a save file dialog for a js variable, and judging from the answers there, there appears to be ready-to-use solutions which work as long as the client has Flash installed (and not blocked).
So perhaps you might try severl solutions, starting with the FileWriter you mention, trying a flash-based approach if that isn't available, and falling back to data: URI with an alert message about the file name extension. That way you could probably achieve the best result possible for each client.
Related
Is there a way to download a canvas image to a file folder without a prompt showing up? I have found solutions requiring a prompt where you name the file, but I have not found any solutions where you can dynamically name the image and save to a local file. I am very new to front-end development, so I am not entirely familiar with Node.js or JQuery/PHP/Ajax. I have found solutions using these but they have ended up still using prompts.
In general, this is a security feature.
You don't want a site you browsing to save files to your computer silently. They can possibly contain a malicious code for example, or override an existing file. Thus, as a security feature the browsers are asking you to name the file you will save.
There is a way to name the files thou, so you don't need to present the user with generic file name.
On How to do that - it really depends what are you using to do it..
In your situation - if those are log files you want to save - you can send them back to the server. That can be easily done.
Say I have a webapp which executes in its entirety on the client-side. Its purpose is to act as a file conversion utility, for example converting a user's local stored word document into a PDF.
So with the user's permission, the app can read a specified local file and process it, in memory, into PDF format.
How can I get the user to 'download' the result? since the data is held in the browser's memory anyway, I do not wish to upload it to some server.
[edit]
No flash based solutions
Expected file sizes to be up to 15mb
The solution for my case will be to use the HTML5 FileSaver API.
Perhaps this question should just be closed as it is effectively a duplicate of
Using HTML5/Javascript to generate and save a file
Thanks to aefxx
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
I have an html page full of images. Currently, each image is a link that opens the image in a new tab. I want that image link, when clicked, to ask the user if they want to save it. How would I got about doing that?
Serve the file with MIME type of application/octet-stream on the server to improve your chances of getting a download prompt to show, but ultimately it's up to the browser to decide what to do.
Unfortunately, that is browser behavior and is something that you can't code directly into your web pages. If the browser knows how to display a file of a particular type (which most browsers deduce from the MIME type and the file extension on the URL, if any), then it will attempt to open it in most cases. It is possible to configure the browser to behave differently, but this has to be done on the client machine by the user of that browser--and is something that you, the programmer, can't control.
You do have some options, though they aren't very attractive. The most straightforward would be to put your image(s) inside of a zip file, which most browsers will attempt to download rather than open by default.
I was wondering if there was any method to implement browser's download file prompt using JavaScript.
My reason - well users will be uploading files to a local fileserver which cannot be accessed from the webserver. In other words, both will be on different domains!
For example, let’s say websites hosted on www.xyz.com, but files would reside on local file server with address like \\10.10.10.01\Files\file.txt. How am I uploading/transferring file to local fileserver... using ActiveX and VBscript! (don’t ask :-)
So I am storing local file path in my database and binding that data to a grid. When the user clicks on that link, the file opens in a window (using JavaScript).
Problem is certain file types like text, jpg, pdf, etc. open inside browser window. How would I be able to implement content-type or content-disposition using client side scripting? Is that even possible?
EDIT:
the local file server has a window's shared folder on which the files are saved.
"content-disposition: attachment" is pretty much the only way to force that, and this MUST be set in the response header.
If the file is hosted on a web server like in your example, you can do:
window.location.replace(fileUrl);
.. and the browser will figure out what to do with the file. This works great for most files, such as .xls, .csv, etc, but keep in mind that this isn't full-proof because the user's MIME handler settings will determine what to do with the file... i.e. if it is a .txt file it will most likely just be displayed in the browser and will not be given a "file download" dialogue box.
As of August 2015, adding the "download" attribute to your tag enables the behavior you're looking for, at least in Chrome.
You could try using a plain hyperlink with type="application/octet-stream". Seems to work in FF, but IE and Opera ignore the attribute.