enter image description here I am currently working on a project where I need to take an image input file from the user and display it in another route. To achieve this, I am using query parameters.
Issue: However, despite my efforts, the image is not being displayed in the desired route and no errors are being thrown.
Can someone please help me identify what might be causing this issue? Additionally, if there is a different approach that can accomplish the same goal of passing images between routes, I would appreciate any suggestions.
The code for the route containing the image is as follows:
router.push(`/?image=${URL.createObjectURL(selectedFile)}`);
The selectedFile variable stores an object obtained from: event.target.File[0]
The route where I intend to display the image includes the following code:
const [fileList, setFiles] = useState();
const { image } = router.query || {};
useEffect(() => {
if (image) {
handleFileUpload(image);
}
}, [image]);
const handleFileUpload = (image) => {
setFiles(<img src={image} alt="Story" />)
};
I have attempted various methods, including using fetch to save the image in local storage, but none have produced the expected results. Despite trying multiple approaches, the outcome remains consistent - no errors are reported, and nothing is displayed. This leads me to believe that there may be a flaw in the logic or fundamentals of the code.