How to get file from input tag in react client side app

Question

I am creating a react app that downloads youtube videos when given their URL. I am using this npm package to help download the files. I keep on getting the error:

TypeError: fs__WEBPACK_IMPORTED_MODULE_3___default.a.createWriteStream is not a function

I think the problem is that client-side requires that the user uploads a file and I'm not super sure how to do that. I know that I can use an input tag like:

<input
      type="file"
      id="fileInput"
      name="UserFile"
      onChange={this.handleClick(this.files)}
    />

Then, In my HandleClick method, I have to use ytdl(url).pipe("file inputted by user");

however, I do not know how to get the user's file from the input tag. I have left my recent code below. Please let me know if you guys need anymore information or if I was not clear about anything. Thank you!

import React from "react";
import "../../css/Widget.css";
import ytdl from "ytdl-core";
import fs from "fs";

// https://github.com/fent/node-ytdl-core
// npm install ytdl-core@latest

//const fs = require("fs");
//const ytdl = require("ytdl-core");

class VideoDownload extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      videoURL: "",
    };
  }

  handleClick = (idk) => {
    var input = this.refs.myInput;
    //var url = input.value;
    var url = "https://www.youtube.com/watch?v=OISEEL5eBqg";
    //console.log(url);

    let userInput = document.getElementById("fileInput");
    //console.log("userInput: ", userInput);
    console.log("idk: ", idk);

    //ytdl(url).pipe(fs.createWriteStream("trial.flv"));

    /*
    need this:
    ytdl(url).pipe("file that the user inputted")

    */
  };

  render() {
    return (
      <div className="VD-Main">
        <h1>Video Downloader</h1>
        <input
          type="file"
          id="fileInput"
          name="myfile"
          onChange={this.handleClick(this.files)}
        />
        <input type="text" ref="myInput" placeholder="Enter Youtube URL" />
        <input
          className="inputButton"
          type="button"
          value="Enter Link"
          onClick={this.handleClick}
        />
      </div>
    );
  }
}

export default VideoDownload;

Answer 1

That's how you can do it

handleClick(event) {
    const reader = new FileReader();
    
    reader.onloadend = () => {
        //handle 'reader.result' as you like
    }

    reader.readAsDataUrl(event.target.files[0]);
}