react-player uploading and playing new video

Question

I am uploading video through express server to react's public folder and using hook for the name of the file. If its a large video file, after uploading react player starts playing it correctly. But if the file is small, player doesn't run it and I have to reload after some time then it works. Also if a small file is uploaded after a large file it returns an error range not satisfiable. React-player:

<ReactPlayer
      url={
        filePath
      }
      class="react-player" width="100%"
      ref={ref}
      controls={true}
      onDuration={setDuration}
    />

Axios connection:

useEffect(() => {
const request = () => {
  if (serverPath === 'http://localhost:5000/upload') {
    const datatoSend = new FormData()
    datatoSend.append('file', myFile)
    const fetchdata = async () => await axios.post(serverPath, datatoSend, {
      onUploadProgress: ProgressEvent => {
        setLoaded(ProgressEvent.loaded / ProgressEvent.total * 100)
      }
    })
    const result = fetchdata()
     result.then(res => {

      if (res.data ==='Server Connected') {
        setFilePath('CurrentMedia.mp4')
      }
    })
  }
 }
}, [serverPath])

Express Code:

app.post("/upload", async (req, res) => {
    console.log('/ route called')

    const file = req.files.file

    await file.mv(`${__dirname}/client/public/CurrentMedia.mp4`, (err) => {
    if (err) {
        console.error(err);
        return res.status(500).send(err);
    }
    res.send('Server Connected');
 });

})

score 0 · Answer 1 · answered Jul 21 '20 at 13:27

I was able to solve it by saving the file by a different name every time new file is uploaded. The problem was with react-player trying to run a new video file with the same name. Since the name of the file was same it ran the one it had cached before.

just doing this in express and updating hooks in react respectively fixed it

app.post("/upload",  async (req, res) => {
console.log('/ route called')

const file = req.files.file
const name = file.name

file.mv(`${__dirname}/public/${name}`, (err) => {
if (err) {
  console.error(err);
  return res.status(500).send(err);
}
res.send('Server Connected');
console.log('Server Connected')
});
})

react-player uploading and playing new video

1 Answers1