At first time, i click the button select a file then click upload, if the file is uploadeded successfully then i re-select the file, i need to click “choose a file” twice to select the file to take effect, otherwise it will display ‘No file selected.’. the following is the code
<code> const FactoryContactUpload = () => {
const [selectedFile, setSelectedFile] = useState(null);
const handleFileChange = (event) => {
// Handle the file change event
const file = event.target.files[0];
setSelectedFile(file);
};
const handleFileClick = (event) => {
setShowAlert(false);
}
const handleUpload = async() => {
// Handle the upload event
if (selectedFile) {
const formData = new FormData();
formData.append('file', selectedFile);
const token = await acquireTokenSilent(instance);
apiClient
.post('/factorycontact/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data',
'Authorization': `Bearer ${token}`
},
})
.then((response) => {
// Handle the API response
setShowAlert(true);
setAlertType('success');
setAlertMessage(response.data.message || '');
})
.catch((error) => {
// Handle errors
setShowAlert(true);
setAlertType('error');
setAlertMessage(error.response?.data?.message || "An error occurred");
});
} else {
setShowAlert(true);
setAlertType('info');
setAlertMessage('No file selected.');
}
};
return (
<div>
<>
<input type="file" onChange={handleFileChange} onClick={handleFileClick}/>
<button onClick={handleUpload}>Upload</button>
<br />
<br />
</>
{showAlert && <Alert type={alertType} message={alertMessage} />}
</div>
);
};
</code>
<code> const FactoryContactUpload = () => {
const [selectedFile, setSelectedFile] = useState(null);
const handleFileChange = (event) => {
// Handle the file change event
const file = event.target.files[0];
setSelectedFile(file);
};
const handleFileClick = (event) => {
setShowAlert(false);
}
const handleUpload = async() => {
// Handle the upload event
if (selectedFile) {
const formData = new FormData();
formData.append('file', selectedFile);
const token = await acquireTokenSilent(instance);
apiClient
.post('/factorycontact/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data',
'Authorization': `Bearer ${token}`
},
})
.then((response) => {
// Handle the API response
setShowAlert(true);
setAlertType('success');
setAlertMessage(response.data.message || '');
})
.catch((error) => {
// Handle errors
setShowAlert(true);
setAlertType('error');
setAlertMessage(error.response?.data?.message || "An error occurred");
});
} else {
setShowAlert(true);
setAlertType('info');
setAlertMessage('No file selected.');
}
};
return (
<div>
<>
<input type="file" onChange={handleFileChange} onClick={handleFileClick}/>
<button onClick={handleUpload}>Upload</button>
<br />
<br />
</>
{showAlert && <Alert type={alertType} message={alertMessage} />}
</div>
);
};
</code>
const FactoryContactUpload = () => {
const [selectedFile, setSelectedFile] = useState(null);
const handleFileChange = (event) => {
// Handle the file change event
const file = event.target.files[0];
setSelectedFile(file);
};
const handleFileClick = (event) => {
setShowAlert(false);
}
const handleUpload = async() => {
// Handle the upload event
if (selectedFile) {
const formData = new FormData();
formData.append('file', selectedFile);
const token = await acquireTokenSilent(instance);
apiClient
.post('/factorycontact/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data',
'Authorization': `Bearer ${token}`
},
})
.then((response) => {
// Handle the API response
setShowAlert(true);
setAlertType('success');
setAlertMessage(response.data.message || '');
})
.catch((error) => {
// Handle errors
setShowAlert(true);
setAlertType('error');
setAlertMessage(error.response?.data?.message || "An error occurred");
});
} else {
setShowAlert(true);
setAlertType('info');
setAlertMessage('No file selected.');
}
};
return (
<div>
<>
<input type="file" onChange={handleFileChange} onClick={handleFileClick}/>
<button onClick={handleUpload}>Upload</button>
<br />
<br />
</>
{showAlert && <Alert type={alertType} message={alertMessage} />}
</div>
);
};
do any one know the problem?