im trying to make a social media website that you can upload videos and it will play them on the home screen. Im having problems where you can see the video you clicked on in the upload page but as soon as it refreshes the video disappears and it only shows a black screen on the video. It is on a localhost right now, which I think is the reason it wont work.

this is the link that im getting from the database: blob:http://localhost:3000/1e655870-bb8e-44e5-b35b-8a9012d31116

is there a way to make a link to a video that always exists?

here is the upload page:

 const [files, setFiles] = useState([]);
 const [title,setTitle] = useState("");
 const [userData, setUserData] = useState([])

 const onDrop = useCallback(acceptedFiles => {
   setFiles(acceptedFiles.map(file => Object.assign(file, {
   preview: URL.createObjectURL(file)
 })));
}, []);

const {
getRootProps,
getInputProps,
isDragActive,
isDragAccept,
isDragReject
} = useDropzone({
onDrop,
accept: 'video/mp4'
});

  const style = useMemo(() => ({
...baseStyle,
...(isDragActive ? activeStyle : {}),
...(isDragAccept ? acceptStyle : {}),
...(isDragReject ? rejectStyle : {})
 }), [
isDragActive,
isDragReject,
isDragAccept
]);

 const thumbs = files.map(file => (
<div key={file.name}>
  <video
  className="videoPrev"
    src={file.preview}
    alt={file.name}
    controls
    style={{maxHeight:"100mm",maxWidth:"100mm"}}
  />
  
</div>
));

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

files.map(file => console.log(file.preview));
 },[])


 // clean up
 useEffect(() => () => {
  files.forEach(file => URL.revokeObjectURL(file.preview));
 }, [files]);

 function handleSubmit(){
 const url = files.map(file => (file.preview)).toString();
PostService
  .create(userData.username,title,url)
  .then(data => {
      //window.location = "/";
      console.log(data);

  }).catch(err => {
      console.log(err.message);
  });

 }