In an html page I have input type='text' and a button
filename: [ ]
[PUSH]
The user goes and fills the filename with "C:\test.txt"
When the button is pushed, (onclick), I want to write some javascript to upload the file
(e.g.: c:\test.txt) and submit to the server.
Obviously the input type file would be hidden and programmatically edited.
is this doable or are there any limitations ?
The idea is that the user does not have to go and use the input type file and always go to the open dialog
You cannot manipulate the filename before upload. You must do this on the server. This is a security measure to prevent the browser from being able to upload arbitrary files.
Your run of the mill javascript does not have access to the client's file system, and this is a good thing. Use the type="file" input that interfaces with the user's OS instead.
As far as I understand your question you want to enable to select filename from local disk and upload it without user selecting it first?
Then the answer is no. You cannot do that for security reasons, JS have no access to your local disks.
Also, you can't upload files via JavaScript, you need to have some server-side code to do that as well.
For security reason you can not do this with JavaScript. But there exists a number of other upload tools (ex Java Applets, ActiveX or Flash) web components that could "theoretically" do this.
I suggest that your search around for "File transfer java applet".
There is a Blog article that explains and compares some of those web upload components. Take a look at http://www.filecatalyst.com/comparison-of-web-based-file-transfer-methodologies
Related
I have a web application that receives a simple text file, but I need this file to be downloaded to a specific path. Meaning, when the application receives a text file, it will always be downloaded to a specific folder (for example, to C:\MyFolder). If it isn't possible, then I need to copy the file from where user has chosen to my folder.
This application is based on JavaScript.
JavaScript cannot exert any control over my (the visitor's) local filesystem. I remain in complete control of where my downloaded files go, what they are named, and indeed whether I even want to download them in the first place.
Sorry, but the best you can do is inform your users where to put the file you're offering for download. You cannot use JavaScript to choose the destination yourself.
You should be able to do this using a Java applet assuming that you have signed it. The user would be asked to allow your code to run and if allowed, you could do whatever you want: Including downloading a file to a specific location.
How can I allow a user to just type or paste in the file that they want?
By clicking Choose File above I must use the file selector that pops up. How can I make it so I can just type in test.png?
Short answer is you can't.
This is a security measure. You are not allowed to browse the client's local file directory and find a file - they have to provide it for you. This even includes the user pasting the entire file path. You won't be able to make any meaning of it in JS - the file has to come through the native file browser or a drag-and-drop operation.
Is it possible to manipulate a file only with client side programming? I am creating a text editor, which takes an uploaded file and need to save to another location after editing. Is it possible with client side coding?
Yes, everything you described is possible. Things you need are: the FileReader API for reading the files and download attribute of a for saving the with specific name. The solution won't be cross-browser but it'll work in the modern browsers.
Edit 1: You can't to the manipulation like in language which have full access to the file system (i.e. you can't open files by their path for example). The user needs to drag the text file in the page which is your editor or select the file with <input type="file" />.
Edit 2: The same is for saving the file. You can give the user a link with specified file name in the download attribute. When the user press this link the file will be saved in his download folder.
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 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.