Support the ongoing development of Laravel.io →
Input Views Forms
Last updated 3 months 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' => '[email protected]'));

// 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!

Cloudways

Your banner here too?

Moderators

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

Your logo here?

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

© 2022 Laravel.io - All rights reserved.