Support the ongoing development of Laravel.io →
Input Views Forms

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.

Last updated 2 years ago.
0

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);
    });
});
0

Sign in to participate in this thread!

Eventy

Your banner here too?

Moderators

We'd like to thank these amazing companies for supporting us

Your logo here?

Laravel.io

The Laravel portal for problem solving, knowledge sharing and community building.

© 2025 Laravel.io - All rights reserved.