How to upload canvas image to storage on Laravel

Question

I have small laravel project that need to upload file from canvas to storage/uploads/imgs. This is my canvas

<body>
    <canvas id="canvas"></canvas>
</body>

I may need ajax for client as below

var canvas = document.getElementById('image');
    var dataURL = canvas.toDataURL();

$.ajax({
    type: "POST",
    url: "/route-here",
    data: { 
        imgBase64: dataURL
    }
}).done(function(o) {
    console.log('saved'); 
});

But I'm not sure for coding in server(Laravel) side. Any advise or guidance would be greatly appreciated, Thanks.

id='image' or var canvas = document.getElementById('canvas');. Change one. — Tpojka

Jimmy Jimmy · Accepted Answer · 2019-04-24T03:59:16

I dont use Canvas, but do a bit of file uploading... You can use standard php methods for moving files in Laravel... Also, whilst you can definitely use AJAX, you could also accomplish this via a form...

Example of how I handle the upload in my controller:

if ($request->file('image')) {

    $asset = $request->file('image')->getClientOriginalName();

        $request->file('image')->move(
               base_path() . '/storage/app/uploads/imgs/', $asset
        );

}

I would also normally, do a check for path (as if your path doesn't exist - it will fail), duplicate file name etc before the ->move method is invoked.

A better way long term is to learn how the Laravel Storage class works - which is less code - but needs "disks" configured correctly as well as including the class in your controller etc.

Hope above helps point you in right direction...

How to upload canvas image to storage on Laravel

1 Answers