Extract base64 image from string and post it with form

Question

I am trying to upload a image with my form in my Laravel project. I have a Image cropper that saves the image as data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/..

the cropper sends a JSON string which contains a base64 encoded string of the file, i need to parse the JSON string to an object and then extract the base64 string and turn that into a file object.

I am using Image Intervention for the upload process

Controller function

public function store(Request $request) { // save post in db $post = new Post; $post->title = $request->title; $post->body = $request->body; $post->user_id = auth()->id(); if ($request->hasFile('featimage')) { $image = $request->file('featimage'); $filename = time() . '.' . $image->getCLientOriginalExtension(); $image = trim($image); $image = str_replace('data:image/png;base64,', '', $image); $image = str_replace('data:image/jpg;base64,', '', $image); $image = str_replace('data:image/jpeg;base64,', '', $image); $image = str_replace('data:image/gif;base64,', '', $image); $image = str_replace(' ', '+', $image); $imagedata = base64_decode($image); //Set image whole path here $location = public_path('images/uploads/' . $filename); Image::make($image)->save($location); $post->image = $filename; } $post->save(); $post->tags()->sync($request->tags, false); Session::flash('success', 'The blog post was saved successfully!'); return redirect()->route('posts.show', $post->id); }

View

<form class="form-horizontal" action="{{route('posts.store')}}" method="POST" enctype="multipart/form-data">{{ csrf_field() }} <fieldset class="form-group"> <label for="featimage">Upload Image</label> <input type="file" class="form-control slim" data-ratio="4:3" name="featimage"> <label class="col-md-2 col-form-label">Post Body</label> <textarea type="textarea" class="form-control" rows="10" name="body"></textarea> </fieldset> <button class="btn btn-primary btn-block" name="submit">Save</button> <button class="btn btn-danger btn-block" name="submit">Cancel</button> </form>

I have read other posts like this and i'm clearly missing something but i just don't know what.

yes i would like to upload it to my public/images/uploads folder and save the filename in my db — CEO ASH
– CEO ASH, Commented Apr 9, 2019 at 5:43
Please can you provide a link to the cropper library you're using as well as the javascript you have to initialise it? Also, is $request->hasFile('featimage') definitely evaluating to true?? — Rwd
– Rwd, Commented Apr 9, 2019 at 7:48

Pushpak Bhoir · Accepted Answer · 2019-04-09 09:08:45Z

You can try this function.

 function uploadImage($base_64_string,$image_name) { preg_match("/^data:image\/(.*);base64/i", $base_64_string, $match); $extension_array = explode('/', (explode(';', $base_64_string))[0]); $extension = end($extension_array); $img = $base_64_string; if ($extension == 'png' || $extension == 'jpg' || $extension == 'jpeg'){ $img = str_replace('data:image/' . $extension . ';base64,', '', $img);} elseif ($extension == 'mp4' || $extension == 'mov'){ $img = str_replace('data:video/' . $extension . ';base64,', '', $img); } $img = str_replace(' ', '+', $img); $data = base64_decode($img); $fileNameI = $image_name.'_'.rand().time() . '.' . $extension; //Uploading Image To S3 Bucket $s3 = Storage::disk('s3-image'); $filePath = Config::get('common.Image_Folder') . $fileNameI; $s3->put($filePath, $data, 'public'); return $fileNameI; }

If you don't have Bucket the you can store image in your local directory.

Nik · Accepted Answer · 2019-11-20 14:53:22Z

Try this hope it will work for you.

$featimage = $request->featimage; // base64 encoded image string if (!empty($featimage)) { $image_parts = explode(";base64,", $featimage); $image_type_aux = explode("image/", $image_parts[0]); $image_type = $image_type_aux[1]; $image_base64 = base64_decode($image_parts[1]); $imagename = rand(1, 999) . time() . '.png'; $RootPath = public_path("images/uploads/"); // path where you want to upload image if (!File::exists($categoryRootPath)) { File::makeDirectory($categoryRootPath, 0777, true, true); } file_put_contents($RootPath . $imagename, $image_base64); $post->image = $imagename; }

did you send your image as a base64 string to the controller?
When i crop my image it outputs a base64 string so i need to decode it and upload it to the server
ok if you assign your base64 string to "$featimage" variable on the above code it will definitely work I tested at my end.
Do i need to write javascript to achieve this? could you show me an example
no need to use javascript. just try to assign "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/.." string to $featimage; and change your upload path. i clearly mention comment in code.

Nik · Accepted Answer · 2019-11-20 15:37:50Z

I ran your code in my program and I got a lot of error. If your trying to give input as base64 encoded string as 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/..' and convert it to image file then use the below code:

$post = new Post; $post->title = $request->title; $post->body = $request->body; $post->user_id = auth()->id(); if ($request->featimage) { $image = $request->featimage; // your base64 encoded $filename = time() . '.' . explode('/', explode(':', substr($image, 0, strpos($image, ';')))[1])[1]; $image = str_replace('data:image/jpg;base64,', '', $image); $image = str_replace(' ', '+', $image); $location = public_path('images/uploads/' . $filename); Image::make($image)->save($location); $post->image = $filename; } $post->save();

If you are trying to take normal image file and save it in a public folder as well convert it to base64 format then use the following code.

$post = new Post; $post->title = $request->title; $post->body = $request->body; $post->user_id = auth()->id(); if ($request->hasFile('featimage')) { $image = $request->file('featimage'); $extension = $image->getCLientOriginalExtension(); //gives extension of image $filename = time() . '.' . $extension; //gives filename $location = public_path('images/uploads/' . $filename); //sets path $image = Image::make($image)->save($location); //makes image and saves it to that location $base64 = 'data:image/' . $extension . ';base64,' . base64_encode($image); //changes image to base64 image $post->image = $filename; } $post->save();

I hope the following code provides you the solution. Thank you.

Have you installed image intervention package? Also make images/uploads folder. Then it will work beacuse it is working fine in my code. And I was too having this problem once i solved it using the same code. Thank you for your response though.
Yes i have the image intervention package i can upload a image via a standard upload input with no issue.
Its not detecting the "featimage" name tag i think i may require some js to get this working
If you are using base64 then donot use $request->hasFile('featimage') because base64 is not a file simply use $request->featimage

Collectives™ on Stack Overflow

Extract base64 image from string and post it with form

3 Answers 3

Comments

5 Comments

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

5 Comments

Related