CODEWITHSUNDEEP
javascriptreactjs
Asnim P Ansari
Asnim P Ansari

Reputation: 2477

How to process large files efficiently in react.js

I am trying to render the hex values in a file uploaded using react. When I upload big files, say 10MB, the page crashes, but sites like http://mikach.github.io/hex-editor/ works like a charm. I don't understand what am I doing wrong.

Below is the code which does the same

import React from "react";

class App extends React.PureComponent {
  constructor(props) {
    super(props);
    this.fileReader = null;
    this.state = {
      filecontent: [],
      decodingSection: [
        { type: "BigUint64", startIndex: "0", endIndex: "0" },
        { type: "BigUint64", startIndex: "0", endIndex: "0" }
      ]
    };
  }

  handleFileRead = () => {
    const typedArray = new Uint8Array(this.fileReader.result);
    const untypedArrray = [];
    const iii = typedArray.values();

    while (true) {
      const { value, done } = iii.next();

      if (done) {
        break;
      }

      const hexValue = value.toString(16);

      untypedArrray.push(hexValue.length === 1 ? `0${hexValue}` : hexValue);
    }

    this.setState({
      filecontent: untypedArrray
    });
  };

  handleFileChosen = file => {
    this.fileReader = new FileReader();
    this.fileReader.onloadend = this.handleFileRead;
    this.fileReader.readAsArrayBuffer(file);
  };

  render() {
    return (
      <div>
        <input
          type={"file"}
          id={"file"}
          onChange={e => this.handleFileChosen(e.target.files[0])}
        />
        <br />
        {this.state.filecontent.length > 0 && (
          <div>No Bytes present {this.state.filecontent.length}</div>
        )}
        {this.state.filecontent.map(each => `${each} `)}
      </div>
    );
  }
}

export default App;

Upvotes: 0

Views: 2255

Answers (1)

Alex Demidoff
Alex Demidoff

Reputation: 399

One possible cause could be the map this.state.filecontent.map(each => '${each} ') in the render method, thought I'm not sure.

I slightly modified the code, so that it saves the whole character sequence into a string called contents (using the array's join method) and then renders it at once.

You can take a look and give it a try here. At least, it worked for me on a 10Mb file :)

Upvotes: 1

Related Questions