Question

How do I turn the div with id “uploadWrapper” from this jsFiddle into a button that can upload images – basically doing the same as <input type="file">. Thanks in advance.

EDIT – DUE TO ANSWERS RECEIVED

How can I show a preview of the image in the place of the div with the blue background when someone uploads an image, see this jsFiddle

Answer 1

This is not as easy to do as one would imagine, and some browsers prevent triggering file uploads from untrusted elements automatically for security purposes.

I recommend using a third party file upload plugin, such as Plupload, or faking a custom button using progressive enhancement (invisible file upload button, with a custom graphic under it (of course not the most flexible of solutions) as described here:

http://filamentgroup.com/lab/jquery_custom_file_input_book_designing_with_progressive_enhancement/

---

Plupload events allows you to hook into the events that might occur during ajax file upload, and do stuff with the upload info. See this page on examples of what response data you might get:

http://www.plupload.com/example_events.php

You can get response data like this:

id=p16in5el9ne2fc1rd08120in081
name=denim.png
size=20623
loaded=20623
percent=100
status=DONE
target_name=p16in5el9ne2fc1rd08120in081.png

And of course you can modify what the server returns on a successful upload, to be able to get the full absolute URL to the uploaded image.

After you have this data, you can hook into it and switch the image doing something like this (with jQuery):

// Called when a file has finished uploading
FileUploaded: function(up, file, info) {
    $('#id_of_the_image').attr('src', 'uploads/' + file.target_name);
}