How to upload blob and convert to image in webapi

Question

I am trying to upload a blob created from an image to my server and then convert the blob to an image and save it in a C# webapi. I created a canvas to store my image and the converted it into a base64 file. Below is my javascript code.

    var blob = canvas.toDataURL("image/jpeg"); // This will save your image as a 
                //jpeg file in the base64 format.
                var jpegFile64 = blob.replace(/^data:image\/(png|jpeg);base64,/, "");
                var jpegBlob = base64ToBlob(jpegFile64, 'image/jpeg');
                var data = new FormData();
                data.append("mypic", jpegBlob, "thisimage.jpg");
                var oReq = new XMLHttpRequest();
                oReq.open("POST", "http://localhost:52704/api/uploadfile/myfile.jpg/", true);
                oReq.onload = function (oEvent) {
                     alert(this.responseText);
                     };
                oReq.send(data);
      }

       function base64ToBlob(base64, mime) {
        mime = mime || '';
        var sliceSize = 1024;
        var byteChars = window.atob(base64);
        var byteArrays = [];

        for (var offset = 0, len = byteChars.length; offset < len; offset += sliceSize) {
            var slice = byteChars.slice(offset, offset + sliceSize);

            var byteNumbers = new Array(slice.length);
            for (var i = 0; i < slice.length; i++) {
                byteNumbers[i] = slice.charCodeAt(i);
            }

            var byteArray = new Uint8Array(byteNumbers);

            byteArrays.push(byteArray);
        }

        return new Blob(byteArrays, { type: mime });
    }

Below is my webapi server code in C#. The file is saved as "thisimage.jpg" as appended in my FormData in javascript.

      public string Post(string id)
    {
        string result = null;
        var httpRequest = HttpContext.Current.Request;
        string count = httpRequest.Files.Count.ToString();

            if (httpRequest.Files.Count > 0)
            {
                var postedFile = httpRequest.Files[0];
                var filePath = "c:/inetpub/wwwroot/pics/" + postedFile.Filename;
                postedFile.SaveAs(filePath);
     //  File is saved as "thisimage.jpg" 
            result = "File saved as " + filePath;
            }

        else
        {
            result = "Upload failed";
        }
        return result;
    }

Dave · Accepted Answer · 2018-05-29 16:29:28Z

1

It now works! I had a typo in my postedfile address. So now it works and this is an example of how to upload a blob to a server using Webapi and javascript. I added a string value id to my post and used that to give the file a name.

edited May 29, 2018 at 16:29

answered May 29, 2018 at 16:22

Dave

9232 gold badges15 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kaiido Over a year ago

There is a third param in FormData.append which is the filename of the Blob.

David Newcomb Over a year ago

Thanks for keeping it up as an example, that was just what I was looking for!

Collectives™ on Stack Overflow

How to upload blob and convert to image in webapi

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related