upload image with laravel using ajax - php

Question

I have table user:
id (int)
firstname (string)
lastName (string)
email (string)
login (string)
password (string)
image (text)
I would like to insert image in my database using ajax jquery.
But at the given database level it does not insert the data with the image.
I try with this code but doesn't work.
Controller:
public function addUser(Request $request){
$user = new User();
$user->lastName = $request->lastName;
$user->firstName = $request->firstName;
$user->email = $request->email;
$user->login = $request->login;
$user->password = bcrypt($request->password);
if($request->has('image') ) {
$file_local = $request->file('image');
$extension = $request->file('image')->getClientOriginalExtension();
if($extension == 'jpg' || $extension == 'png' || $extension == 'jpeg'){
$name=$request->file('image')->getClientOriginalName();
$path = $file_local->storeAS('public/',$name);
$user->image = $name;
}
}
$user->save();
return response()->json($user);
}
View:
<form enctype="multipart/form-data">
<div class="form-group">
<input type="text" id="lastName" class="form-control" placeholder="last Name" required />
</div>
<div class="form-group">
<input type="text" id="firstName" class="form-control" placeholder="name" required />
</div>
<div class="form-group">
<input type="email" id="email" class="form-control" placeholder="Email" required/>
</div>
<div class="form-group">
<input type="text" id="login" class="form-control" placeholder="Login" required/>
</div>
<div class="form-group">
<input type="password" id="password" class="form-control" placeholder="password" required/>
</div>
<div class="form-group">
<input type="file" id="image" class="form-control" required />
</div>
</form>
ajax:
$(document).on('click', "#creer_utilisateur", function() {
var lastName= $('#lastName').val();
var firstName = $('#firstName').val();
var email = $('#email').val();
var login = $('#login').val();
var password = $('#password').val();
var image = $('#image').val();
success: function(data) {
$.ajax({
url: "{{action('UserController#addUser')}}",
method: 'POST',
data: {
lastName: lastName,
firstName: firstName,
email: email,
login: login,
password: password,
image: image
},
success: function(data) {
alert('success');
},
error: function(){
alert('failed');
}
});
}
});
});

Answer 1

You are actually saving the name of the image:
$name=$request->file('image')->getClientOriginalName();
...
$user->image = $name;
You said:
"But at the given database level it does not insert the data with the image."
And the type of the column is:
image (text)
So, I guess you don't want to store the name, right?

Answer 2

when you are using ajax to upload file you need to create form with File attribute. and Then append other values with that.
Something like this:
var formData = new FormData();
if ($('#images')[0].files.length > 0) {
for (var i = 0; i < $('#images')[0].files.length; i++)
formData.append('file[]', $('#images')[0].files[i]);
}
formData.append('lastName', $('#lastName').val());
second when you pass files with ajax make sure cache is false.
$.ajax({
type: 'POST',
dataType: "JSON",
url: jQuery('form').attr('action'),
xhr: function() {
myXhr = $.ajaxSettings.xhr();
return myXhr;
},
cache: false,
contentType: false,
processData: false
data: formData,
success: function(data) {
// Success
},
error: function(error) {
// error
},
});
Good luck

Answer 3

you can change an image text area like you can select an image: file then you can insert a file