ReactJS - FileReader readAsArrayBuffer an image file

Question

In a previous post I'd gotten help getting it working in node.js as a proof of concept in transforming local images into binary buffer arrays, but realized too late that I would not be able to use fs in react to complete my local image file transformation. I've tried using FileReader() as a work around without any luck. Everything I have tried has resulted in the following error message.

 Failed to execute 'readAs*******' on 'FileReader': parameter 1 is not of type 'Blob'.

Even though the documentation says it can take in a file or a blob, but I get that error when trying to manipulate a file.

Here's my source code.

import React, { useState } from "react";
import { Button, Container, Row, Col } from "react-bootstrap";
import "../../styling/FacialRecognition.css";

function FacialRecognition() {
    const [image, setImage] = useState("");

    function ProcessImage(localImage) {
       
        var reader = new FileReader();
        var imageTransformation = reader.readAsDataURL(
            localImage
        );
        console.print(imageTransformation);
    }
    return (
        <div>
            <Container fluid="xl">
                <Row>
                    <Col xs="auto">
                        <p>
                            Select a local image, and then click the
                            <b>Analyze face button.</b>
                        </p>
                    </Col>
                </Row>
                <Row>
                    <Col x="auto">
                        <label>Image to analyze: </label>
                        <input
                            type="file"
                            name="inputImage"
                            id="inputImage"
                            autoComplete="off"
                            onChange={(e) => setImage(e.target.value)}
                            style={{ width: "60%", marginLeft: "1vw" }}
                        />
                        <Button
                            variant="info"
                            onClick={() => ProcessImage(image)}>
                            Analyze face
                        </Button>
                    </Col>
                </Row>
            </Container>
        </div>
    );
}

export default FacialRecognition;

I've removed all the api calls, and now I just want to print the binaryArrayBuffer to the console. When that's figured out, it'll be easy enough to simply plug it into my axios api call.

Other changes I've tried from other users with similar issues:

  function ProcessImage(localImage) {
           
            var reader = new FileReader();
    
            var fileToRead = document.getElementById("inputImage").files[0];
    
            reader.addEventListener("loadend", function () {});
    
            var imageTransformation = reader.readAsArrayBuffer(fileToRead);
            console.log(imageTransformation);
        }

and

    function ProcessImage(localImage) {
        var reader = new FileReader();

        reader.onload = () => {
            console.log(reader.result);
        };
        var imageTransformation = reader.readAsBinaryString(localImage);
        console.log(imageTransformation);
}

Both resulting in the same parameter 1 is not of type Blob error message.

Any help or guidance on this would be appreciated.

Answer 1

For input type file onChange, you dont have value in e.target.value but in an array in e.target.files. You can access the blob in single upload e.target.files[0]. The object will be of File type whose blob you can access and work with.

 onChange={(e) => setImage(e.target.files[0])}

this should fix the issue.