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" => "sanjiarya2112@gmail.com" "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
Advertisement
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
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'); } }