Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I've created a form where I upload data to the database with Ajax on a button click. I've tried to add an image (file) upload to the form but it seems to generate an error on the form -- the form does nothing on the button click.
Can anyone see where I'm going wrong?
PHP: $product = Product::find($products_id); $comment = new Comment(); $comment->title = $request['title']; $comment->comment = $request['comment']; $comment->products()->associate($product); $comment->user_id = $request['userid']; $comment->save();
if ($request->hasFile('image')) {
$picture = new Picture();
$image = $request->file('image');
$filename = uniqid('img_') . '.' . $image->getClientOriginalExtension();
$location = public_path('images/' . $filename);
Image::make($image)->save($location);
$picture->image = $filename;
$picture->products()->associate($product);
$picture->user_id = $request->user()->id;
$picture->comments()->associate($comment);
$picture->save();
}
HTML
{!! Form::open((['route' => ['comments.store', $product->id], 'method' => 'POST', 'files' => 'true'])) !!}
<div class="comment-form">
{{ Form::label('title', 'Title (Give a short summary)') }}
{{Form::text('title', null, ['class'=>'form-control title', 'minlength'=>'2','maxlength'=>'30'])}}
{{Form::label('comment', 'Add comment (2000 character limit)')}}
{{Form::textarea('comment', null, ['class'=>'form-control review'])}}
{!!Form::hidden('user_id', Auth::user()->id, array('class' => 'userid')) !!}
{{Form::label('image', 'Upload image')}}
{{ Form::file('image', null, array('class' => 'image')}}
{{ Form::submit('Add Review', ['class' => 'btn btn-send btn-block send-review'])}}
{!! Form::close() !!}
</div>
JS AJAX:
$('.send-review').on('click', function (dl) {
var title = $('.title').val();
var comment = $('.review').val();
var userid = $('.userid').val();
var image = $('.image').val();
dl.preventDefault();
$.ajax({
method: 'POST',
url: urlCreateReview,
data: {title: title, comment: comment, userid: userid, image: image}
}).done(function () {
});
});
Files don't get sent in ajax requests by default. You need to use a FormData object. Please see this: https://wisdmlabs.com/blog/access-file-before-upload-using-jquery-ajax/
Besides, $('.image').val() would only give you the filename on the users computer (which is the value of the file input), not the uploaded file.
$('.send-review').on('click', function(dl) {
var title = $('.title').val();
var comment = $('.review').val();
var userid = $('.userid').val();
var image = $('.image1').prop('files')[0];
var form_data = new FormData();
form_data.append('title', title);
form_data.append('review', comment);
form_data.append('userid', userid);
form_data.append('image', image);
dl.preventDefault();
$.ajax({
method: 'POST',
url: urlCreateReview,
data: form_data,
})
.done(function() {
});
});
Followed that and now have this which also doesn't work? any ideas?
any ideas
How about see how others have already done it.
https://laracasts.com/discuss/channels/requests/upload-image-with-ajax
https://laracasts.com/discuss/channels/laravel/how-upload-ajax-image-with-laravel-54
You are better off NOT. Use a good package which will properly rotate and optimize for web like intervention.
Just a cents worth.
Followed that and now have this which also doesn't work? any ideas?
@dionarap You didn't follow it 100%. Look at the ajax options. Those need to be there.
processData: false,
contentType: false,
You are better off NOT. Use a good package which will properly rotate and optimize for web like intervention.
@jlrdw Yeah, but you have to upload the file first in order for php/intervention to process it, don't you?
Looking at them two links and your advice cronix i now have this, which still does not work... see any clear errors?
$('.send-review').on('click', function(dl) {
var title = $('.title').val();
var comment = $('.review').val();
var userid = $('.userid').val();
var image = $('.image1')[0].files[0];
var form_data = new FormData();
form_data.append('title', title);
form_data.append('comment', comment);
form_data.append('userid', userid);
form_data.append('image', image);
dl.preventDefault();
$.ajax({
method: 'POST',
url: urlCreateReview,
data: form_data,
processData: false,
contentType: false
})
.done(function() {
});
});
I do have the same issue: https://laracasts.com/discuss/channels/javascript/why-same-file-upload-ajax-code-doesnt-work-in-57
can you try in Laravel 5.4 and see if it resolves it !!
I am using 5.4 and the error still exists
guys there is a much simple way to do it for send data
// this way you have all the form data with out the need to append them one by one :).
var form_data = new FormData( document.getElementById('your_form_id') );
$.ajax({
method: 'POST',
url: urlCreateReview,
data: form_data,
processData: false,
contentType: false
})
.done(function(responce) {
// success
});
Please or to participate in this conversation.