3

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.

1

5 Answers 5

0

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

0

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/

0

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

0

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

0
-2

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.