Ajax file upload outside of form without plugins

Question

I've been searching for a solution to upload files using Ajax when the input field is not inside a form tag. I have already tried this solution.

This is my HTML

<span id="user-image-up-btn">Last opp bilde</span>
<input id="user_image_upload" type="file" />

This is my code, and I get the return TypeError: undefined is not an object (evaluating '$("#user_image_upload").files') or when I use alternative number 2, I get Object, object.

This is my jQuery

// IMAGE UPLOAD
$("#user_image_upload").change(function() {
    var fileform = new FormData();
    fileform.append('pictureFile', $("#user_image_upload").files[0]);
    $.ajax({
        url: '/userimageupload',
        type: 'POST',
        processData: false,
        contentType: false,
        dataType : 'json',
        data: fileform,
        beforeSend: function(){ 
            $("#user-image-up-btn").html('Laster opp...');
            console.log(fileform);
        },
        success: function(data){
            $("#user-image-up-btn").html('Last opp bilde');
            console.log(fileform);
        },
        error: function(exception){
            alert('error:'+exception);
            console.log(fileform);
        }
    });
});

EDIT: By using the answer from Adeneo I managed to upload the files. However, I still get error:[object Object], which causes the rest of the form to fail. How come?

Can you create a snippet or bin for this? – Mosh Feu Feb 07 '16 at 15:40 — Mosh Feu, Feb 07 '16 at 15:40

score 1 · Accepted Answer · answered Feb 07 '16 at 15:41

1

A jQuery object has no files property, that would be the underlying DOM node

$("#user_image_upload").on('change', function() {
    var fileform = new FormData();
    fileform.append('pictureFile', this.files[0]);

    $.ajax({
        url: '/userimageupload',
        type: 'POST',
        processData: false,
        contentType: false,
        dataType : 'json',
        data: fileform,
        beforeSend: function(){ 
            $("#user-image-up-btn").html('Laster opp...');
        },
        success: function(data){
            $("#user-image-up-btn").html('Last opp bilde');
        },
        error: function(exception){
            alert('error:'+exception);
        }
    });
});

answered Feb 07 '16 at 15:41

adeneo

312,895
29
395
388

This worked, does `this` use the ID element in the function? :) – Gjert Feb 07 '16 at 15:48
Yes, `this` inside an event handler is always the element that was targeted, without the jQuery wrapping. – adeneo Feb 07 '16 at 15:56
The upload works but for some reason I get the following: `error:[object Object]` – Gjert Feb 07 '16 at 16:13
If you stop using alerts to debug, and do `console.log('error', exception);` you can see what actually went wrong in the console, I suspect a parse error, i.e. that you didn't return valid JSON from the server, which is what you're expecting as you've added a `dataType : 'json'` setting – adeneo Feb 07 '16 at 16:19
If I wish to return a HTML code, what should I set the dataType as? – Gjert Feb 07 '16 at 16:22
You'd set it to `html`, or just not set it at all – adeneo Feb 07 '16 at 18:12

Ajax file upload outside of form without plugins

1 Answers1