Next.js Discord

Discord Forum

how do i make a video preview with react dropzone

Answered
American black bear posted this in #help-forum
Open in Discord
American black bearOP
i am trying to create a video preview with react dropzone but i cannot seem to get it done. i want the dropzone to be replaced with the video preview as soon as the file is dropped and I cannot seem to find a way to do so.
Answered by American Crow
here is an example with images and image previews. Should be at least similar:
https://mantine.dev/x/dropzone/#images-previews
View full answer

14 Replies

American Crow
here is an example with images and image previews. Should be at least similar:
https://mantine.dev/x/dropzone/#images-previews
Answer
@American Crow here is an example with images and image previews. Should be at least similar: https://mantine.dev/x/dropzone/#images-previews
American black bearOP
this is a valid dropzone library but i cant seem to make it so that when i drop a video in the dropzone, the dropzone goes away and the video player replaces the dropzone ;/
American black bearOP
bump
American black bearOP
bump
American black bearOP
bump pls someone help
Brown bear
Perhaps have some state that you set, then conditionally hide the dropzone, and render a video player component?
@Brown bear Perhaps have some state that you set, then conditionally hide the dropzone, and render a video player component?
American black bearOP
i tried but it gave me an infinite render error
American black bearOP
bump im desperate pls send help
averydelusionalperson
why are you not able to do it?
it should be pretty similar to image preview right?
@averydelusionalperson it should be pretty similar to image preview right?
American black bearOP
there are 2 main issues:
- the first one is that i cant seem to make the video play in the preview, it is just a static image (already replaces <Image> with a video player or just <video> but did not work
- the second one is that i want the preview to replace the dropzone and i cant seem to do that either cause if i use "useState" and try with that, it gives me an infinite render error
American black bearOP
  const previews = files.map((file, index) => {
    const imageUrl = URL.createObjectURL(file);
    setVideo(true)
    console.log(imageUrl)
    return  <video src={imageUrl}></video>;
  });

...

{video ? (
  previews
 ):(
  <Dropzone accept={"video/*"} onDrop={setFiles}>
    <Text ta="center">Drop images here</Text>
  </Dropzone>

)}
i changed the code found here: https://mantine.dev/x/dropzone/#images-previews
joulev
any follow-up discussions please continue in the sequel of this thread: https://nextjs-forum.com/post/1221858202707038258