How to Save Images In Folder After cropping using Croppie (Jquery Image cropper)

Question

I'm Trying to save the image after cropping into folder &image path to the database using croppie but it convert to base64 & i also dont know how to send this data to controller & how can i save the image into a folder & its path to the database.

I already try to save file.write function but it was not sending back to image data to the controller

public ActionResult AddProduct(Tbl_Product product,HttpPostedFileBase file_photo)
        {
            string name = null;
            string ext = null;           

            if (ModelState.IsValid==true)
            {
                if (file_photo != null)
                {
                    name = Path.GetFileNameWithoutExtension(file_photo.FileName);
                    ext = Path.GetExtension(file_photo.FileName);

                    string path = Path.Combine(Server.MapPath("~/ProductImages"), name + ext);
                    file_photo.SaveAs(path);
                }

                product.ProductImage = name + ext;
                product.CreatedDate = DateTime.Now;
                _unitofwork.GetRepositoryInstance<Tbl_Product>().Add(product);
                return RedirectToAction("Product");
            }
            else
            {
                ViewBag.CategoryList = GetCategory();
                return View();
            }            
        }

i want to save image in folder & path to database but it shows base64 image

Answer 1

I have written a complete post on using croppie.js with c#

A function to set croppie,

Function to crop the Image,

Then send the image date to the web method by ajax,

Convert image data to image and save it in the folder.

Here is the link, https://shaktisinghcheema.com/image-upload-with-cropping/

Also, you may run into an issue of timeout when sending image data to web method, Here is the link of solution to it: Error while sending base64 string through json

I hope this might help someone who lands on this question.