Try this, its not tested in this way, but in a simmilar way in my Project.
// Route
Route::any('/ajax/user/upload-pic/', array('as' => 'uploadImage', 'uses' => 'Controller@ajaxUploadImage'));
// Controller Function
public function ajaxUploadImage()
{
$file = Input::file('image');
$input = array('image' => $file);
$destinationPath = 'uploads/';
$filename = md5(microtime() . $file->getClientOriginalName()) . "." . $file->getClientOriginalExtension();
Input::file('image')->move($destinationPath, $filename);
return Response::json(['success' => true, 'file' => asset($destinationPath . $filename)]);
}
// Blade Template
<div class="form-group">
{!! Form::label('pictureupload',"User Picture",['class'=>'col-sm-3']) !!}
<div class="col-sm-5">
<figure id="picture-preview">
<img src="source-to-dummy-image-or-current-image" alt=""/>
</figure>
<input name="pictureupload" type="file" id="pictureupload" data-url="{{route("uploadImage")}}"
data-target="#picture-preview">
{!!
Form::hidden('picture',$currentImagePath,['class'=>'form-control','id'=>'picture'])
!!}
</div>
<div class="col-sm-3">
<!--
<button type="button" id="ajaxUpload" data-loading-text="uploading..." class="btn btn-primary" data-url="{{route("uploadImage")}}" autocomplete="off">
Loading state
</button>
!-->
</div>
</div>
// JQuery Ajax request
$(function(){
$('#pictureupload').change(setLogoRegistration);
function setLogoRegistration(){
$dst = $('#picture-preview').html("<img />");
$dst.children('img').attr('src',$('#picture').val());
};
setLogoRegistration();
$('body').delegate('#pictureupload','change', function(){
var data = new FormData();
data.append("image",$(this).prop('files')[0]);
var options = {
url: $(this).data('url'),
method: "post",
processData: false, // important
contentType: false, // important
data: data,
dataType: "json",
success:function(response, statusText, xhr, $form)
{
$('#picture').val(response.file).change();
console.log('Upload Complete');
},
beforeSend: function(){
$('body').addClass('ajaxActive');
console.log('Uploading Image...');
},
complete: function(){
$('body').removeClass('ajaxActive');
}
};
$.ajax(options);
});
});
Sign in to participate in this thread!
The Laravel portal for problem solving, knowledge sharing and community building.
The community