If this can only be done in some browsers, I'd still like to know how...
Basically, I want to have a drag-and-drop feature where users can drag files to a drop zone and then hit "upload" and have the files uploaded to the server.
I was pondering the possibility of having the option to drag an entire folder to the drop zone and uploading all of the folder contents (preferably skipping any hidden or system folders). I can imagine how this would be done via javascript by simply traversing the folder for files (and sub-folders) and adding those locations to the upload list, but I'm pretty sure that would violate some basic policies (for good reason). But I'm not totally sure, since I know that Firefox 3.6 offers something along these lines.
I am thinking it might be possible if most browser policies make an exception for user-initiated events, but I might be dreaming.
Anybody know for sure?
Browsers (before the file API) did not allow dropping things inside them from outside.
They would get intercepted by the browser and considered as drops to the browser engine..
Perhaps it can/could be done with flash or other embedded technologies.. but not directly through browser and javascript..
http://www.uploadify.com/
This will let you do multiple file upload, but not directory upload. If you use a trusted applet, you can get the functionality you desire. It will require more than pure javascript, though.
Related
I'd like to have a way for a webpage -which is generated dynamically by my server- to read all the files in a specific user folder, manipulate them using javascript, within the web browser, and using them to show to the user some results (specific correlations between the data, dependent on the context and sometimes some graphs, drawn using these correlations).
Communication with the server about these data is neither required nor desired. Actually, since all the manipulations needed can be done via javascript and the files can be huge, for now I absolutely don't want that their content is uploaded to the server. Therefore there are no security risks (at least none that I can see).
Server side, I'm only interested to save the name of the folder, so that the user (who is registered) doesn't need to select the files one by one or to select them again every time a new page is dynamically created.
For now, the only hopes to find a solution that I have been able to gather are about using the Chrome FileSystem API (but I'd prefer a general solution, not dependent on a specific browser) or creating an extension that the user should install to use this feature when visiting the website (which, for me, is maybe even worse than relying on a specific browser).
So I wonder if there is a way to implement this feature using only pure javascript and HTML5 and using neither extensions nor browser dependent solutions.
Due to security reasons, JavaScript running in the browser should not be used to access the filesystem directly. But definitely you can access it using Node's fs module (but that's on the server side).
Another way is, if you let the user pick files using the <input type="file"> tag then you can use the File API to fetch the contents. But I think that is not what you are looking for.
Recommended reading: https://en.wikipedia.org/wiki/JavaScript#Security
I need to detect the size of the file before upload.
I need it to work in IE8, thus not HTML5
It needs to be entirely client side.
I need to be able to specify file size limit.
I am aware that ActiveX can be used, but I cannot use that due to it requiring the user to 'permit' it.
I have tested BlueImps plugin, but it doesn't seem to work and the documentation does not seem to state browser support.
Can anyone suggest a plugin/method with fits with my criteria.
If you're willing to introduce a dependency on Flash, then you could use that to get the file size (and handle the upload too).
Flash supports file-selection via the FileReference class, which gives you access to some metadata including the file size.
With some help from the ExternalInterface class, you could call a JavaScript function and give it this information.
You could then upload the file from Flash instead of with the usual input element, if the file size is appropriate.
Check out YUI's uploader for a really easy-to-use and well-documented free component that handles all this for you (you only need to write a little JavaScript, and you can style the pre-built Flash component however you want).
I have ran into a problem: I need to allow a website visitor to drag and drop files AND folders, and handle the upload. Since it is supposed to be a image upload, I need to differentiate between those two before doing any actual uploading.
Question: How to know if dropped item is a file, or a folder? Using webkitGetAsEntity is almost ideal, but obviously, it does not work on neither IE or Firefox (need support for both of them).
Libraries used: I can use AngularJs, jQuery and simple javascript. Using other libraries is not possible.
Can anyone give me any suggestions here?
Objective
I am creating a web application and have been looking for an async file upload solution other than iframe and form support.
Browser Support
I am fully willing to exclude everything but IE9+. IE tends to be the browser I have the most trouble with.
Goal
I have a table and I want to be able to click on a link, show a file dialog and then upload the file immediately after selection. No page refresh.
More specifically I am trying to figure out how Trello does their file uploads. After looking through the javascript, I found that they bind the the file input to an on change listener, but after that I can't see what they are doing. Im under the impression that they use websockets with node.js to transfer data, but after doing a little research, most people say that websockets wouldn't be good for that. Trello blocks all versions of IE except 9 and 10 so I looked into HTML5 File upload think that may be a solution. However, after some research IE9 does not support the HTML5 File API.
Question
So finally I am looking for some way to upload files without the iframe and form solution. Can someone list the possible methods I could use?
Sidenote
I am using Rails for backend and Ember.js for front end.
If the browser does not support the File API and XMLHttpRequest level 2, there is no other way to upload files in an async/"ajaxy" manner other than reverting to the hidden iframe method. You could, of course, use Flash or Java, but neither of those (especially Java) seem like a good solution to me.
Regardless of the browser, you will have to include a file input element on the page if you want to provide a file chooser for the user. The onchange listener you speak of is vital to determining when the user has actually selected a file or files. In browsers that support the File API, you can also allow users to drop files they wish to upload onto your page. This behavior alone does not require a file input element.
IE9 and older do not support the File API.
I'm quite familiar with this territory as I maintain a fairly popular javascript-only upload library: Fine Uploader.
This is new to me since I did something similar a few years back:
<input type="file" onchange="fileSelected(this.value)" />
This will provide a fakepath reference, IE, if I select test.jpg on my desktop it returns:
c:/fakepath/test.jpg
My problem is, I'm developing an online application that lets clients design a page, that is, they select images, drag them onto the page etc.
My design ideally would be they select local files (that could be big in filesize) so there is no uploading involved immediately, I keep an array of the paths of the files and then at the end of the design process it saves the media and the positions of elements to the server.
However, fakepath is preventing me from doing this!
Do I have to upload the files each time? This would significantly slow down the design process.
However, fakepath is preventing me from doing this!
This is a security feature (see related SO questions). Even if there were a real path, you would not be able to add the file path to the upload control programmatically later. AFAIK it's not even possible with Flash uploaders any more.
You will either have to use/build a Java Applet or ActiveX control (yuck!), or in fact actually upload each file.