0

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?

MariusG96
  • 87
  • 2
  • 9

0 Answers0