Saving javascript image blob to ASP.NET Core Controller

Question

Good day,

I'm trying to send a javascript blob image to my controller method in ASP.NET Core but it doesn't go to my controller.

I have an image from my canvas and it's dataUri to be able to convert it to javascript blob, I'm using this code:

dataURItoBlob(dataURI) {
// convert base64 to raw binary data held in a string
// doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
var byteString = atob(dataURI.split(',')[1]);

// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

// write the bytes of the string to an ArrayBuffer
var ab = new ArrayBuffer(byteString.length);

// create a view into the buffer
var ia = new Uint8Array(ab);

// set the bytes of the buffer to the correct values
for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
}

// write the ArrayBuffer to a blob, and you're done
var blob = new Blob([ab], { type: mimeString });
return blob;
}

// Then in my save method here are my javascript codes:
const fileImage = this.dataURItoBlob(myDataUriImage);

axios.post(`Info/Create`, fileImage , {
headers: {
    "Content-Type": "multipart/form-data"
    }
})

Here is my simple ASP.NET Core controller method

public async Task<IActionResult> Create([FromBody]IFormFile fileImage)
{
 ...
}

Any help please?

Answer 1

To post a file via AJAX, you need the FormData JS class.

var formData = new FormData();
formData.append('fileImage', fileImage);

Then, you submit formData instead of fileImage as the data in your post.

Bear in mind that submitting a file via AJAX requires HTML5, which therefore requires a modern browser. That doesn't seem to be an issue as you're already making heavy use of the File API, which is also HTML5. Just be aware that none of this is going to work in something like IE10 or less.

Also, this is only for requests with a multipart/form-data mime type, as you're using here. For reference, if you want to send JSON, the file needs to be encoded as a Base64 string and sent as just another member of the JSON object. On the server-side, you then need to bind to byte[] instead of IFormFile.