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?
Related
I'm not pretty sure if I can accomplish what I need with pure jquery but maybe you guys can help me out.
I need to give the user the opportunity to browse his local computer to choose a location where some files will be saved( the download and saving functionality is handled via a jsp page) but the process of choosing the destination should be done in jquery.
Is this possible ?
I've found some plugins, but they all seem to be server side only.
Its not possible. Javascript in a browser does not have access to file system api's. The absolute best you can do to interact with the file system is accept a 'drop' event from drag and drop, or use <input type="file" />.
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.
I'm using the simplehttpwithupload.py script, which I have linked to below, to host a simple http server where people can upload files to me. Is there a way to modify the source code so that multiple files can be selected for upload at once? Such that when the select file dialog box comes up, users can ctrl/shift click and select several files which will then be uploaded.
https://www.dropbox.com/s/wshzyseignnz78x/simplehttpwithupload.py
Thanks
Is there a way to modify the source code so that multiple files can be selected for upload at once? Such that when the select file dialog box comes up, users can ctrl/shift click and select several files
I'm pretty sure there's not a simple way. Things may have improved, but when I looked into this a year or two ago, the only solution for exactly what you're looking for is Flash based. The problem is that the file selection dialog is on the client side and multiple file selection is not directly supported in the browser.
There is a JavaScript based solution for downloading multiple files, but it doesn't exactly match what you asked for. See Upload multiple files with a single file element for the explanation, and Multiple file uploader: Mootools version for a later, prettier version.
The main idea is:
you can only store file upload information in a file upload element (), you’ll always need to have one element per file to be uploaded.
it’s actually a relatively simple matter to conceal a file element once a file has been chosen, and add a new (empty) one in its place.
To apply the JavaScript solution to simplehttpwithupload.py, you'll have to rewrite the list_directory function.
I need some similar to Telerik control because this control have problem in opera.
Thanks in advance.
Have you looked at Uploadify?
Uploadify is a jQuery plugin that integrates a fully-customizable multiple file upload utility on your website
Uploadify is a great multiple file uploader. It was built off of the popular SWFUpload and they added new features to it.
Some of the features that I have found most helpful are:
The user can upload all the files at once using ctrl + clicking on all of
the files
As the files are being downloaded a queue is displayed which
shows the files being downloaded including a completeion bar.
As files are completed they are removed from the queue
It also allows you to specify which file types the user is
able to download (they can only see the ones you choose)
The main downfall is that it is a flash uploader if that is a problem for you.
I personally use Plupload http://www.plupload.com/ as it has some great options.
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.