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 ponent
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?
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 ponent
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?
Share Improve this question asked Jul 6, 2018 at 4:57 jsonGPPDjsonGPPD 1,0375 gold badges17 silver badges32 bronze badges2 Answers
Reset to default 2To 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.
<html>
<head>
<style>
.fs-upload-target {
background: #fff;
border: 3px dashed #607d8b;
border-radius: 2px;
color: #455a64;
font-size: 14px;
margin: 0;
padding: 25px;
text-align: center;
-webkit-transition: background .15s linear,border .15s linear,color .15s linear,opacity .15s linear;
transition: background .15s linear,border .15s linear,color .15s linear,opacity .15s linear;
}
img {
width: 100%;
height: auto;
}
</style>
<script>
function openDialogue() {
document.getElementById('upload_file').click();
}
function preview_image() {
var total_file = document.getElementById("upload_file").files.length;
for (var i = 0; i < total_file; i++) {
$('#image_preview').append("<div class='col-md-3'><img src='" + URL.createObjectURL(event.target.files[i]) + "'></div>");
}
}
</script>
</head>
<body>
<div>
<form action="upload_file.php" method="post" enctype="multipart/form-data">
<input type="file" id="upload_file" name="upload_file[]" style="display:none" accept="image/*" onchange="preview_image();" multiple />
<div id="dropTarget" onclick="openDialogue()" class="fs-upload-target">
Drop some files here
</div>
</form>
<div class="form-group">
<div id="image_preview" class="table img-responsive table-responsive"></div>
</div>
</div>
</body>
</html>