@visns-studio/visns-components 5.14.11 → 5.14.12

package/package.json

@@ -24,13 +24,13 @@
         "dayjs": "^1.11.13",
         "fabric": "^6.7.1",
         "file-saver": "^2.0.5",
-        "framer-motion": "^12.23.6",
+        "framer-motion": "^12.23.11",
         "html-react-parser": "^5.2.6",
         "lodash": "^4.17.21",
         "lodash.debounce": "^4.0.8",
-        "lucide-react": "^0.525.0",
+        "lucide-react": "^0.532.0",
         "moment": "^2.30.1",
-        "motion": "^12.23.6",
+        "motion": "^12.23.11",
         "numeral": "^2.0.6",
         "pluralize": "^8.0.0",
         "qrcode.react": "^4.2.0",
@@ -89,7 +89,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.14.11",
+    "version": "5.14.12",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/Field.jsx

@@ -1006,12 +1006,27 @@ function Field({
                 ) {
                     return (
                         <div className={styles['file-upload-container']}>
+                            <div className={styles['file-upload-button-wrapper']}>
+                                <label
+                                    htmlFor={`file-input-${settings.id}`}
+                                    className={styles['file-upload-button']}
+                                >
+                                    <span>📁</span>
+                                    Browse Files...
+                                </label>
+                                <div className={styles['file-upload-help-text']}>
+                                    Select multiple files to upload. You can add more files later.
+                                </div>
+                            </div>
+                            
                             <input
+                                id={`file-input-${settings.id}`}
                                 type="file"
                                 multiple
                                 data-name={settings.id}
                                 className={inputClass[settings.id]}
                                 onChange={onChange}
+                                accept={settings.accept || "*/*"}
                             />
 
                             {inputValue && inputValue.length > 0 && (

package/src/components/Form.jsx

@@ -123,14 +123,63 @@ function Form({
             _dataset = e.target[e.target.selectedIndex].dataset;
         }
 
-        if (e.target.files) {
-            setFormData((prevState) => ({
-                ...prevState,
-                [id]:
-                    e.target.files.length > 1
-                        ? Array.from(e.target.files)
-                        : e.target.files[0],
-            }));
+        if (e.target.files && e.target.files.length > 0) {
+            // Find the field settings to check if multiple is enabled
+            const fieldSettings = formSettings?.fields?.find(field => field.id === id);
+            const isMultiple = fieldSettings?.multiple === true;
+            
+            // Debug logging for development
+            if (process.env.NODE_ENV === 'development') {
+                console.log('File input change:', {
+                    id,
+                    filesCount: e.target.files.length,
+                    isMultiple,
+                    fieldSettings
+                });
+            }
+            
+            if (isMultiple) {
+                // For multiple file inputs, append new files to existing ones
+                setFormData((prevState) => {
+                    const existingFiles = prevState[id] || [];
+                    const newFiles = Array.from(e.target.files);
+                    
+                    // Ensure existingFiles is always an array for multiple inputs
+                    const currentFiles = Array.isArray(existingFiles) ? existingFiles : [];
+                    
+                    const updatedFiles = [...currentFiles, ...newFiles];
+                    
+                    // Debug logging for development
+                    if (process.env.NODE_ENV === 'development') {
+                        console.log('Multiple file update:', {
+                            existingCount: currentFiles.length,
+                            newCount: newFiles.length,
+                            totalCount: updatedFiles.length
+                        });
+                    }
+                    
+                    return {
+                        ...prevState,
+                        [id]: updatedFiles,
+                    };
+                });
+                
+                // Clear the input so the same files can be selected again
+                setTimeout(() => {
+                    if (e.target) {
+                        e.target.value = '';
+                    }
+                }, 100);
+            } else {
+                // For single file inputs or when not multiple, use original behavior
+                setFormData((prevState) => ({
+                    ...prevState,
+                    [id]:
+                        e.target.files.length > 1
+                            ? Array.from(e.target.files)
+                            : e.target.files[0],
+                }));
+            }
         } else {
             if (parent) {
                 setFormData((prevState) => ({