laravel: image not being submitted with form - php

Question

I have this form in a page:
<div class="card-block">
{!! Form::open(array( 'autocomplete' => 'off', 'id' => 'AddModel', 'url' => 'model/useradd', 'files' => true)) !!}
<div class="form-group">
<label for="picture">Picture</label>
#if( (new Jenssegers\Agent\Agent)->isMobile() )
{!! Form::file('image', ['id' => 'modelpic', 'accept' => 'image/*', 'capture' => 'camera']) !!}
#else
{!! Form::file('image', ['id' => 'modelpic']) !!}
#endif
<br/>
</div>
<div id="imagePreview" style="display: none;"></div> /** here I show preview of the image through JS */
<div class="form-group">
{!! Form::submit('Submit', array('id' => 'AddBtn', 'class' => 'btn btn-default' )) !!}
{!! Form::close() !!}
</div>
in my controller:
public function preview(Request $request)
{
dd($request->file('image'));
}
result of dumping = NULL
I don't understand what's the catch here. I have an identical form in another page that is working normally.
by validating request I get the error "image is required"
$this->validate($request, [
'image' => 'required|mimes:jpeg,jpg,png,gif|image|image_size:>=640'
]);
new info:
There must be a problem with the javascript because removing it the controller works normally:
this is the JS
jQuery(function ($) {
$(document).ready(function () {
$("body").on("submit", "#AddModel", function (e) {
var form = $(this);
$.ajax({
url: form.prop('action'),
type: 'post',
dataType: 'json',
data: $(this).serialize(),
success: function (data) {
console.log(data);
},
error: function (textStatus) {
{
var json = JSON.parse(textStatus.responseText);
console.log (json);
}
}
});
e.preventDefault();
});
});
});
solved, thanks #sagar
jQuery(function ($) {
$(document).ready(function () {
$("body").on("submit", "#AddModel", function (e) {
var form = $(this);
var postData = new FormData($("#AddModel")[0]);
$.ajax({
type:'POST',
url:form.prop('action'),
processData: false,
contentType: false,
data : postData,
success:function(data){
console.log(data);
},
error: function (textStatus) {
{
var json = JSON.parse(textStatus.responseText);
console.log (json);
}
}
});
e.preventDefault();
});
});
});

Answer 1

To upload image using ajax:
Do it like:
You can upload the file using ajax like this.
In your form tag use attribute enctype and form html will be like below:
<form enctype="multipart/form-data" id="modal_form_id" method="POST" >
<input type="file" name="documents">
</form>
Js code:
var postData = new FormData($("#modal_form_id")[0]);
$.ajax({
type:'POST',
url:'your-post-url',
processData: false,
contentType: false,
data : postData,
success:function(data){
console.log("File Uploaded");
}
});
On your controller side you can do in the function like below to upload image.
if(Input::hasFile('documents')) {
$path = "directory where you wish to upload file";
$file_name= Input::file('documents');
$original_file_name = $file_name->getClientOriginalName();
$extension = $file_name->getClientOriginalExtension();
$fileWithoutExt = str_replace(".","",basename($original_file_name, $extension));
$updated_fileName = $fileWithoutExt."_".rand(0,99).".".$extension;
$uploaded = $file_name->move($path, $updated_fileName);
echo $updated_fileName;
}
More details :
File upload through a modal using Ajax

Answer 2

This code checks if request has a file if yes then names it and then moves the files to a folder in public dir.
if($request->hasFile('modelpic')) {
$file = Input::file('modelpic');
//get file extension
$name = 'image'.$file->getClientOriginalExtension();
//move file to public/images dir
$file->move(public_path().'/images/', $name);
}

Answer 3

Images are submitted with multiple part request due to size use (Multipart-form-data) in form tag.
Like this,
<div class="card-block">
{!! Form::open(array( 'autocomplete' => 'off', 'id' => 'AddModel', 'url' => 'model/useradd', 'files' => true,'enctype' => 'multipart/form-data')) !!}
<div class="form-group">
<label for="picture">Picture</label>
#if( (new Jenssegers\Agent\Agent)->isMobile() )
{!! Form::file('image', ['id' => 'modelpic', 'accept' => 'image/*', 'capture' => 'camera']) !!}
#else
{!! Form::file('image', ['id' => 'modelpic']) !!}
#endif
<br/>
</div>
<div id="imagePreview" style="display: none;"></div> /** here I show preview of the image through JS */
<div class="form-group">
{!! Form::submit('Submit', array('id' => 'AddBtn', 'class' => 'btn btn-default' )) !!}
{!! Form::close() !!}
</div>