I can store file uploadFileIds in an array and send to conversation.jsx component sometimes I received this error:
Sometimes it’s working accurately but sometimes it’s send a warning
Hera is my both component code:
FileUpload.jsx
const handleUpload = async () => {
setError(null); // Reset error state
let newUploadFileId;
if (selectedFile) {
try {
const response = await fetch(UPLOAD_URL, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
'Authorization': getAuthHeader(),
},
body: `size=${selectedFile.size}`,
signal: abortController.signal,
});
const responseData = await response.json();
const chunk_size = responseData.chunk_size;
if (selectedFile.size <= 5 * 1024 * 1024) {
newUploadFileId = await uploadFilePart(selectedFile, responseData, accessToken.decrypted_access_token);
} else {
const totalChunks = Math.ceil(selectedFile.size / chunk_size);
setTargetPercentage(totalChunks);
newUploadFileId = await uploadChunks(selectedFile, responseData, accessToken.decrypted_access_token);
}
if (newUploadFileId) {
// Delay the state update to avoid the React warning
setUploadFileIds(prevIds => {
const updatedIds = [...prevIds, newUploadFileId];
onUploadComplete(updatedIds);
return updatedIds;
});
setShowUploadingMessage(false);
setDynamicFileNo(prevCount => prevCount + 1);
setTargetPercentage(100);
}
} catch (error) {
setError(error.message);
}
} else {
console.log("Please select a file");
}
};
Conversation.jsx
<FileUpload
selectedFile={selectedFile}
isUploading={isUploading}
onUploadComplete={handleUploadFileIds}
abortController={abortControllerRef.current}
onError={handleError} // Pass the handleError function
/>
// Function for get ids
const handleUploadFileIds = (ids) => {
console.log(ids);
if (ids) {
setUploadFileIds(ids);
setIsSendButtonDisabled(false); // Re-enable the send button
setIsUploading(false);
}
};
How can I fix this issue
2