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.

Pranay Tripathi · Accepted Answer · 2020-09-22 19:59:21Z

2

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.

answered Sep 22, 2020 at 19:59

Pranay Tripathi

1,8522 gold badges19 silver badges31 bronze badges

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

1 Comment

JakeDigsForAnswers Over a year ago

Of course!! I had been using it to store the URL for my previous iteration. Thank you very much for pointing this out!

Collectives™ on Stack Overflow

ReactJS - FileReader readAsArrayBuffer an image file

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related