9

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?

6

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).

  • Does Uploadify work well with Visualforce? – LucidLunatic Dec 12 '14 at 19:02
4

There is a product on the AppExchange that does this already.Drag and Drop Attachments

1

@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.

0

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.

  • I actually saw that but since I need both preview and drag & drop it seems like it would be easier to port an existing jquery library that does this. – Greg Grinberg Aug 13 '12 at 16:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.