SummerNote onImageUpload converting server request to C# BASE64?

Question

I have a C# MVC project where I will need to both use Summernote v0.8.2 as my WYSIWYG editor, along with exporting a PDF with jsPDF. I know that there are examples to make this work. My issue is that I need to custom resize/process the image that's inserted with summernote. Again, I know that you can capture this event using the onImageUpload callback. I'm having trouble correctly handing the incoming Request on the server to get the image and convert it into a BASE64 string. I would think this should be pretty easy, but I can't figure out what to do with the incoming Request to extract the Image. I've give you the whole process just to make sure you have enough info to help.

Here's my Summernote setup:

$('.summernote').summernote(
            {                                  
                toolbar: [
                     ['style', ['bold', 'italic', 'underline', 'clear']]
                    , ['fontname', ['fontname']]
                    , ['fontsize', ['fontsize']]
                    , ['color', ['color']]
                    , ['insert', ['picture']]
                ]                   
                , callbacks: {
                    onImageUpload: function (image) {                            
                        uploadImage(image[0]);
                    }
                }
            }
            );

Here's the AJAX call: FYI - I did change the data appended from image to file. Didn't change outcome.

function uploadImage(file, editor, welEditb) {
        var data = new FormData();                        
        //data.append("image", image);
        data.append("file", file);

        $.ajax({
            url: '/home/UploadSummerNoteFile',
            cache: false,
            contentType: false,
            processData: false,                
            data: data,
            type: "post",
            success: function (data) {
                alert('display base64 data: ' + data);
                //editor.insertImage(welEditable, url);
            },
            error: function (data) {
                console.log(data);
            }
        });
    }

My server method doesn't have any parameters, and I'm not sure how to extract just the FILE (IMAGE?) content. Once I get the actual file, I need to modify and change it (size, resolution, etc., which I can do), then convert it into BASE64 and send it back to the UI. So, my questions here this:

• How do I get the file (image) from the request stream?
• How do convert whatever this 'thing' is from above into BASE64?

I've used an online BASE64 converter for the image that I've been testing with so I know that my attempts haven't created a valid string.

Here's a partial example that I've found online, modified it (poorly) in an attempt to make work, which it doesn't:

        byte[] buffer = new byte[Request.InputStream.Length];
        Request.InputStream.Read(buffer, 0, buffer.Length);

        string data = Encoding.Default.GetString(buffer);


        string[] tokens = data.Split(',');
        if (tokens.Length > 1)
        {
            // not sure what I'm doing, trying stuff.  BOOOOM!
            image = Convert.FromBase64String(tokens[1]);
            base64 = Convert.ToBase64String(image);

            //string fileName = DateTime.Now.ToString("yyyyMMddHHmmssffff") + ".png";
            //string path = Path.Combine(@"D:\www\images", fileName);
            //File.WriteAllBytes(path, image);
        }

What do I need to do with the buffer or the data object? Where does the content of the file live in the request? Is it already converted when it was serialized for transport to the server? Also, assuming everything else gets completed, do I need to save the file to the server so it can be placed within Summernote's editor.insertImage(welEditable, url)? Thanks for your time and help!

Answer 1

Seems that I made this much harder than it needed to be. It's just a regular request, so extract the file from the request, and copy it to a memory stream. In this case I send back the BASE64 string to the calling function. Hopefully this helps others.

    [HttpPost]
    public JsonResult UploadFile()
    {
        var fileName = Request.Files[0].FileName;
        var base64 = string.Empty;

        using (var memoryStream = new MemoryStream())
        {
            Request.Files[0].InputStream.CopyTo(memoryStream);
            var fileContent = memoryStream.ToArray();
            base64 = Convert.ToBase64String(fileContent);            
        }

        return Json(base64);
    }

Here's the uploadImage ajax method changes: I create an instance of an IMG, and change the src to be the BASE64 value.

function uploadImage(file, editor, welEditb) {
        var data = new FormData();                             
        data.append("file", file);

        $.ajax({
            url: '/home/UploadSummerNoteFile',
            cache: false,
            contentType: false,
            processData: false,                
            data: data,
            type: "post",
            success: function (data) {                    
                var image = $('<img>').attr('src', 'data:' + file.type + ';base64,' + data);
                $('.summernote').summernote("insertNode", image[0]);                    
            },
            error: function (data) {
                console.log(data);
            }
        });
    }