js upload file - No files were uploaded

Question

I am uploading an image file on server-side and my script give an error

error: "No files were uploaded."

<form enctype="multipart/form-data" method="post">
  <input name="file" type="file"/>
  <input class="btn btn-warning" type="button" value="Upload"/>
</form>

JS code

$(':button').click(function () {
    var formData = new FormData($('form'));
    $.ajax({
        url: "/files/create",
        type: 'POST',
        success: completeHandler,
        data: formData,
        cache: false,
        contentType: false,
        processData: false

    });
    console.log(formData);
});

function completeHandler() {
    console.log("complete success");
}

Have anyone an idea? With what it can be connected?

can you include the output of `$_FILES` to see if the file have been posted or not. — Dileep Kumar, Jul 25 '17 at 10:41
why are you using js when you are using form? you can easily upload the file using form — Exprator, Jul 25 '17 at 10:41
Duplicate of https://stackoverflow.com/questions/23980733/jquery-ajax-file-upload-php — Dileep Kumar, Jul 25 '17 at 10:45
Doesn't it need to be `$('form')[0]` when you pass it to `FormData()`, to actually get the HTML-form element instead of the jQuery element? — M. Eriksson, Jul 25 '17 at 10:48
i said only form and not ajax @MagnusEriksson, please see the comment properly — Exprator, Jul 25 '17 at 10:50
@Exprator I missed that the OP didn't have `even.preventDefault();`, which changes the case. — M. Eriksson, Jul 25 '17 at 10:51

Ankit Singh · Answer 1 · 2017-07-25T11:19:43.030

Try this:

//HTML Part

<form enctype="multipart/form-data" method="post">
    <input name="file" type="file"/>
    <input class="btn btn-warning" type="submit" value="Upload"/>
</form>

//Js part
<script>
$('form').submit(function (e) {
    e.preventDefault();
    var formData = new FormData($(this)[0]);
    $.ajax({
       url: '/files/create',
       type: 'POST',
       data: formData,
       async: false,
       cache: false,
       contentType: false,
       enctype: 'multipart/form-data',
       processData: false,
       success: function (response) {
         alert(response);
       }
    });
    return false;
});

</script>

php part in your create.php

<?php
    if(isset($_FILES['file'])){
      print_r($_FILES);
    }
?>

js upload file - No files were uploaded

1 Answers1