import React, { useState } from 'react';

​

const ImageUpload = () => {

  const [selectedImages, setSelectedImages] = useState([]);

  const [previewImages, setPreviewImages] = useState([]);

  const [textInputValues, setTextInputValues] = useState({

    input1: '',

    input2: '',

    input3: ''

  });

​

  const handleImageUpload = (event) => {

    const files = event.target.files;

    const selectedFiles = Array.from(files);

​

    if (selectedFiles.length > 3) {

      alert('Maximum of 3 images allowed.');

      return;

    }

​

    setSelectedImages(selectedFiles);

​

    selectedFiles.forEach((file) => {

      const reader = new FileReader();

      reader.readAsDataURL(file);

      reader.onloadend = () => {

        setPreviewImages((prevImages) => [...prevImages, reader.result]);

      };

    });

  };

​

  const handleInputChange = (event) => {

    const { name, value } = event.target;

    setTextInputValues((prevValues) => ({

      ...prevValues,

      [name]: value

    }));

  };

​

  const handleSubmit = (event) => {

    event.preventDefault();

    // Handle the submission logic here

  };

​

  return (

    <form onSubmit={handleSubmit}>

      <div>

        <input

          type="file"

          name="images"

          accept="image/*"

          multiple

          onChange={handleImageUpload}

        />

      </div>

      <div>

        <input

          type="text"

          name="input1"

          value={textInputValues.input1}

          onChange={handleInputChange}

          placeholder="Input 1"

        />

      </div>

      <div>

        <input

          type="text"

          name="input2"

          value={textInputValues.input2}

          onChange={handleInputChange}

          placeholder="Input 2"

        />

      </div>

      <div>

        <input

          type="text"

          name="input3"

          value={textInputValues.input3}

          onChange={handleInputChange}

          placeholder="Input 3"

        />

      </div>

      <button type="submit">Upload</button>

      <div>

        {previewImages.map((image) => (

          <img key={image} src={image} alt="Preview" width="200" />

        ))}

      </div>

    </form>

  );

};

​

export default ImageUpload;