V.0.3.1.3 🌶️ Hotfix (#32)

* Hotfix: createdCollectionID is sometimes undefined

* Added info of total files and total file size allowed

frontend/app/components/ui/query/query-document-upload.tsx

@@ -3,7 +3,7 @@
 import { useState } from 'react';
 import { toast } from 'react-toastify';
 import Swal from 'sweetalert2';
-import { AlertTriangle } from "lucide-react";
+import { AlertTriangle, Info } from "lucide-react";
 import { IconSpinner } from '@/app/components/ui/icons';
 import { useSession } from "next-auth/react";
 
@@ -19,16 +19,15 @@ export default function QueryDocumentUpload() {
     const indexerApi = process.env.NEXT_PUBLIC_INDEXER_API;
     const { data: session } = useSession();
     const supabaseAccessToken = session?.supabaseAccessToken;
-    const [createdCollectionId, setCreatedCollectionId] = useState<string>('');
     // NOTE: allowedTypes is an array of allowed MIME types for file uploads
     // The allowedTypesString is a string of allowed file extensions for the file input
     // Both must be kept in sync to ensure that the file input only accepts the allowed file types
     const allowedTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'text/plain', 'application/json'];
     const allowedTypesString = ".pdf,.doc,.docx,.xls,xlsx,.txt,.json";
 
     const MAX_FILES = 15; // Maximum number of files allowed
-    const MAX_TOTAL_SIZE_MB = 60; // Maximum total size allowed in MB (15 MB)
-    const MAX_TOTAL_SIZE = MAX_TOTAL_SIZE_MB * 1024 * 1024; // Maximum total size allowed in bytes (15 MB in bytes)
+    const MAX_TOTAL_SIZE_MB = 60; // Maximum total size allowed in MB (60 MB)
+    const MAX_TOTAL_SIZE = MAX_TOTAL_SIZE_MB * 1024 * 1024; // Maximum total size allowed in bytes (60 MB in bytes)
     // The total size of all selected files should not exceed this value
 
     const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -94,6 +93,7 @@ export default function QueryDocumentUpload() {
     };
 
     const handleSubmit = (event: React.FormEvent) => {
+        let createdCollectionId = '';
         event.preventDefault();
         // Perform validation and submit logic here
         console.log("Display Name:", displayName);
@@ -152,7 +152,8 @@ export default function QueryDocumentUpload() {
                                 // Get the response data
                                 const data = await response.json();
                                 console.log('Insert New Collection Results:', data);
-                                setCreatedCollectionId(data.collectionId);
+                                createdCollectionId = await data.collectionId; // ensure that the collection_id is returned
+                                console.log('Created Collection ID:', createdCollectionId);
                                 // Show success dialog
                                 Swal.fire({
                                     title: 'Success!',
@@ -296,8 +297,6 @@ export default function QueryDocumentUpload() {
                             });
                             setisLoading(false);
                         });
-                    // Reset createCollectionId state
-                    setCreatedCollectionId('');
                 }
                 else {
                     setisLoading(false);
@@ -344,7 +343,10 @@ export default function QueryDocumentUpload() {
                         {descriptionError && <p className="text-red-500 text-sm pl-1 pt-1">Description is required!</p>}
                     </div>
                     <div className='flex flex-col'>
-                        <label htmlFor="fileUpload" title='Select Files' className='mb-2'>Select Files:</label>
+                        <label htmlFor="fileUpload" title='Select Files' className='mb-2'>
+                            Select Files:
+                            <span className="text-sm text-gray-500 ml-1">{`(Up to ${MAX_FILES} files, total ${MAX_TOTAL_SIZE_MB} MB)`}</span>
+                        </label>
                         <input
                             type="file"
                             id="fileUpload"