1

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.

volume one
  • 6,800
  • 13
  • 67
  • 146
  • 1
    Is the correct HTML being returned? (use an alert to show this) – CompanyDroneFromSector7G Jan 26 '15 at 14:00
  • 1
    What do you get in the console when you add `console.log(data)` to your `done` handler? – Rory McCrossan Jan 26 '15 at 14:01
  • http://stackoverflow.com/questions/14674999/jquery-fileupload-doesnt-trigger-done possible duplicate of this question. – João Miguel Brandão Jan 26 '15 at 14:03
  • 1
    @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 `` as the output from the server. – volume one Jan 26 '15 at 14:04
  • 1
    @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 Jan 26 '15 at 14:05
  • 1
    @volumeone just check the DOC, sounds like it should be `data.result` – A. Wolff Jan 26 '15 at 14:05
  • If you view the HTML on the page, does it show the html appended correctly or is it missing? – CompanyDroneFromSector7G Jan 26 '15 at 14:05
  • @A.Wolff aha! it was indeed that. How am I supposed to know this / find this out myself in future? Where should I be looking to know what is contained in `data` ? – volume one Jan 26 '15 at 14:08
  • 1
    @volumeone https://github.com/blueimp/jQuery-File-Upload/wiki/Options#user-content-done – A. Wolff Jan 26 '15 at 14:11
  • 1
    @volumeone As a general advice (see Rory's comment), use `console.log()` (or console.dir()) and check all properties of object. This is usually the fastest way to check an object. – A. Wolff Jan 26 '15 at 14:19

1 Answers1

2

The correct way to do this should be:

$('#files').append(data.result);
João Miguel Brandão
  • 414
  • 5
  • 11