C#•2y ago

✅ End point can't take byte[] from HTTP Request. Only int[].

//model
public int[]? coverImage { get; set; }

//model
public int[]? coverImage { get; set; }

//In a function
var coverimg_file = coverImg_input.files;
if (coverimg_file && coverimg_file[0]) {
     var file = coverimg_file[0];
     formData.coverImage = await ImageToByteArray(file);
     //coverImage!: Number[] | null;
     //ArrayBuffer type didn't work, idk i didn't dig in too much
}

async function ImageToByteArray(file: File): Promise<Number[] | null> {
    return new Promise((resolve) => {
        const reader = new FileReader()
        reader.onloadend = () => {
            var data = reader.result as ArrayBuffer | null;
            if (data != null) {
                return resolve([...new Uint8Array(data)]);
            }
            else {
                return resolve(null);
            }
        };
        reader.readAsArrayBuffer(file);
    })
}

//Fetch init;
{
    method: 'POST',
    headers: {
       'Accept': 'application/json',
       'Content-Type': 'application/json'
    },
    body: JSON.stringify(formData)
}

//In a function
var coverimg_file = coverImg_input.files;
if (coverimg_file && coverimg_file[0]) {
     var file = coverimg_file[0];
     formData.coverImage = await ImageToByteArray(file);
     //coverImage!: Number[] | null;
     //ArrayBuffer type didn't work, idk i didn't dig in too much
}

async function ImageToByteArray(file: File): Promise<Number[] | null> {
    return new Promise((resolve) => {
        const reader = new FileReader()
        reader.onloadend = () => {
            var data = reader.result as ArrayBuffer | null;
            if (data != null) {
                return resolve([...new Uint8Array(data)]);
            }
            else {
                return resolve(null);
            }
        };
        reader.readAsArrayBuffer(file);
    })
}

//Fetch init;
{
    method: 'POST',
    headers: {
       'Accept': 'application/json',
       'Content-Type': 'application/json'
    },
    body: JSON.stringify(formData)
}

If I use byte[] type, it gives me null.

30 Replies

Dusty•2y ago

The endpoint on the server? Normally u dont combine formdata and json

İrşat•2y ago

How else am I gonna do?

Pobiega•2y ago

json can't serialize byte[] you either base64 the bytes, if you wanna keep it json, or you use HTTP file transfer

İrşat•2y ago

Former, I want to use the former.

Pobiega•2y ago

okay, then just base64 the byte array into a string, then reverse that in the client

İrşat•2y ago

That went over my head.

Pobiega•2y ago

set your models datatype to "string"

İrşat•2y ago

Then turn it into byte array? in back end

Pobiega•2y ago

wait, in what direction are you doing this? are you sending data from client to backend, or from backend to client?

İrşat•2y ago

client to backend lol I am using fetch

Pobiega•2y ago

ok that should still work fine

İrşat•2y ago

https://tenor.com/view/exterminador-do-futuro-gif-20118743

Tenor

Pobiega•2y ago

https://developer.mozilla.org/en-US/docs/Web/API/atob

atob() - Web APIs | MDN

The atob() function decodes a string of data which has been encoded using Base64 encoding. You can use the btoa() method to encode and transmit data which may otherwise cause communication problems, then transmit it and use the atob() method to decode the data again. For example, you can encode, transmit, and decode control characters ...

Pobiega•2y ago

use this to turn your byte array into a string err, maybe btoa yeah, btoa => string

İrşat•2y ago

Argument of type 'Number[] | null' is not assignable to parameter of type 'string'. Type 'null' is not assignable to type 'string'. It wants a string.

Pobiega•2y ago

You're having TS problems at this point, but at least show the code in question cant very well guess what the hell you did

İrşat•2y ago

It's the await ImageToByteArray(file), everything is up there in my first comment. I did something like const asdf = btoa(await ImageToByteArray(file));

Pobiega•2y ago

https://stackoverflow.com/questions/9267899/arraybuffer-to-base64-encoded-string ? var base64String = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer))); or const base64String = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));

[HttpPost]
public IActionResult Test(ByteArrayModel model)
{
    var data = Convert.FromBase64String(model.Content);
    var joined = string.Join(", ", data.Select(x => Convert.ToString(x)).ToArray());

    return Ok(joined);
}

[HttpPost]
public IActionResult Test(ByteArrayModel model)
{
    var data = Convert.FromBase64String(model.Content);
    var joined = string.Join(", ", data.Select(x => Convert.ToString(x)).ToArray());

    return Ok(joined);
}

this works fine. obviously, you'd do something with data (which is a byte[]) instead of just printing the bytes 🙂

İrşat•2y ago

async function ArrayBufferToBase64(file: File): Promise<string | null> {
    return new Promise((resolve) => {
        const reader = new FileReader()
        reader.onloadend = () => {
            var buffer = reader.result as ArrayBuffer | null;
            if (buffer != null) {
                var binary = '';
                var bytes = new Uint8Array(buffer);
                var len = bytes.byteLength;
                for (var i = 0; i < len; i++) {
                    binary += String.fromCharCode(bytes[i]);
                }
                return resolve(window.btoa(binary));
            }
            else {
                return resolve(null);
            }
        };
        reader.readAsArrayBuffer(file);
    })
}

async function ArrayBufferToBase64(file: File): Promise<string | null> {
    return new Promise((resolve) => {
        const reader = new FileReader()
        reader.onloadend = () => {
            var buffer = reader.result as ArrayBuffer | null;
            if (buffer != null) {
                var binary = '';
                var bytes = new Uint8Array(buffer);
                var len = bytes.byteLength;
                for (var i = 0; i < len; i++) {
                    binary += String.fromCharCode(bytes[i]);
                }
                return resolve(window.btoa(binary));
            }
            else {
                return resolve(null);
            }
        };
        reader.readAsArrayBuffer(file);
    })
}

Successfully turned the array into string It's super duper long tho 😄 the string it gave me i mean

Pobiega•2y ago

well yes representing an image as a string isnt very space efficient

İrşat•2y ago

would it have problem with traffic? Costs more? Let me do the reverse too in the meantime

Pobiega•2y ago

byte[] Convert.FromBase64String(string input) is all you need on the server side

İrşat•2y ago

what about joined

Pobiega•2y ago

that was just something I had to "debug" it ie, print the raw bytes

İrşat•2y ago

I see

Pobiega•2y ago

you probably don't want to do that :p

İrşat•2y ago

Let's try this bad boy now

İrşat•2y ago

Heh heee boooii

Pobiega•2y ago

"Internet guy", really? 😛

İrşat•2y ago

Thank you, kind internet guy Let's close this, once again thank you. /close

Gaming

Programming

✅ End point can't take byte[] from HTTP Request. Only int[].