How to update DOM with HTML returned from server a

Question

I'm trying to use Blueimp JQuery File Upload to upload an image to my server. The server then returns a HTML <img> tag which I want to append to my DOM to show the user what image was uploaded. They can then do further things like crop it using JCrop or whatever.

I am able to upload the image to the server just fine. And the server returns this "<img src="/path/to/temporary/image.jpg" />"

I want to append this HTML code to a div but I'm not able to get this part working.

HTML:

<!-- file input -->
<input id="ProfileImage" type="file" name="ProfileImage" />
<!-- upload progress bar --->
<div id="progress" class="progress">
     <div class="progress-bar progress-bar-success"></div>
</div>
<!-- div to which I want to append the server's html response -->
<div id="files" class="files"></div>

JQuery File Upload:

        $('#ProfileImage').fileupload({
            url: '/path/to/server',
            autoUpload: true,
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
            maxFileSize: 5000000, // 5 MB
            done: function (e, data) {
                $('#files').append(data); // This is obviously not working!
            },
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress .progress-bar').css(
                    'width',
                    progress + '%'
                );
            }
        });

I just want to end up with my page HTML looking like this at the end of the upload:

<...>
<!-- image HTML inserted into the div -->
<div id="files" class="files"><img src="path/to/image" /></div>

If I use alert(data) to see what comes back I just get a dialog showing [object Object]. But if I look in the console in Firebug and click on the Response tab in the Post event that submitted the image, it shows <img src="userfiles/newimage.jpg" /> as the output from the server.

Answer 1

The correct way to do this should be:

$('#files').append(data.result);