React Js Image Upload to Server

<!DOCTYPE html>
<html>

<body>
  <div id="app"></div>
  <script type="text/babel">
    const { useState } = React;

function App() {
      const [selectedFile, setSelectedFile] = useState(null);
      const [responseMessage, setResponseMessage] = useState('');

const handleFileChange = (event) => {
        setSelectedFile(event.target.files[0]);
      };

const handleUpload = () => {
        if (selectedFile) {
          const formData = new FormData();
          const timestamp = Date.now(); // Get the current timestamp in milliseconds
          const fileName = `${timestamp}_${selectedFile.name}`; // Append timestamp to the filename
          formData.append('image', selectedFile, fileName); // Pass the updated filename in the FormData

// Replace 'YOUR_API_ENDPOINT' with your actual API endpoint URL
          axios.post('https://schoolscode.com/ImageUploadController/uploadImage', formData)
            .then((response) => {
              // Handle the response from the server if needed
              console.log('Upload successful:', response.data);
              setResponseMessage(response.data.message);
              setSelectedFile(null)
              document.getElementById('file-input').value = '';

// Assuming the server responds with the URL of the uploaded image
              const imageUrl = response.data.image_path;
              if (imageUrl) {
                const imageElement = document.createElement('img');
                imageElement.src = `https://schoolscode.com${imageUrl}`;
                document.getElementById('uploaded-image-container').appendChild(imageElement);
              }
              setTimeout(() => {
                setResponseMessage('');
              }, 5000); // Clear the response message after 3 seconds
            })
            .catch((error) => {
              // Handle error if the upload fails
              console.error('Error uploading the image:', error);
              setResponseMessage(error);
              setTimeout(() => {
                setResponseMessage('');
              }, 5000); // Clear the response message after 3 seconds
            });
        }
        else {
          alert('Please Select Image')
        }
      };

return (
        <div className='container'>
          <h3>React Js Upload Image to Server | Api | Codeigniter | Axios</h3>
          <input type="file" id='file-input' onChange={handleFileChange} />
          <button onClick={handleUpload}>Upload</button>
          <div id="uploaded-image-container"></div>
          {responseMessage && <div className='toast' dangerouslySetInnerHTML={{ __html: responseMessage }}></div>}
        </div>
      );
    }
    ReactDOM.render(<App />, document.getElementById("app"));
  </script>
  <style>
    .container {
      max-width: 500px;
      margin: 0 auto;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

}

/* Styles for the upload button */
    .container button {
      margin-top: 10px;
      padding: 10px 20px;
      background-color: #007BFF;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

.container button:hover {
      background-color: #0056b3;
    }

#uploaded-image-container {
      margin-top: 20px;
      text-align: center;
    }

#uploaded-image-container img {
      max-width: 100%;
      max-height: 300px;
      border-radius: 8px;

}

.toast {
     position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: #333;
      color: #fff;
      padding: 10px;
      border-radius: 4px;
      display: flex;    
      align-items: center;
      transition: opacity 0.3s ease-in-out;
  
    }
  </style>
</body>

</html>

 
<!DOCTYPE html>
<html>
​
<head>
  <meta charset="UTF-8" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
​
<body>
  <div id="app"></div>
  <script type="text/babel">
    const { useState } = React;
​
    function App() {
      const [selectedFile, setSelectedFile] = useState(null);
      const [responseMessage, setResponseMessage] = useState('');
​
      const handleFileChange = (event) => {
        setSelectedFile(event.target.files[0]);
      };
​
      const handleUpload = () => {
        if (selectedFile) {
          const formData = new FormData();
          const timestamp = Date.now(); // Get the current timestamp in milliseconds
          const fileName = `${timestamp}_${selectedFile.name}`; // Append timestamp to the filename
          formData.append('image', selectedFile, fileName); // Pass the updated filename in the FormData
​
          // Replace 'YOUR_API_ENDPOINT' with your actual API endpoint URL
          axios.post('https://schoolscode.com/ImageUploadController/uploadImage', formData)
            .then((response) => {
              // Handle the response from the server if needed
              console.log('Upload successful:', response.data);
              setResponseMessage(response.data.message);
              setSelectedFile(null)
              document.getElementById('file-input').value = '';
​
              // Assuming the server responds with the URL of the uploaded image
              const imageUrl = response.data.image_path;
              if (imageUrl) {
                const imageElement = document.createElement('img');
                imageElement.src = `https://schoolscode.com${imageUrl}`;
                document.getElementById('uploaded-image-container').appendChild(imageElement);
              }
              setTimeout(() => {
                setResponseMessage('');
              }, 5000); // Clear the response message after 3 seconds
            })
            .catch((error) => {
              // Handle error if the upload fails
              console.error('Error uploading the image:', error);
              setResponseMessage(error);
              setTimeout(() => {
                setResponseMessage('');
              }, 5000); // Clear the response message after 3 seconds
            });
        }
        else {
          alert('Please Select Image')
        }
      };
​
      return (
        <div className='container'>
          <h3>React Js Upload Image to Server | Api | Codeigniter | Axios</h3>
          <input type="file" id='file-input' onChange={handleFileChange} />
          <button onClick={handleUpload}>Upload</button>
          <div id="uploaded-image-container"></div>
          {responseMessage && <div className='toast' dangerouslySetInnerHTML={{ __html: responseMessage }}></div>}
        </div>
      );
    }
    ReactDOM.render(<App />, document.getElementById("app"));
  </script>
  <style>
    .container {
      max-width: 500px;
      margin: 0 auto;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
​
    }
​
​
    /* Styles for the upload button */
    .container button {
      margin-top: 10px;
      padding: 10px 20px;
      background-color: #007BFF;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
​
    .container button:hover {
      background-color: #0056b3;
    }
​
    #uploaded-image-container {
      margin-top: 20px;
      text-align: center;
    }
​
    #uploaded-image-container img {
      max-width: 100%;
      max-height: 300px;
      border-radius: 8px;
​
    }
​
    .toast {
     position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: #333;
      color: #fff;
      padding: 10px;
      border-radius: 4px;
      display: flex;    
      align-items: center;
      transition: opacity 0.3s ease-in-out;
  
    }
  </style>
</body>
​
</html>