I want to delete an up loaded image on the click of button, so any idea for delete image
This is my UI section
<IconButton sx={{ color: '#EBC047' }} onClick={handleRemoveImage}>
<Iconify icon="material-symbols:close" />
</IconButton>
<img
id="imageElement"
src={previewwhatsappImage || ''}
alt=""
style={{ objectFit: 'cover' }}
>
This is logic for performing operation. I tried this code block functionality to perform operation.
const handleRemoveImage = () => {
try {
// Clear the sessionStorage
sessionStorage.setItem(fileSaveImage.whatsapp, previewwhatsappImage,);
sessionStorage.removeItem(fileSaveImage.whatsapp);
sessionStorage.clear();
// Clear the preview image and the file state
setPreviewWhatsappImage((prev: any) => ({ ...prev, whatsapp: '' }));
SetFileSaveImage((prev: any) => ({ ...prev, whatsapp: '' }));
console.log('Image removed successfully.');
} catch (error) {
console.error('Failed to remove image from localStorage:', error);
}
};
This are some code block used in this feature
uploadCommunicationCampaignWhatsappImage is the API for POST image
const { uploadCommunicationCampaignWhatsappImage } = useApiPost();
const handleSave = async (typeForButton: string) => {
let errorCheck: boolean = false;
const data = {
senderId: values.sendCampaign,
message: values.whatsapptxt,
file: 'null',
};
const formData = new FormData();
formData.append('clientCode', user?.clientCode);
formData.append('programIdentifier', user?.programs[0]?.key);
formData.append('userName', 'sysadmin');
formData.append('templateId', 'null');
// eslint-disable-next-line no-unneeded-ternary
formData.append('campaignId', paramsId ? paramsId : createCampRespo);
formData.append('step', 'WHATSAPP');
formData.append(
'banner',
fileSaveImage.whatsapp !== '' ? fileSaveImage.whatsapp : new Blob([])
);
formData.append('data', JSON.stringify(data));
if (
values.sendCampaign === undefined ||
values.sendCampaign === null ||
values.sendCampaign === ''
) {
errorCheck = true;
setError('sendCampaign', { type: 'custom', message: 'Sending Campaign From is required' });
}
if (
values.whatsapptxt === undefined ||
values.whatsapptxt === null ||
values.whatsapptxt === ''
) {
errorCheck = true;
setError('whatsapptxt', { type: 'custom', message: 'WhatsApp Message is required' });
}
if (!errorCheck && !disableWithoutActive(values)) {
setLinearProgress(true);
try {
const response = await uploadCommunicationCampaignWhatsappImage(formData);
if (response.responseCode === '200' || response.responseCode === 200) {
setLinearProgress(false);
if (typeForButton === 'save') {
navigate('/campaigns');
} else {
handleNext();
}
}
} catch (error) {
console.log('error', error);
}
}
if (disableWithoutActive(values) && typeForButton === 'save') {
navigate('/campaigns');
}
if (disableWithoutActive(values)) {
handleNext();
}
};
<IconButton sx={{ color: '#EBC047' }} onClick={handleRemoveImage}>
<Iconify icon="material-symbols:close" />
</IconButton>
<CardMedia
sx={{
height: '100%',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
component="picture"
>
<source src={previewwhatsappImage || ''} />
<img src={previewwhatsappImage || ''} alt="" style={{ objectFit: 'cover' }} />
</CardMedia>
Help me to implement this feature