0

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..

  1. 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...

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Stanley Luo
  • 3,689
  • 5
  • 34
  • 64

1 Answers1

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?

Community
  • 1
  • 1
David Nguyen
  • 8,368
  • 2
  • 33
  • 49
  • Thanks you are pointing me to the right direction, but I'm still pretty much confused about the file object on server side. So I got a file using `file_put_contents('image64.png', $avatar_data);`, but how do I use the file? What I need is a UploadedFile object, which requires a path by its constructor, but how can I specify the path in this condition? When I try `$avatar = new UploadedFile('image64.png',$original->getClientOriginalName());`, it throws a unknown error. – Stanley Luo Mar 05 '16 at 03:38
  • Solved! `file_put_contents('image64.png', $avatar_data); $avatar = new UploadedFile('image64.png',$original->getClientOriginalName(),'image/jpg',null,null,true);` The trick here is the last parameter - setting to true or it fails unknownly. – Stanley Luo Mar 05 '16 at 04:09