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.
Related
I have developed a script for myself to read and process local text and csv files on my computer using recent Chrome or Firefox browsers with the filereader api. The script will work on the computer, even though it is not connected to the internet or a local webserver.
The reasoning behind this is to have a standalone text file interrogator, which will work on almost any computer, requiring only a browser to execute and display reasonably formatted output. similar to an awk type application.
I use the filereader api and it works well.
I do not properly understand the workings of the browser, so my question may be very stupid.
Is it possible that my script can somehow pass the filename to the script filereader api, without having to choose a file from input type=file field.
eg I have a file called addresses.csv and it resides in the same directory as my html/js file with the filereader api code.
I want to simulate the choosing of a file, without accessing my local directory and without using a webserver, but a dropdown box of predefined filenames would be even better.
No, for security reasons its not possible, because otherwise people could open arbitrary files on the computers of their visitors which is definitely not intended.
This specification also assumes that the primary user interaction is with the element of HTML forms [HTML], and that all files that are being read by FileReader objects have first been selected by the user.
See http://www.w3.org/TR/FileAPI/#security-discussion
No you cannot. Javascript cannot read your local filesystem without the use of a file input or drag and drop files (html5) as it would be vulnerable to malicious use.
There was a start of a filesystem api which Chrome has included. But you cannot read/write to just any place you want on the filesystem, you can only do so to a sandboxed area on the filesystem. Wither or not they will continue to have this in future versions of Chrome though I do not know.
It also appears the W3C itself has discontinued the file system api
Is it possible for a web application to read local files, and display them without having to upload them?
I know that when I upload something, web browser can show me the file picker and let me choose the file. Can someone enlighten me on this?
No. Modern browsers do not allow you to access local file or local file structure. It is a security vulnerability. Browser security is pretty tight, and getting tighter. Local file:// access is usually permitted if you run the browser App from the local file system, and not through an HTTP server.
It is possible. However, the user may be viewing the page from any OS or browser, making this almost impossible. The user would have to have the file you want to display in one directory as a specific filename and filetype. You would even have to have a specific user account name. It would only work in one OS - windows, in my example.
<embed src="file:///C:/users/user/filename.exe">
<img src="file:///C:/Users/User/photos/picture.jpg">
I don't know if you could add in variables in php like $path and $filetype set in a form using
echo("embed src='$path/$filename') I didn't add the html code blocks becuase It would't show up. Also, in php make sure html code blocks have ' instead of " because it will read as the end of code.
(I don't know much about php - if I made a mistake, sorry.)
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 want to do two things in my browser:
Load a text file into a textarea (has to be choosen via dialog box)
Save the content of a textarea into a text file (has to be choosen via dialog box again)
Load a video file and grab the file path to use it with a video player (1)
I've been looking around for a while on the internet. There are some solutions for IE only via ActiveXObjects, which I can't use (IE, seriously?). HTML5 file API has limited usability because I can't access the selected file's path.
I also found save dialogs for textareas, but they ignored line breaks for some strange reason and I don't know how to fix that, if possible at all.
So here are my requirements and options:
Support for FF and Chrome
JavaScript, HTML5 (and PHP, if it has to be)
possibly Silverlight, but I'm not very familiar with it and may only copy and paste :-/
it has to work on Mac as well
There is a dirty hack that gets the job done without resorting to Flash or Silverlight, or using a server, and it works in most browsers:
var uriContent = "data:application/octet-stream," + encodeURIComponent(fileContentsAsString);
window.open(uriContent, 'Save Your File');
JS runs in a sandbox. That means: no access to files on the filesystem. HTML5 file API is the first „native” (as in not flash nor activex) attempt to grant limited access to the users file system.
The File API is HTML that would allow you to access data, after which you can manipulate binary blobs in JavaScript, but as written this is not possible in pure JS and HTML based on your requirements.
The big blocker is "saving to a text file." The only way I've been able to do this is by opening up an iFrame that calls a server side language (such as PHP) to set the content type in the header to a type that prompts a download.
Flash and Silverlight are "client" technologies that run outside of the sandbox, which sounds like your only option at this point.
My ideas:
Load a text file: Use a normal HTML upload form (if you want to script, maybe submit it via AJAX)
Save a text file: Use a textarea and upon submitting, create the file server-side and then offer it to download. (As mentioned before, client-side scripts do not have access to the computer's file system)
Load a video file: Is the video on the server already? Otherwise will need an upload just like the text file. Then use a flash plugin to play the file from the server (the URI should be known to you then)
All of these are relatively simple to achieve using PHP. Line breaks from a textarea stay as \n in PHP.
Tutorials: Form handling in PHP, File upload in PHP
Edit: Since PHP runs server-side you should not run into a lot of problems because of browser diversity. Alternatively, you can do all of these in Flash or Silverlight as well, although from my point of view that takes more learning and is less comfortable for the user.
I have a web page which asks users to select a zip file on their machine and upload it. It also asks for a destination on the server where the zip file should go. I want it to work in such a way that when they tell me where the file is on their machine and where it belongs on my server, then click "send," it should be sent to my server, placed in the designated directory, and unzipped.
I want to do this in just HTML and JavaScript. Is that possible? If so, how would I go about doing it?
You have to do this serverside; the client's browser cannot write to the file system of the server directly as it's a huge security risk.
In addition to that, not even HTML5 with it's File API can extract ZIP files. You need to do it on the server with PHP, or whatever language you're using.
If you just want to do things locally on the client, you could consider a Flash/Java/Browser extension, but I wouldn't recommend it for compatibility and performance reasons. Your best bet is to send a request to the server for it to process and send back. You're already serving the HTML page, so you can use the same server to process the ZIP file.
If, on the other hand, you want to write the ZIP file to the server, you have to do it server side for reasons stated in my first paragraph.
You can unzip/zip content within JavaScript using rawdeflate.
As other posters suggest, you cannot save directly to the local filesystem using a plain browser. You either need to echo the result back off the server (in which case it may as well unzip), or you can use Flash, for example, Downloadify, if it is installed.
Most modern browsers support FileAPI for loading from the local filesystem, certainly, Chrome, Firefox and Opera do. I haven't tested IE 9.