How to get file from input tag in react client side app - node.js

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]);
}