2

i am tring

 const [image, setImage] = useState('');
 useEffect(() => {
    sessionStorage.setItem('image', JSON.stringify(image));

    let localImage = JSON.parse(sessionStorage.getItem('image'));
    console.log(localImage);
    console.log(image);
  }, [image]);

  <input type="file" onChange={() => setImage(e.target.files[0])} 
    accept="image/*" />;

variable localImage gives me image file but not a blob file

I want a blob for send to server

Dinesh Jangir
  • 21
  • 2
  • image is a state (real image file) – Dinesh Jangir Jul 27 '22 at 10:43
  • Is there any reason you are storing image in localStorage? – kiranvj Jul 27 '22 at 10:50
  • when i send localImage to server its giving me [object, object] not an original image i am trying to send this image to server after refreshing tha page . – Dinesh Jangir Jul 27 '22 at 10:53
  • So your use case is to upload user selected image after page refresh. For this convert the image to base64 and store in localStorage. [This](https://stackoverflow.com/questions/18650168/convert-blob-to-base64) and [this](https://stackoverflow.com/questions/19183180/how-to-save-an-image-to-localstorage-and-display-it-on-the-next-page) will give some info – kiranvj Jul 27 '22 at 10:57
  • how to convert base64 to image – Dinesh Jangir Jul 27 '22 at 11:41
  • That depends on what is your backend. In node check this [Convert a Base64 data into an Image in Node.js](https://dev.to/dnature/convert-a-base64-data-into-an-image-in-node-js-3f88). If you want to show this in browser you can use the base64 data to create a data url and assign this to `src` of the img tag – kiranvj Jul 27 '22 at 13:29
  • i went to convert in front end if possible. is this possible ? – Dinesh Jangir Jul 28 '22 at 07:28

0 Answers0