MetatroncubeSoftwareSolutions/tca-admin
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: increase upload limit to 50 and add svg support with error handling

Browse Source
This commit is contained in:
Ravindranbit 2026-04-28 17:14:25 +05:30
parent 4b9797e368
commit 83b891d8d8
1 changed files with 25 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
components/gallery/CreateEventGalleryForm.tsx
View File

@ -17,10 +17,18 @@ const CreateEventGalleryForm: React.FC<EditEventFormProps> = ({ eventId }) => {
const [selectedImages, setSelectedImages] = useState<File[]>([]);
const [previewUrls, setPreviewUrls] = useState<string[]>([]);
const [loading, setLoading] = useState(false);
const [errors, setErrors] = useState<FormErrors>({});
const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
const files = Array.from(e.target.files || []);
if (selectedImages.length + files.length > 50) {
setErrors({ images: 'You can only upload up to 50 images at a time' });
alert('You can only upload up to 50 images at a time');
return;
}
const validImages: File[] = [];
const previews: string[] = [];
@ -33,6 +41,7 @@ const CreateEventGalleryForm: React.FC<EditEventFormProps> = ({ eventId }) => {
setSelectedImages(prev => [...prev, ...validImages]);
setPreviewUrls(prev => [...prev, ...previews]);
setErrors(prev => ({ ...prev, images: '' })); // clear error if valid
};
const handleImageDelete = (index: number) => {
@ -45,6 +54,8 @@ const CreateEventGalleryForm: React.FC<EditEventFormProps> = ({ eventId }) => {
if (selectedImages.length === 0) {
newErrors.images = 'Please upload at least one image';
} else if (selectedImages.length > 50) {
newErrors.images = 'Only 50 images can be uploaded at a time';
}
setErrors(newErrors);
@ -55,6 +66,7 @@ const CreateEventGalleryForm: React.FC<EditEventFormProps> = ({ eventId }) => {
e.preventDefault();
if (!validateForm()) return;
setLoading(true);
try {
const formData = new FormData();
@ -64,12 +76,12 @@ const CreateEventGalleryForm: React.FC<EditEventFormProps> = ({ eventId }) => {
const uploadRes = await axios.post(buildApiUrl('upload/multiple'), formData)
console.log("uploadres", uploadRes)
const uploadedUrls = uploadRes?.data?.data?.map((image: any) => image?.fullUrl) || [];
const uploadedUrls = uploadRes?.data?.data?.map((image: any) => image?.fullUrl) || [];
// Step 2: Prepare correct body for bulk save
// Step 2: Prepare body for bulk save
const body = {
eventid: Number(eventId), // ensure number
imageurl: uploadedUrls // API may expect 'imageurls' not 'imageurl'
eventid: Number(eventId),
imageurl: uploadedUrls
};
console.log("Sending body:", body);
@ -81,8 +93,13 @@ const CreateEventGalleryForm: React.FC<EditEventFormProps> = ({ eventId }) => {
);
router.push(`/event-gallery?eventid=${eventId}`);
} catch (error) {
} catch (error: any) {
console.error('Upload failed:', error);
const message = error.response?.data?.message || 'Failed to upload images. Please try again.';
setErrors({ submit: message });
alert(message);
} finally {
setLoading(false);
}
};
@ -130,9 +147,10 @@ const CreateEventGalleryForm: React.FC<EditEventFormProps> = ({ eventId }) => {
<div className="mt-6">
<button
type="submit"
className="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700"
disabled={loading}
className={`bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 ${loading ? 'opacity-50 cursor-not-allowed' : ''}`}
>
Submit
{loading ? 'Uploading...' : 'Submit'}
</button>
</div>
</form>