Hello I'm trying to get the blob file I get from pasting the picture from clipboard in my JavaScript to be on imagebytes
component on my razor page, but I get the error saying The JSON value could not be converted to System.Byte[]
JavaScript:
(function () {
var blob = null;
window.onload = function () {
document.getElementById('txtPaste').focus();
document.getElementById('txtPaste').onpaste = function (event) {
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
console.log(JSON.stringify(items));
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf("image") === 0) {
blob = items[i].getAsFile();
}
}
if (blob !== null) {
var reader = new FileReader();
reader.onload = function (event) {
console.log(event.target.result);
document.getElementById("imgPaste").src = event.target.result;
document.getElementById("hfByteData").value = event.target.result;
};
reader.readAsDataURL(blob);
}
}
};
window.getBlob = function () {
return (blob);
}
})();
Razor page:
<textarea id="txtPaste" placeholder="Paste Image Here" style="height: 100px;" @onclick="UploadImage"></textarea>
<img id="imgPaste" src=""/>
<input type="hidden" name="hfByteData" id="hfByteData" runat="server"/>
<button class="btn-primary" @onclick="ShowImageData"> Show Image Data</button>
private async Task UploadImage()
{
await JSRuntime.InvokeVoidAsync("onload");
}
public byte[] imagebytes { get; set; }
async Task ShowImageData()
{
imagebytes = null;
imagebytes = await JSRuntime.InvokeAsync<byte[]>("getBlob");
}
Is it something that I'm missing? Do I have to somehow convert it in the JavaScript?