Ajax File Upload With Form Data Laravel 5.3

i want to upload a profile image of a user to the server and i’m stuck at ajax upload of image

all my form data are posting to database including the image name but the file is not uploading to the server

my view is

//form
<form id="example-form" method="post" enctype="multipart/form-data">
    {!! csrf_field() !!}
    <div class="row">
        <div class="col m12">
            <div class="row">
                <div class="input-field col m12 s12">
                    <input id="name" name="name" type="text" placeholder="Full Name" class="required validate">
                </div>
                <div class="input-field col s12">
                    <input id="email" name="email" type="email" placeholder="Email" class="required validate">
                </div>
                <div class="input-field col s12">
                    <input id="phone_number" name="phone_number" type="tel" placeholder="Phone Number" class="required validate">
                </div>                                                        
                <div class="input-field col m6 s12">
                    <input id="address" name="address_city_village" type="text" placeholder="Address City Village">
                </div>
                <div class="input-field col m6 s12">
                    <input id="state" name="address_state" type="text" placeholder="State">
                </div>                                                        
                <div class="input-field col s12">
                    <input id="password" name="password" type="password" placeholder="Password" class="required validate">
                </div>
                <div class="input-field col s12">
                    <input id="confirm" name="confirm" type="password" placeholder="Confirm Password" class="required validate">
                </div>
                <div class="file-field input-field col s12">
                    <div class="btn teal lighten-1">
                        <span>Image</span>
                        <input type="file" name="image">
                    </div>
                    <div class="file-path-wrapper">
                        <input class="file-path validate" type="text" >
                    </div>
                </div>                                                        
            </div>
        </div>
    </div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="waves-effect waves-green btn blue">Submit</button>
</div>
</form>

//ajax
$(document).on("click", ".agent-add", function () {

    var agent_id = $(this).data('id');

    $('form').submit(function(event) {
        event.preventDefault();
        $.ajax
        ({
            url: '{{ url('/agents') }}',
            type: 'POST',              
            data: {
                "_method": 'POST',
                "name": $('input[name=name]').val(),
                "email": $('input[name=email]').val(),
                "phone_number": $('input[name=phone_number]').val(),
                "address_city_village": $('input[name=address_city_village]').val(),
                "address_state": $('input[name=address_state]').val(),
                "image": $('input[name=image]').val(),
                "password": $('input[name=password]').val()
            },
            success: function(result)
            {
                location.reload();
            },
            error: function(data)
            {
                console.log(data);
            }
        });

    });
}); 

my controller is

public function store(Request $request)
{
    if (User::where('phone_number', '=', Input::get('phone_number'))->exists()) {
       return $this->respondBadRequest('Phone Number Exists');
    }
    else 
    {
        User::create($request->all());

        return redirect('agents')->with('Success', 'Agent Added');

        if($request->hasFile('image')) {
            $file = $request->file('image');

            //you also need to keep file extension as well
            $name = $file->getClientOriginalName().'.'.$file->getClientOriginalExtension();

            //using array instead of object
            $image['filePath'] = $name;
            $file->move(public_path().'/uploads/', $name);

        }
    }
}

i guess i’m missing something in ajax posting, but i couldn’t figure it out

i dd($request->all());

the result is

array:9 [▼
  "_token" => "heSkwHd8uSIotbqV1TxtAoG95frcRTATgeGL0aPM"
  "name" => "fwe"
  "email" => "[e-mail]"
  "phone_number" => "4444422555"
  "address_city_village" => "sgf"
  "address_state" => "gfdgsdf"
  "password" => "ffffff"
  "confirm" => "ffffff"
  "image" => UploadedFile {#208 ▼
    -test: false
    -originalName: "Screenshot (8).png"
    -mimeType: "image/png"
    -size: 135920
    -error: 0
    path: "C:wamptmp"
    filename: "php47F2.tmp"
    basename: "php47F2.tmp"
    pathname: "C:wamptmpphp47F2.tmp"
    extension: "tmp"
    realPath: "C:wamptmpphp47F2.tmp"
    aTime: 2017-01-24 06:14:40
    mTime: 2017-01-24 06:14:40
    cTime: 2017-01-24 06:14:40
    inode: 0
    size: 135920
    perms: 0100666
    owner: 0
    group: 0
    type: "file"
    writable: true
    readable: true
    executable: false
    file: true
    dir: false
    link: false
    linkTarget: "C:wamptmpphp47F2.tmp"
  }
]

i checked the C:wamptmpphp47F2.tmp enen there i din’t find the image

looking forward for much needed help

thank you

Answer

Try using the FormData in ajax while you upload a file.

Just try this

$('form').submit(function(event) {
    event.preventDefault();
    var formData = new FormData($(this)[0]);
    $.ajax({
        url: '{{ url('/agents') }}',
        type: 'POST',              
        data: formData,
        success: function(result)
        {
            location.reload();
        },
        error: function(data)
        {
            console.log(data);
        }
    });

});

OR

You can try with this jQuery library

https://github.com/malsup/form

EDIT

public function store(Request $request)
{
    if (User::where('phone_number', '=', Input::get('phone_number'))->exists()) {
       return $this->respondBadRequest('Phone Number Exists');
    }
    else 
    {
        $user=User::create($request->all());

        if($request->hasFile('image')) {
           $file = $request->file('image');

           //you also need to keep file extension as well
           $name = $file->getClientOriginalName().'.'.$file->getClientOriginalExtension();

           //using the array instead of object
           $image['filePath'] = $name;
           $file->move(public_path().'/uploads/', $name);
           $user->image= public_path().'/uploads/'. $name;
           $user->save();
        }
        return redirect('agents')->with('Success', 'Agent Added');
    }
}