Kevin Powell - Community•9mo ago

Nextjs : How to use query to pass images between routes?

Inside a route that is called Story, I am taking an image file input from the user, then trying to use query which I think is the best way to transfer that image in to another route and let me from displaying that image there. Here the problem comes in, for some reason the image is not being displayed in that route which is the home, also no error occur, so I do not know what exactly leads for this problem. Story route code:

router.push(`/?image=${URL.createObjectURL(selectedFile)}`);

router.push(`/?image=${URL.createObjectURL(selectedFile)}`);

The selectedFile value is an object that comes from the event.target.File[0], which contain the name, size, type... Home route code:

  const [fileList, setFiles] = useState();
  const { image } = router.query || {};

  useEffect(() => {
    if (image) {
      handleFileUpload(image);
    }
  }, [image]);

  const handleFileUpload = (image) => {
    setFiles(<img src={image} alt="Story" />)
  };

return (
  {fileList}
)

  const [fileList, setFiles] = useState();
  const { image } = router.query || {};

  useEffect(() => {
    if (image) {
      handleFileUpload(image);
    }
  }, [image]);

  const handleFileUpload = (image) => {
    setFiles(<img src={image} alt="Story" />)
  };

return (
  {fileList}
)

so this is the whole thing, if you need anymore details let me know.

2 Replies

KiritsuOP•9mo ago

Is there an another method to achieve the same result?

yuki_toki•9mo ago

what if you store the image somewhere, get the url then pass the imageurl as props to your new location

Gaming

Programming

Nextjs : How to use query to pass images between routes?