How do I prevent the uploaded photo from being deleted when the page is refreshed?

Question

I have an input for uploading the image in my project that I have implemented with reactjs.

So far, there is no problem, but after uploading the photo, when the user refreshes the page, the photo will be deleted.

How can I prevent the photo from being deleted when the page is refreshed?

Edited:

The file upload component gives me an object that I save as a blob in the state to render. And I also save the same object in the state to send it to the server

<Stack sx={Styles.CameraAndGallaryBox}>
  <input
    accept="image/*"
    style={{ display: "none" }}
    id="raised-button-file"
    type="file"
    onChange={saveImageHandler}
  />
  <label htmlFor="raised-button-file">
    <Button variant="raised" component="span" sx={Styles.button}>
      <Gallary />
      <FormattedMessage id="gallary" />
    </Button>
  </label>
</Stack>

const saveImageHandler = (e) => {
  history.push("/meta-search/image/visual-search");
  dispatch(setImageBlobUrl(URL.createObjectURL(e.target.files[0]))); // for rendering
  dispatch(setImageFile(e.target.files[0])); // to send to the server
  dispatch(visualImageSearch({page:1})); // call api and send photo to server
};

You can persist the photo inside the local storage of the browser depending upon type of your photo. When use refreshes the page, check if you have any photo in your localstorage, if yes then retrieve that and set it into the state. — Shubham Waje, Feb 15 '23 at 06:32
The photo is deleted from where? It won't be deleted from the user's system, and it won't be deleted from the server unless you delete it. — Tim Roberts, Feb 15 '23 at 06:33
are you uploading to some server ? s3 ? then on refresh useffect make an ajax call to return the image — Shoyeb Memon, Feb 15 '23 at 06:56
do you upload to the server or not? or is it just an app that doesn't include the api system logic? — Tachibana Shin, Feb 15 '23 at 06:58
@TimRoberts Dear, I edited my question. If it is still unclear, tell me to explain more — hossein ketabi, Feb 15 '23 at 07:16
if so then there's no reason why it's deleted did you call the data back from the server when mounting the component? — Tachibana Shin, Feb 15 '23 at 07:27
The server belongs to another team and now I can't ask them to give me the possibility to request the photo from them. I was looking for an easier way :) As @ShubhamWaje said, can I save in localstorage? — hossein ketabi, Feb 15 '23 at 07:33
Hi, the best way would be to store it in the server and fetch it but if you want to store it locally it would be better to use indexDB instead of localstorage — Ali Sattarzadeh, Feb 15 '23 at 07:37

How do I prevent the uploaded photo from being deleted when the page is refreshed?

0 Answers0