Hi Awesome People
i want to upload a profile image of the 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);
}
});
});
});
i guess i'm missing something in ajax posting, but i couldn't figure it out
looking forward for much needed help
thank you
$("#example-form").submit(function(){
var formData = new FormData($(this)[0]);
$.ajax({
url: url to post,
type: 'POST',
data: formData,
success: function (data) {
alert(data)
},
cache: false,
processData: false
});
return false;
});
try like this and u have missed to give the name for the file field
to upload files in laravel 5.3 follow this url :
@nagavinod424 thank you so much i figured it out now the file is uploading to the server but the file path is not storing
in my database i have a image column where i need to store the path to display
after uploading the image the path storing is C:\wamp\tmp\php48C0.tmp it should be C:\wamp\www\project\public\uploads right?
my controller is
public function store(Request $request)
{
//dd($request->all());
if (User::where('phone_number', '=', Input::get('phone_number'))->exists()) {
return $this->respondBadRequest('Phone Number Exists');
}
else
{
User::create($request->all());
if($request->hasFile('image')) {
$file = $request->file('image');
$name = $request['phone_number'].$request['phone_number'].'.'.$file->getClientOriginalExtension();
$image['filePath'] = $name;
$file->move('uploads', $name);
}
return redirect('agents')->with('Success', 'Agent Added');
}
}
thank you
First you need to upload file to the folder u want like this
$path = $request->photo->store('public/uploads');
then
$request->image = $path;
and
User::create($request->all());
Please or to participate in this conversation.