Image breaks after refreshing page (useEffect included, working on my PC)

Support
1

I use Dropzone hook and useEffect for keeping state after refreshing page. Everything is working great, but image breaks after refreshing.

GitHub link: GitHub - nepriyatnoe/test-project
Preview link: https://main--incandescent-pithivier-3117a6.netlify.app/

import React, { useState } from "react"
import { useEffect } from "react";
import { useDropzone } from "react-dropzone"
import "./dropbox.css"


function UploadBox() {
  const [files, setFiles] = useState([])

  const [visibility, setVisibility] = useState({ visibility: 'visible' });

  const { getRootProps, getInputProps } = useDropzone({
    accept: "image/*",
    onDrop: (acceptedFiles) => {
      setFiles(
        acceptedFiles.map((file) =>
          Object.assign(file, {
            preview: URL.createObjectURL(file),
          })
        )
      )


      changeVisibility();
    },

  });

  function changeVisibility() {
    setVisibility({ visibility: 'hidden' });
  };

  useEffect(() => {
    const data = window.localStorage.getItem('MY_VISIBILITY_STATE');
    if (data !== 'hidden') setVisibility(JSON.parse(data));

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    window.localStorage.setItem('MY_VISIBILITY_STATE', JSON.stringify(visibility));
  }, [visibility]);

  function onDropAccepted(acceptedFiles) {
    setFiles(acceptedFiles)
  };

  useEffect(() => {
    const data = window.localStorage.getItem('MY_IMAGE_STATE');
    if (data !== files) setFiles(JSON.parse(data));

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    window.localStorage.setItem('MY_IMAGE_STATE', JSON.stringify(files));
  }, [files]);



  return (
    <div className="container">
      <div className="input-box">
        <div className="input-image">
          { Array.isArray(files)
        ? files.map((file) => (
              <div key={file.name}>
                <div>
                  <img src={file.preview} style={{ maxWidth: "400px", maxHeight: "400px", alignSelf: 'center' }} alt="preview" />
                </div>
              </div>
            ))
          : null}
        </div>
        <div className="image-upload-button" style={visibility}>
          <div {...getRootProps()} onDrop={onDropAccepted}>
            <input {...getInputProps()} type='file' />
            <img src="https://img.icons8.com/pastel-glyph/64/null/upload--v1.png" className="upload-png" alt="upload" />
            <p>PNG, JPEG files only</p>
          </div>
        </div>
      </div>

    </div>


  )
}

export default UploadBox;
2

I don’t see how this is a Netlify-specific question.

But to answer your question, I’d suggest converting the image to base64 and saving that in localstorage instead of trying to store the blob directly.