How to save cropped avatar with laravel

Question

So my website (built with laravel 5) allows users to upload an image, crop it (with croppie.js), but here's the problem - the cropped image I get is based 64 data URI and I don't know how to upload it.

My trials: 1. Initially I used a form to post it - but now I get base64 URI, I can't put it in some <input> element in the form, like this:

 <form.....> <div class="actions"> <button class="file-btn"> <div>Upload</div> <input name="original" type="file" id="upload"/> </button> <div class="crop"> <div id="upload-demo"></div> </div> <div id="result"></div> </div> <input id="image" type="hidden" name="image"> </form> 

If I can bind the generated base64 URI to the hidden input it will be perfect! But I just can't make it..

2. I can post base64 to controller - then what? Should I just store the very long string in database, or generate a image at the server side, then store in the server?

Seems the first approach is easier but I have been googling for 4 hours and got no answer...

Answer 1

• crop image, generate base64 uri
• post base64 uri to laravel endpoint
• decode base64 uri on server side and store image

This should help with the decoding part:

Convert Base64 string to an image file?