Im trying to play videos that I get from the server but the videos dont show anything and im getting this error in the console: Failed to load resource: net::ERR_FILE_NOT_FOUND.

this is what the links im trying to play from the server looks like: "blob:http://localhost:3000/fd2ba95b-480a-4a46-baf0-8423e1163f7e"

here is the upload form that uploads videos to the server.

export default function Previews(props) {
  const [files, setFiles] = useState([]);
  const [title,setTitle] = useState("");
  const [userData,setUserData] = useState([]);

useEffect(() => {
  const currentUser = AuthService.getCurrentUser();

  AuthService.getUser(currentUser.id).then(results => {
      console.log(results.data.user);
      setUserData(results.data.user);
  }).catch(err => {
      console.log(err.message);
  });
},[])

const {getRootProps, getInputProps} = useDropzone({
  onDrop: acceptedFiles => {
  setFiles(acceptedFiles.map(file => Object.assign(file, {
    preview: URL.createObjectURL(file),
  })));
}
});

const thumbs = files.map(file => (
  <div style={thumb} key={file.name}>
    <div style={thumbInner}>
    <img
      autoPlay={true}
      src={file.preview}
      style={img}
      alt="src"
    />
  </div>
</div>
));



 useEffect(() => {
// Make sure to revoke the data uris to avoid memory leaks
files.forEach(file => URL.revokeObjectURL(file.preview));
}, [files]);

   const upload = () => {

const url = files.map(file => (file.preview)).toString();
PostService
  .create(userData.username,title,url)
  .then(() => {
      window.location = "/"; 
      console.log(url);
  }).catch(err => {
      console.log(err.message);
  });
  
}

  return (
<div className="notborder">
    <h1><strong>Upload</strong></h1>
    <br/>
    <h2>Add Caption</h2>
    <center>
         <input value={title} onChange={(e) => setTitle(e.target.value)} className="addtitle"/>
    </center>
    <center>
    <button onClick={upload} className="upload-btn">upload</button>
    </center>
  <section className="contained">
      <center>
      <div {...getRootProps({className: 'dropzone'})}>
        <input {...getInputProps()} />
        <p className="dragndrop">drop files here, or click to select files</p>
      </div>
      </center>
  <center>
  <aside style={{borderBottom:"none"}} >
    {thumbs}
  </aside>
      
  </center>
</section>
</div>
);
}