Upload file is empty Laravel 5.4

Question

I am trying to send the file data in my controller using ajax but it doesn't work. Here is the code structure below;

THE FORM

    <form id="contact_img" enctype="multipart/form-data">
      <input type="hidden" name="_token" value="{{ csrf_token() }}">
      <input id="contact_image" name="contact_image" type="file" class="file">
      <input type="text" class="form-control" name="testtest" id="testtest" required>
      <button type="submit" class="btn-default">Save</button>
    </form>

AJAX

    $.ajax({
        url: "{{ url('/') }}/admin/upload_contact_img",
        data: $("#contact_img").serialize(),
        success: function (data) {
          alert(data);
          location.reload();
        },
    });

my Web Routes

Route::get('admin/upload_contact_img', 'admin_controller@contact_img_upload');

THE CONTROLLER

public function contact_img_upload(Request $form){
    if ($form->hasFile('contact_image')){
        echo $form->file('contact_image');

    }else{
        echo "empty";
    }
    echo $form->testtest;
}

only the input testtest display the value.

Answer 1

Try to use formData() instead serializing form.

 $("#contact_img").on('submit', function(e){
       e.preventDefault(); 
       var form = new FormData(e.target)          
      $.ajax({
        url: "{{ url('/') }}/admin/upload_contact_img",
       data : form,
       processData: false,  // tell jQuery not to process the data
       contentType: false,  // tell jQuery not to set contentType
        success: function (data) {
          alert(data);
        },
        type:'POST'
    });
    });

see example https://jsfiddle.net/cihkem/hk7u9kLf/

Answer 2

Problem is that Ajax file uploads do not work so easily. You need to implement for example FileReader.

See this answer: Uploading files in HTML5 with Ajax

Answer 3

1) Add id in form submit button

<form id="contact_img" enctype="multipart/form-data">
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <input id="contact_image" name="contact_image" type="file" class="file">
    <input type="text" class="form-control" name="testtest" id="testtest" required>
    <button type="submit" id="submitBtn" class="btn-default">Save</button>
</form>

2) Ajax

jQuery(document).ready(function($){

    $("#submitBtn").click(function(e) {

        e.preventDefault();
        var contact_image = $("#contact_image").prop("files")[0];
        var testtest = $("#testtest").val();
        var form_data = new FormData();
        form_data.append("contact_image", contact_image);
        form_data.append("testtest", testtest);

        $.ajax({
            url: './admin/upload_contact_img',
            type: "POST",
            data: form_data,
            dataType: 'json',
            cache: false,
            contentType: false,
            processData: false,
            success: function(data){
                console.log(data.contact_image);
                console.log(data.testtest);
            },
            error:function(error){
                console.log('Something went wrong');
            }
        });
    });

});

3) Inside controller

public function contact_img_upload(Request $form){
{
    if( $form->hasFile('image')) {
        $image = $form->file('image');

        //Image handling code //
    }

    $testtest = $form->testtest;
    return response()->json(['contact_image' => $image, 'testtest' => $testtest]);   
}

If you need a demo project, just clone this project Laravel-BoilerPlate-Template

Answer 4

simply put this in the top of your controller file

use Illuminate\Http\UploadedFile;

because The file method of Request returns an instance of the Illuminate\Http\UploadedFile class, and to manipulate it, the namepace must be in scope

Answer 5

use jQuery.form.js to submit a form via AJAX. you can also have upload progress. visit following link.

http://malsup.com/jquery/form/