<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>
<script type="text/babel">
const { useState } = React;
const [selectedFile, setSelectedFile] = useState(null);
const [responseMessage, setResponseMessage] = useState('');
const handleFileChange = (event) => {
setSelectedFile(event.target.files[0]);
const handleUpload = () => {
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)
// Handle the response from the server if needed
console.log('Upload successful:', response.data);
setResponseMessage(response.data.message);
document.getElementById('file-input').value = '';
// Assuming the server responds with the URL of the uploaded image
const imageUrl = response.data.image_path;
const imageElement = document.createElement('img');
imageElement.src = `https://schoolscode.com${imageUrl}`;
document.getElementById('uploaded-image-container').appendChild(imageElement);
}, 5000); // Clear the response message after 3 seconds
// Handle error if the upload fails
console.error('Error uploading the image:', error);
setResponseMessage(error);
}, 5000); // Clear the response message after 3 seconds
alert('Please Select Image')
<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>}
ReactDOM.render(<App />, document.getElementById("app"));
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
/* Styles for the upload button */
background-color: #007BFF;
transition: background-color 0.3s ease;
.container button:hover {
background-color: #0056b3;
#uploaded-image-container {
#uploaded-image-container img {
transition: opacity 0.3s ease-in-out;