Question

I want to get an icon’s image when a user drags and drops it over some kind of div, but that it’ll show exactly what the user sees (e.g. thumbnail, *.ico), is it possible to do so, or does anyone know of any projects that do similar things?

Answer 1

I would suggest a mix of:

This great drag and drop upload library:
http://valums.com/ajax-upload/

This javascript code to preview uploaded images before they upload
How to upload preview image before upload through JavaScript

You would have to add a listener in Valum’s uploader to get the file that is being uploaded and then display it using the code in the second link.

Getting the local image path via javascript is not an easy task… and being able to do that while supporting most browsers will be even worst…

An easier way to solve your problem would be to upload the image in a temporary location on your server, return that temporary path and display the image that was just uploaded. Then you add a second “Keep” and a “Discard” button that saves the uploaded image to a real path if the user likes what he uploaded and you delete the temporary image. Since your images are .ico, I assume they are not really big files, so they would upload pretty fast and the user would get a “preview” fast too using that technique.

You should ask yourself if all the time invested on tweaking your code to show the user a preview before the upload really improves the user’s experience using your tool !