I've been banging my head for a few days over this problem so I figured I'd look for some help here.
BACKGROUND
We've built a form where users can, amongst other things, upload files. We have implemented desktop drag and drop for HTML5 users. We're also using uploadify for traditional upload. The ONLY reason we're using uploadify is to allow users of older browsers to multi-select files. If it wasn't for the multi-select feature in older browsers, we would not be using any library for uploading and just use the new "multiple" attribute of the file input.
PROBLEM
I consider uploadify and desktop drag & drop 2 methods for basically doing the same thing which is allowing the user to give you an array files which they wish to upload. Once this is done, I think both methods should call the same function, passing in the array of files intended for upload. However, it seems that the file collection from uploadify is anatomically different than the file collection from drag and drop (e.originalEvent.dataTransfer.files).
So at this point, it looks like I have 2 options:
1) Find a way to manually add the files collected from desktop drag and drop to the uploadify que and then call the upload method.
2) Find a way to collect the selected (queued) files from uploadify and pass them to a separate ajax method (the same on the drag and drop files are passed to). I almost got this working but, as I mentioned, the file objects are different.
Has anyone had to deal with this before? Are there more elegant solutions that I'm missing here? Any help would be appreciated. I can add code samples if anyone needs it.
Related
I'm trying to upload an empty folder using third party libraries like jquery.fileupload.js, jquery.min.js.
In onDrop function::
this._getDroppedFiles(dataTransfer).always(function (files)
in dataTransfer i'm getting all the values like filetypes, files, etc but when it goes to always method my other files coming but empty folder are not there.
I have searched a lot, Didn't find any solution.
If there's a way please let me know
Regards
Browsers are historically poor upload managers especially when it comes to folders. There probably isn't a great solution you'll find for uploading empty folders. Behavior might also vary depending on the browser you are using.
But as far as getting empty folders via drag/drop - there shouldn't be any problem there. What happens when you try a different browser?
I want to implement multiple files selection for File Upload in RichFace, and I found a demo here.
But if I can implement multiple files selection like we can do that on Windows normally, it will be a good experience for users.
If this is not support in RichFace, how can I implment a custom tag for this using javascript?
Could you comment out your idea and suggestions?
It seems like this issue was fixed in RichFaces v4.5.0.Alpha1: https://issues.jboss.org/browse/RF-12224
But currently available version of RichFaces is 4.3.4.Final, so this feature is not yet available.
I have a script already for uploading pictures, but I want the ability to select more pictures at once on upload,by holding down ctrl,I know I can use uploadify but I don't want to start over, mabe you guys know a script or something for jquery, that will work without to remove the current code, or you guys could give me a snippet.
The ability to slect multiple files in entirely the browsers features. Which cannot be changed by using a Javascript or css or html. Using uploadify or similar as you mentioned in your question is the right way to go.
You know uploadify also uses the swfobject.js, to overcome this limitation by using an actionscript instead.
You could write your own upload system in javascript with ajax. See http://www.html5rocks.com/en/tutorials/file/dndfiles/
Basic workflow
get local file contents
push to server via ajax
With this you could do a multi-file select and/or drag and drop upload system. Best and maybe only solution if you want to stay in javascript.
I was trying to do something like this: http://www.element-it.com/Examples/MultiPowUpload/AdvancedHTMLinterface.html
But in my search for information I found that is not possible to perform multiple file selection with simple HTML and JavaScript (and JSP in the server side). There is a way to do this without using Flash? A third party component you could recommend?
Thanks.
Actually according to the specification, normal HTML file upload fields are supposed to be multiple-file-upload fields. Opera supported it for a bit, allowing you to ctrl-click to select multiple files from a file picker. But it almost always broke the webapp since many web frameworks didn't know about it and would fall over.
In the meantime, it usually suffices to use JavaScript to add an extra file upload field to the form when the previous one has been filled in. This can be made gracefully-degrading for non-JS UAs, whilst sprucing up the management of multiple files with script and pretty icons.
If you go with a Flash uploader, it's a good idea to back it up with a simple HTML file upload field for compatibility there too.
It is still works via flash, but the YUI Uploader component allows you to add multiple file selection with minimal knowledge of flash - the API to interact with it is purely javascript.
HTML 5 will support multiple file upload, but that is not currently well supported in a large number of browsers
I need an easy way to allow users to upload multiple files at once (ie I need to allow a user to upload a folder). I do not wish to put the burden of zipping on the user.
I would prefer to avoid Flash or variants if possible. I'm looking for a straight javascript / HTML solution if it is possible. Please note, this rules out the answers at: What is the best client side browser library to upload multiple files over http?.
You won't be able to do it with just HTML and Javascript. I'd recommend trying Fancy Upload, a MooTools plugin for multiple file uploads. It uses a mixture of JavaScript and Flash, but degrades gracefully. It works with all major browsers including IE6 and there is also a Flash 10 compatible release available for download (though the demo hasn't been updated yet).
Update (2012-11-26):
Multiple file uploads are possible with valums or blueimp file uploaders.
For recursive directory uploads, your best solution is using Chrome 11's new folder upload API. It also seems to work on Firefox if you use a vendor prefix.
With Firefox 42 and Edge having implemented the new directory upload proposal we'll finally able to do cross-browser directory uploads. The APIs are nasty enough that you may want to check out my wrapper, uppie.
If you're avoiding Flash (and presumably Java?) the JS/HTML-only solution still requires single-file inputs, but essentially you attach an onchange event to your input, adding a new input to the DOM whenever a file is selected.
Multiple file uploads are possible with valums or blueimp file uploaders.
For recursive directory uploads, your options are more limited:
Your best solution is using Chrome 11's new folder upload API. It also seems to work on Firefox if you use a vendor prefix.
This is also possible cross-browser with a Java applet. However the % of folks with a JRE installed has gotten pretty low these days (< 70%)
This isn't a pure js/html solution. As EndangeredMassa has pointed out, it's not possible. In fact, this idea is an IE/Windows only solution. I don't recommend it, but it can work.
So, all disclaimers aside ...
Many years and several employers ago, we used to do some client side stuff that instantiated the FileSystemObject. It would iterate through each of the files and pass them through to the server one at a time. Can't remember the details of how we did that :o(
Anyway, this usually meant that the client box would need to have to add the site to the list of trusted sites and give trusted sites a bunch of permissions that are turned off (for very good reasons). Stuff like the ability to Initialize and script ActiveX controls not marked as safe. That kind of thing.
I know that this isn't a perfect answer, but it could point you in the right direction.
FTP? And if necs, wrap in Java Applet, ActiveX or whatever you want.
If not, although you don't want flash, SWFUpload is quite cool, you may want to reconsider it as a decent option.
Here is pure JS solution using ExtJS library