Error uploading image via Ajax

Asked May 24 '16 at 20:07

Active May 24 '16 at 20:21

Viewed 37 times

I'm trying to upload an image via ajax. Javascript is returning "success", but my browser says there is a problem with upload. What am I doing wrong ?

<form action="" id="form-new-badge" method="POST" enctype="multipart/form-data">
     <input id="new-file-path-static-image" required="required" class="file-path validate" type="file">
</form>

$("#new-file-path-static-image").on("change", function(){
        alert("time to upload");
        var formData = new FormData($(this)[0]);
        alert(formData);
        $.ajax({
            url: apiUrl + "image/upload",
            type: 'POST',
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            xhrFields: {
                withCredentials: true
            },
            success: function(data) {
                alert("success " + data)
            }
        });
    });

code : 310 description : "There is a problem with the upload."

edited May 24 '16 at 20:21

asked May 24 '16 at 20:07

vbotio

1,566
3
26
53

Does the file show up in your backend? – WillardSolutions May 24 '16 at 20:10
First look : Is apiUrl defined ? – Louys Patrice Bessette May 24 '16 at 20:10
@EatPeanutButter no. – vbotio May 24 '16 at 20:13
@LouysPatriceBessette Yes, the request is sent successfully. – vbotio May 24 '16 at 20:13
This could be a permissions issue on the back end where you are going to place the file that was uploaded. – pparas May 24 '16 at 20:24
PROTIP: You can just use `this` instead of doing `$(this)[0]`. – gen_Eric May 24 '16 at 20:26
You trigger the call to you ajax onchange of a text field ? I don't get it. I think it should be triggered on a "Send" button. And then you retreive the file input data to send it to a PHP script that can handle it. Have a look at this : http://stackoverflow.com/questions/23980733/jquery-ajax-file-upload-php – Louys Patrice Bessette May 24 '16 at 20:27
@RocketHazmat already tried it – vbotio May 24 '16 at 20:27
@LouysPatriceBessette it is a input file. I edited it, sorry. – vbotio May 24 '16 at 20:28
1

Where are you seeing that error message? Also why are you using `async: false`? Adding that no longer makes this AJAX *asynchronous* and will lock up the browser. P.S. I suggest `console.log` instead of `alert()`. – gen_Eric May 24 '16 at 20:28
@vbotio: That "PROTIP" above wasn't a suggestion on how to fix the issue, it was just something I wanted to point out. – gen_Eric May 24 '16 at 20:30

Error uploading image via Ajax

0 Answers0