How to update DOM with HTML returned from server after JQuery File Upload is done?

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.

Is the correct HTML being returned? (use an alert to show this) — CompanyDroneFromSector7G
– CompanyDroneFromSector7G, Commented Jan 26, 2015 at 14:00
What do you get in the console when you add console.log(data) to your done handler? — Rory McCrossan
– Rory McCrossan, Commented Jan 26, 2015 at 14:01
@rorymcrossan 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 it shows <img src="userfiles/newimage.jpg" /> as the output from the server. — volume one
– volume one, Commented Jan 26, 2015 at 14:04
@volumeone yeah, don't ever use alert for debugging - it's useless. Can you do console.log(data) and see what that is. You're returning an object of some type which is why the append isn't working - that expects a string DOMElement or jQuery object. — Rory McCrossan
– Rory McCrossan, Commented Jan 26, 2015 at 14:05
@volumeone just check the DOC, sounds like it should be data.result — A. Wolff
– A. Wolff, Commented Jan 26, 2015 at 14:05

João Miguel Brandão · Accepted Answer · 2015-01-26 14:06:41Z

2

The correct way to do this should be:

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

answered Jan 26, 2015 at 14:06

João Miguel Brandão

4245 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

CompanyDroneFromSector7G Over a year ago

Yup, as @A. Wolf said

João Miguel Brandão Over a year ago

I thought I should delete it because it started in the wrong direction. I'm sorry if this isn't the right way to do it, should I delete this one instead and edit that one then?

João Miguel Brandão Over a year ago

He said it in the comments and I didn't see it. I'll delete my answer if he posts is. This question is still quite a duplicate of a few other I found.

A. Wolff Over a year ago

@JoãoMiguelBrandão No keep your answer, you obviously just checked the DOC too ;)

volume one Over a year ago

What is the DOC? How should one know where to look for the correct data?

|

Collectives™ on Stack Overflow

How to update DOM with HTML returned from server after JQuery File Upload is done?

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related