I have a code where I upload only 1 image and show it but I need to upload a maximum of 5 images and be able to delete them, I don't know how to make it possible to upload more images and be able to show them in img tags

this would be my code in which I can upload only one image and show it

import React, { useState } from "react";
    import "./styles.css";
    
    const SingleImageUploadComponent = () => {
      const [file, setFile] = useState(null);
    
      function uploadSingleFile(e) {
        setFile(URL.createObjectURL(e.target.files[0]));
        console.log("file", file);
      }
    
      function upload(e) {
        e.preventDefault();
        console.log(file);
      }
    
      return (
        <form>
          <div className="form-group preview">
            {file && <img src={file} alt="" />}
          </div>
    
          <div className="form-group">
            <input
              type="file"
              className="form-control"
              onChange={uploadSingleFile}
            />
          </div>
          <button
            type="button"
            className="btn btn-primary btn-block"
            onClick={upload}
          >
            Upload
          </button>
        </form>
      );
    };
    
    export default SingleImageUploadComponent;

As I mentioned earlier I need to upload a maximum of 5 images and show them in 5 img tags since they have where I show them they have css styles

If someone could help me it would be excellent, thank you very much

I have a code where I upload only 1 image and show it but I need to upload a maximum of 5 images and be able to delete them, I don't know how to make it possible to upload more images and be able to show them in img tags

this would be my code in which I can upload only one image and show it

import React, { useState } from "react";
    import "./styles.css";
    
    const SingleImageUploadComponent = () => {
      const [file, setFile] = useState(null);
    
      function uploadSingleFile(e) {
        setFile(URL.createObjectURL(e.target.files[0]));
        console.log("file", file);
      }
    
      function upload(e) {
        e.preventDefault();
        console.log(file);
      }
    
      return (
        <form>
          <div className="form-group preview">
            {file && <img src={file} alt="" />}
          </div>
    
          <div className="form-group">
            <input
              type="file"
              className="form-control"
              onChange={uploadSingleFile}
            />
          </div>
          <button
            type="button"
            className="btn btn-primary btn-block"
            onClick={upload}
          >
            Upload
          </button>
        </form>
      );
    };
    
    export default SingleImageUploadComponent;

As I mentioned earlier I need to upload a maximum of 5 images and show them in 5 img tags since they have where I show them they have css styles

If someone could help me it would be excellent, thank you very much

• javascript
• reactjs
• image
• input

1 Answer 1

You can store the file in array instead of single file and use it.

import React, { useState } from "react";
import "./styles.css";

const App = () => {
  const [file, setFile] = useState([]);

  function uploadSingleFile(e) {
    setFile([...file, URL.createObjectURL(e.target.files[0])]);
    console.log("file", file);
  }

  function upload(e) {
    e.preventDefault();
    console.log(file);
  }

  function deleteFile(e) {
    const s = file.filter((item, index) => index !== e);
    setFile(s);
    console.log(s);
  }

  return (
    <form>
      <div className="form-group preview">
        {file.length > 0 &&
          file.map((item, index) => {
            return (
              <div key={item}>
                <img src={item} alt="" />
                <button type="button" onClick={() => deleteFile(index)}>
                  delete
                </button>
              </div>
            );
          })}
      </div>

      <div className="form-group">
        <input
          type="file"
          disabled={file.length === 5}
          className="form-control"
          onChange={uploadSingleFile}
        />
      </div>
      <button
        type="button"
        className="btn btn-primary btn-block"
        onClick={upload}
      >
        Upload
      </button>
    </form>
  );
};

export default App;