Retaining selected image state on closePopup in React component

Question

I'm encountering an issue with a React component where I'm implementing functionality to upload images. When the user selects an image using the file input, the selected image is displayed within a popup. However, when the user clicks on the closePopup button, the selected image is cleared, preventing it from being saved to the backend.

  const openPopup = () => {
    setIsPopupOpen(true);
  };

  const closePopup = () => {
    setIsPopupOpen(false);
  };

const handleImageChange = (e, index) => {
    const file = e.target.files[0];
    if (file) {
      const imageUrl = URL.createObjectURL(file);
      setImages(`img${index}`, imageUrl);
    }
  };

     <button
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
        onClick={openPopup}
      >
        Open Popup
      </button>

      {isPopupOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center overflow-auto bg-gray-800 bg-opacity-75">
          <div className="bg-white rounded-lg p-8">
            <h2 className="text-xl font-semibold mb-4">Upload Image</h2>
            <input
              type="file"
              id="img2"
              className="block w-full border-gray-400 p-2 rounded"
              accept="image/*"
              onChange={handleImageChange}
            />
            <button
              className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
              onClick={closePopup}
            >
              Close
            </button>
          </div>
        </div>

i want when user click on closepop still selected image should present there so that it saved at MongoDB else as of now when i click on close popup it clear the field and that image not saving on mongodb

Booster · Accepted Answer · 2024-02-20 11:15:44Z

0

To enable the storage of images in the database, it is imperative to develop a corresponding handler. This involves invoking an API upon modal closure to facilitate the seamless storage of the image in the database. Additionally, should retrieval of the image be necessary, the implementation of a corresponding GET API is essential.

An alternative approach involves utilizing the localStorage feature to temporarily store the image. This provides an efficient and practical solution for managing images within the system.

answered Feb 20, 2024 at 11:15

Booster

1811 gold badge2 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

hussain ashraf Over a year ago

i already setup the post and the get api along with handler i want to know how to manage the state of the selected imager after closing the popup

Booster Over a year ago

what're you trying to do with setImages(img${index}, imageUrl); Is it you want to maintain an object?

hussain ashraf Over a year ago

yes maintaing a object

Booster Over a year ago

ok, then its an definition issue. you can use setImages({img${index}: imageUrl}) you were missing curly brackets.

Collectives™ on Stack Overflow

Retaining selected image state on closePopup in React component

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related