How to fix Ajax Image Upload - response back is the HTML not image

Question

I'm breaking down my problem of trying to upload an image via Ajax to Python.

Step 1: Just get the Ajax to display the selected image on the page.

I found this interesting article on Zurb which seems to have the example code I need: http://zurb.com/playground/ajax-upload

$(document).ready(function() {

var thumb = $('img#thumb');        

new AjaxUpload('imageUpload', {
    action: $('form#newHotnessForm').attr('action'),
    name: 'image',
    onSubmit: function(file, extension) {
        $('div.preview').addClass('loading');
    },
    onComplete: function(file, response) {
        thumb.load(function(){
            $('div.preview').removeClass('loading');
            thumb.unbind();
        });
        thumb.attr('src', response);
    }
});

I'm implemented the plugin and setup things up, however the response that gets set to the src is the HTML page itself, rather then the image.

enter image description here

I'm noticing a similar problem on Zurb's website when I check what the src path of the thumb image is after uploading.

enter image description here

Also duplicated in my jsfiddle here: http://jsfiddle.net/leongaban/cd5Hy/1/

Can you see where am I going wrong?

score 0 · Answer 1 · answered Mar 04 '14 at 22:28

You probably are not taking the right action for your upload.

Try to create PHP file that will handle your image on server side, then return that image data already on the server:

<?php 
    $file = $_FILES['image']; // 'image' as you've set it in js code
    $path = 'http://example.com/images/'; //path on the server where you gonna store your images. Remember to set proper directory permissions.
    $location = $path. $_FILES["file"]["name"]; //this is where the file will go
    move_uploaded_file($_FILES["file"]["tmp_name"], $location); // move the file there
    echo $location; //send the file location back to the javascript
?>

Now, if you want to show a preview before loading your image to server - try HTML5 file upload handler

Ah problem is we us Python not PHP :( all the upload tutorials are all with PHP that I've found. Thanks for that great HTML5 link though! Will check it out — Leon Gaban, Mar 04 '14 at 23:04

score 0 · Accepted Answer · edited May 23 '17 at 11:57

Found the answer here: Ajax Upload image

$(document).ready(function (e) {
    $('#imageUploadForm').on('submit',(function(e) {
        e.preventDefault();
        var formData = new FormData(this);

        $.ajax({
            type:'POST',
            url: $(this).attr('action'),
            data:formData,
            cache:false,
            contentType: false,
            processData: false,
            success:function(data){
                console.log("success");
                console.log(data);
            },
            error: function(data){
                console.log("error");
                console.log(data);
            }
        });
    }));
 });

By enter image description here Sohil Desai

This also is a helpful stack if you are also working on image uploading: http://stackoverflow.com/questions/2368487/jquery-form-type-file-how-to-tell-when-a-file-has-been-selected — Leon Gaban, Mar 05 '14 at 19:53

How to fix Ajax Image Upload - response back is the HTML not image

2 Answers2