How to get byte array from a file in reactJS

Question

I've got a form for uploading Avatar image and I have to send the image file in the format of binary string; so far I've tried ReadAsBinaryString from FileReader but it's not working:( here's my code:

<form onSubmit={this.onFormSubmit}>
      <div className="row justify-content-center mb-2">
           <input type="file" id="avatar"  accept="image/png, image/jpeg" 
            onChange={this.uploadedImage} />
           <button type="submit" className="btn btn-sm btn-info">Send</button>
       </div>
  </form>

and that is how I'm trying to use ReadAsBinaryString in uploadedImage function:

uploadedImage(e) {
    let reader = new FileReader();
    let file = e.target.files[0];
    console.log(file); //I can see the file's info
    reader.onload= () => {
        var array = new Uint32Array(file);
        console.log("_+_array:",array); // the array is empty!
        var binaryString = String.fromCharCode.apply(null,array) ;
        console.log("__binaryString:",binaryString);
      this.setState({
        file: binaryString
      },()=>{
        console.log(this.state.file);//ergo file is set to an empty image
    });
    }
    reader.readAsArrayBuffer(file)
}

so to sum it up, I get a file but I can't convert it to byte array; Is there anything wrong with this code or this approach is completely wrong?

What are you trying to do? Are you wanting to display the avatar image without uploading it to a server? — Dacre Denny
– Dacre Denny, Commented May 6, 2019 at 8:07
this is wrong var array = new Uint32Array(file); you are using file info variable to read the data, instead you should use the data passed to handler — Nikos M.
– Nikos M., Commented May 6, 2019 at 8:08
@DacreDenny I'm trying to get the image and then send it as a byte array to the server, U see the byte array is part of a data that I have to send to the backend API, I mean due to back-end restrictions, I have to convert the file to byte array and that is a must — BlackSheep
– BlackSheep, Commented May 6, 2019 at 8:11

tomericco · Accepted Answer · 2019-05-06 08:15:24Z

26

This approach worked for me:

function readFileDataAsBase64(e) {
    const file = e.target.files[0];

    return new Promise((resolve, reject) => {
        const reader = new FileReader();

        reader.onload = (event) => {
            resolve(event.target.result);
        };

        reader.onerror = (err) => {
            reject(err);
        };

        reader.readAsDataURL(file);
    });
}

You can call reader.readAsBinaryString() if you wish to use binary string. More here: https://developer.mozilla.org/en-US/docs/Web/API/FileReader

answered May 6, 2019 at 8:15

tomericco

1,6143 gold badges22 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

NumanCS Over a year ago

How to check Return response and file date after convert to binary ?

seyedBardiaShams Over a year ago

with .then((res)=>console.log("result", res)); you can see results on the console and save them to a variable then you can change that. ----> return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = (event) => { resolve(event.target.result); }; reader.onerror = (err) => { reject(err); }; reader.readAsDataURL(file); });.then((res)=>console.log("resdfsdfs",res));

Yilmaz · Accepted Answer · 2022-11-25 06:16:51Z

2

    const file = e.target.files[0];
    // we need to get the raw bytes
    const buffer = await file.arrayBuffer();
    // each entry of array should contain 8 bits
    const bytes = new Uint8Array(buffer);

answered Nov 25, 2022 at 6:16

Yilmaz

51k19 gold badges226 silver badges278 bronze badges

Comments

Nikos M. · Accepted Answer · 2019-05-06 08:11:55Z

You are trying to read the file data using the file variable which contains the file info not the file contents. Try sth like the following:

FileReader documentation

uploadedImage(e) {
    let reader = new FileReader();
    let file = e.target.files[0];
    console.log(file); //I can see the file's info
    reader.onload= () => {
        var array = new Uint32Array(reader.result); // read the actual file contents
        console.log("_+_array:",array); // the array is empty!
        var binaryString = String.fromCharCode.apply(null,array) ;
        console.log("__binaryString:",binaryString);
      this.setState({
        file: binaryString
      },()=>{
        console.log(this.state.file);//ergo file is set to an empty image
    });
    }
    reader.readAsArrayBuffer(file)
}

Etienne Salimbeni · Accepted Answer · 2021-11-29 14:58:51Z

0

Just to add to tomericco's answer, here is one with few more lines to get the actual final byte array :

 const test_function = async () => {

      ... ... ...

      const get_file_array = (file) => {
          return new Promise((acc, err) => {
              const reader = new FileReader();
              reader.onload = (event) => { acc(event.target.result) };
              reader.onerror = (err)  => { err(err) };
              reader.readAsArrayBuffer(file);
          });
       }
       const temp = await get_file_array(files[0])
       console.log('here we finally ve the file as a ArrayBuffer : ',temp);
       const fileb = new Uint8Array(fileb)

       ... ... ...

  }

where file is directly the File object u want to read , this has to be done in a async function...

edited Nov 29, 2021 at 14:58

answered Nov 29, 2021 at 14:44

Etienne Salimbeni

5926 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to get byte array from a file in reactJS

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related