laravel: image not being submitted with form

Question

I have this form in a page:

<div class="card-block">
{!! Form::open(array( 'autocomplete' => 'off', 'id' => 'AddModel', 'url' => 'model/useradd', 'files' => true)) !!}
<div class="form-group">
    <label for="picture">Picture</label>
    @if( (new Jenssegers\Agent\Agent)->isMobile() )
    {!! Form::file('image', ['id' => 'modelpic', 'accept' => 'image/*', 'capture' => 'camera'])  !!}
    @else
    {!! Form::file('image', ['id' => 'modelpic']) !!}
    @endif
    <br/>
</div>
<div id="imagePreview" style="display: none;"></div> /** here I show preview of the image through JS */
<div class="form-group">
    {!! Form::submit('Submit', array('id' => 'AddBtn', 'class' => 'btn btn-default' )) !!}
    {!! Form::close() !!}
</div>

in my controller:

public function preview(Request $request)
{
dd($request->file('image'));
}

result of dumping = NULL

I don't understand what's the catch here. I have an identical form in another page that is working normally.

by validating request I get the error "image is required"

$this->validate($request, [

'image' => 'required|mimes:jpeg,jpg,png,gif|image|image_size:>=640'
]);

new info:

There must be a problem with the javascript because removing it the controller works normally:

this is the JS

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

        $("body").on("submit", "#AddModel", function (e) {

            var form = $(this);

            $.ajax({
                url: form.prop('action'),
                type: 'post',
                dataType: 'json',
                data: $(this).serialize(),
                success: function (data) {

                console.log(data);


                },
                error: function (textStatus) {

                    {


                        var json = JSON.parse(textStatus.responseText);


                        console.log (json);


                    }

                }
            });
            e.preventDefault();
        });
    });
});

solved, thanks @sagar

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

        $("body").on("submit", "#AddModel", function (e) {

            var form = $(this);

            var postData = new FormData($("#AddModel")[0]);

            $.ajax({
                type:'POST',
                url:form.prop('action'),
                processData: false,
                contentType: false,
                data : postData,
                success:function(data){

                    console.log(data);

                },

                error: function (textStatus) {

                    {


                        var json = JSON.parse(textStatus.responseText);


                        console.log (json);


                    }

                }
            });
            e.preventDefault();
        });
    });
});

Answer 1

To upload image using ajax:

Do it like:

You can upload the file using ajax like this.

In your form tag use attribute enctype and form html will be like below:

 <form enctype="multipart/form-data" id="modal_form_id"  method="POST" >
    <input type="file" name="documents">
 </form>

Js code:

           var postData = new FormData($("#modal_form_id")[0]);

                 $.ajax({
                         type:'POST',
                         url:'your-post-url',
                         processData: false,
                         contentType: false,
                         data : postData,
                         success:function(data){
                           console.log("File Uploaded");
                         }

                      });

On your controller side you can do in the function like below to upload image.

if(Input::hasFile('documents')) {

    $path = "directory where you wish to upload file";

    $file_name= Input::file('documents');   
    $original_file_name = $file_name->getClientOriginalName();

    $extension       = $file_name->getClientOriginalExtension();
    $fileWithoutExt  = str_replace(".","",basename($original_file_name, $extension));  
    $updated_fileName = $fileWithoutExt."_".rand(0,99).".".$extension; 

    $uploaded = $file_name->move($path, $updated_fileName);

    echo $updated_fileName;

}

More details :

File upload through a modal using Ajax

Answer 2

Images are submitted with multiple part request due to size use (Multipart-form-data) in form tag. Like this,

<div class="card-block">
  {!! Form::open(array( 'autocomplete' => 'off', 'id' => 'AddModel', 'url' => 'model/useradd', 'files' => true,'enctype' => 'multipart/form-data')) !!}
<div class="form-group">
  <label for="picture">Picture</label>
  @if( (new Jenssegers\Agent\Agent)->isMobile() )
   {!! Form::file('image', ['id' => 'modelpic', 'accept' => 'image/*', 'capture' => 'camera'])  !!}
  @else
   {!! Form::file('image', ['id' => 'modelpic']) !!}
  @endif
<br/>
</div>
<div id="imagePreview" style="display: none;"></div> /** here I show preview of the image through JS */
<div class="form-group">
  {!! Form::submit('Submit', array('id' => 'AddBtn', 'class' => 'btn btn-default' )) !!}
   {!! Form::close() !!}
</div>

Answer 3

This code checks if request has a file if yes then names it and then moves the files to a folder in public dir.

if($request->hasFile('modelpic')) {
        $file = Input::file('modelpic');
       //get file extension
        $name = 'image'.$file->getClientOriginalExtension();
       //move file to public/images dir
        $file->move(public_path().'/images/', $name);
    }