Kiritsu Posts - Answer Overflow

Kiritsu

•Created by Kiritsu on 3/2/2024 in #front-end

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.

3 replies

KPCKevin Powell - Community

•Created by Kiritsu on 3/1/2024 in #front-end

Display image query in Nextjs

I take an image input from the user in a route called story, then I used useRoute query to navigate to the home route with the image as a query, then I entered it inside the image tag to display it, but nothing was displayed, and without any error to let me know from where the problem is coming from, this is the code that is used to display the image:

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

  const handleFileUpload = async (imageURL) => {
    try {
      const response = await fetch(imageURL);
      const blob = await response.blob();
      const dataURL = URL.createObjectURL(blob);
      setFiles((previous) => [
        ...previous,
        <div className="bg-white rounded-lg h-60 w-36 hover:brightness-95 shadow-md">
          <div className="bg-gray-400 flex h-3/4 rounded-t-lg">
            <Image
              src={dataURL}
              alt="Story"
              fit
            />
          </div>
        </div>,
      ]);
    } catch (error) {
      console.error("Error uploading image:", error);
    }
  };

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

  const handleFileUpload = async (imageURL) => {
    try {
      const response = await fetch(imageURL);
      const blob = await response.blob();
      const dataURL = URL.createObjectURL(blob);
      setFiles((previous) => [
        ...previous,
        <div className="bg-white rounded-lg h-60 w-36 hover:brightness-95 shadow-md">
          <div className="bg-gray-400 flex h-3/4 rounded-t-lg">
            <Image
              src={dataURL}
              alt="Story"
              fit
            />
          </div>
        </div>,
      ]);
    } catch (error) {
      console.error("Error uploading image:", error);
    }
  };

The image query value is created by URL.createObjectURL in the story route, I think this is all the details, if you need anymore info to know the problem please let me know.

1 replies

KPCKevin Powell - Community

•Created by Kiritsu on 1/27/2024 in #front-end

Nextjs Layout

Hello, I want to ask about a way to remove the root layout from displaying in a certain component file, I tried many things but tge root layout keeps displaying, how can I achieve this?

14 replies

Gaming

Programming