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

score 0 · Answer 1 · answered Apr 10 '19 at 07:35

0

In croppie, after cropping the image you will get result in base64 format, keep this base64 in some hidden field like below,

$('#imagebase64').val(base64_data);

And in you controller action method, use the following code to store image in folder.

if (product.imagebase64 != null)
{
    try
    {
         var base64Data = Regex.Match(product.imagebase64, @"data:image/(?<type>.+?),(?<data>.+)").Groups["data"].Value;

         byte[] imageBytes = Convert.FromBase64String(base64Data);

         string filename = DateTime.Now.ToString("ddMMyyyy_hhmmss"); // You can write custom name here
         string path = Path.Combine(Server.MapPath("~/ProductImages"), filename + ".jpg");

         System.IO.File.WriteAllBytes(path, imageBytes);
    }
    catch (Exception ex)
    {

    }
}

answered Apr 10 '19 at 07:35

Aquib Iqbal

375
2
9

but how can i send `$('#imagebase64').val(base64_data);` **view to controller** do i need to pass with controller if yes then how? – A.Aleem K Solution Apr 10 '19 at 07:47
1

Now you are getting `HttpPostedFileBase` file, instead of this you can use `string imagebase64` in you action method – Aquib Iqbal Apr 10 '19 at 07:57
i pass string parameter but it shows empty it also match with my image name but still not getting result My Code is `public ActionResult AddProduct(Tbl_Product product,HttpPostedFileBase file_photo, string base64image) {--------some code------------}` – A.Aleem K Solution Apr 10 '19 at 09:27
Code IS too long but this is code of after croping image which is giving a base 64 code `$('#cropImageBtn').on('click', function (ev) { $uploadCrop.croppie('result', { type: 'base64', format: 'jpeg', size: {width: 150, height: 200} }).then(function (resp) { $('#item-img-output').attr('src', resp); $('#cropImagePop').modal('hide'); }); });` – A.Aleem K Solution Apr 10 '19 at 09:58
Where you are storing `base64` data in hidden field? In your form, add one hidden field `` and store base64 data in hidden field. Like this `$('#imagebase64').val(resp);` after your line `$('#item-img-output').attr('src', resp);`. – Aquib Iqbal Apr 10 '19 at 10:07
Nope it is automatically get by this image src `` – A.Aleem K Solution Apr 10 '19 at 11:13

score 0 · Accepted Answer · answered Aug 06 '19 at 01:04

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.

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

2 Answers2