I'm trying to create a visualforce page where someone can drag and drop attachments to upload them and they can see a preview of attachments that they have already uploaded.
There are a ton of jquery plugins that do this (one of the better ones) but I was wondering if anyone has already done this in visualforce or has a recommendation for which plugin/library to use?
In my experience, It's pretty difficult, as you need to be able to base64encode the file before it's sent to the server (this can accomplish in some browsers Firefox, Chrome, Safari? Probably not IE.)
Also, to get VisualForce to properly encode the 'form-data' that is being submitted to the server you need to create a VF form that points directly to a 'File Input' field, which is hard to link to a drag and drop functionality. So I recommend doing something like:
<iframe src="myvfpage_with_file_input_form" style="display:none; />
And have your parent page fill in and submit the form on the hidden vf page in the form when the drag and drop takes place.
I like Uploadify for drag & drop, it uses Flash/Javascript (free version) and/or HTML5/Javascript (in the paid version).
There is a product on the AppExchange that does this already.Drag and Drop Attachments
@Kenji776 built a really slick javascript drag-and-drop file upload interface for a cloudspokes challenge, but got stuck by the fact that apex:inputFile doesn't support multiple files. If you want to take a look, here's the submission video and here's the idea on ideaexchange to vote for if you'd like to throw your support behind the request to add support for multiple files.
TehNrd had a post on multi file uploads: http://www.tehnrd.com/multi-file-uploader-for-salesforce-oh-ya-and-progress-bars-too/
It doesn't include drag and drop. I would imagine you might be able to take parts of his code and add the drag/drop functionality on top of it.
