I am using laravel 5.1. I have created a user model and profile controller. the user table contains profile pic url column. I am using edit and update method in profile controller. created profile pic upload form. the authenticated users should upload their profile pic. but not able to upload profile pic. any suggestion. example code will be a great help. thanks in advance.
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