@5minds/node-red-dashboard-2-processcube-dynamic-form 2.2.1-file-preview-2-247fbf-mfdx0ry5 → 2.2.1-file-preview-2-7f33a3-mfferizd

package/ui/components/UIDynamicForm.vue

@@ -79,6 +79,53 @@
                           {{ field.customForm ? field.customForm.hint : undefined }}
                         </p>
                       </div>
+                      <div v-else-if="createComponent(field).isFileField" class="ui-dynamic-form-file-wrapper">
+                        <div v-if="getFilePreviewsForField(field.id).length > 0" class="ui-dynamic-form-image-previews">
+                          <h4>Current files:</h4>
+                          <div class="ui-dynamic-form-preview-grid">
+                            <div
+                              v-for="preview in getFilePreviewsForField(field.id)"
+                              :key="preview.name"
+                              class="ui-dynamic-form-preview-item"
+                            >
+                              <img
+                                :src="preview.url"
+                                :alt="preview.name"
+                                class="ui-dynamic-form-preview-image"
+                                @click="openImageModal(preview)"
+                              />
+                              <div class="ui-dynamic-form-preview-info">
+                                <span class="ui-dynamic-form-preview-name">{{ preview.name }}</span>
+                                <span class="ui-dynamic-form-preview-size">{{ formatFileSize(preview.size) }}</span>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+
+                        <FormKit
+                          type="file"
+                          :id="field.id"
+                          :name="createComponent(field).name"
+                          :label="field.label"
+                          :required="field.required"
+                          v-model="formData[field.id]"
+                          :help="createComponent(field).hint"
+                          innerClass="reset-background"
+                          wrapperClass="$remove:formkit-wrapper"
+                          labelClass="ui-dynamic-form-input-label"
+                          :inputClass="`input-${theme}`"
+                          :readonly="createComponent(field).isReadOnly"
+                          :disabled="createComponent(field).isReadOnly"
+                          :multiple="createComponent(field).multiple"
+                          :validation="createComponent(field).validation"
+                          validationVisibility="live"
+                          :ref="
+                            (el) => {
+                              if (index === 0) firstFormFieldRef = el;
+                            }
+                          "
+                        />
+                      </div>
                       <component
                         :is="createComponent(field).type"
                         v-else
@@ -121,6 +168,27 @@
     <div v-if="!props.actions_inside_card && hasUserTask && actions.length > 0" style="padding-top: 32px">
       <UIDynamicFormFooterAction :actions="actions" :actionCallback="actionFn" />
     </div>
+
+    <v-dialog v-model="imageModalOpen" max-width="800px">
+      <v-card v-if="modalImage">
+        <v-card-title class="headline">{{ modalImage.name }}</v-card-title>
+        <v-card-text>
+          <img
+            :src="modalImage.url"
+            :alt="modalImage.name"
+            style="width: 100%; max-height: 70vh; object-fit: contain"
+          />
+          <div style="margin-top: 16px">
+            <strong>Size:</strong> {{ formatFileSize(modalImage.size) }}<br />
+            <strong>Type:</strong> {{ modalImage.type }}
+          </div>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="primary" text @click="closeImageModal">Close</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </div>
 </template>
 
@@ -215,6 +283,7 @@ export default {
     return {
       actions: [],
       formData: {},
+      originalFileData: {},
       userTask: null,
       theme: '',
       errorMsg: '',
@@ -222,6 +291,10 @@ export default {
       msg: null,
       collapsed: false,
       firstFormFieldRef: null,
+      imageModalOpen: false,
+      modalImage: null,
+      objectUrlsByField: {},
+      previewCache: {},
     };
   },
   computed: {
@@ -258,27 +331,55 @@ export default {
   watch: {
     formData: {
       handler(newData, oldData) {
+        if (!oldData) return;
+
+        if (this.userTask && this.userTask.userTaskConfig && this.userTask.userTaskConfig.formFields) {
+          const fileFields = this.userTask.userTaskConfig.formFields.filter((field) => field.type === 'file');
+
+          fileFields.forEach((field) => {
+            const fieldId = field.id;
+            const newValue = newData[fieldId];
+            const oldValue = oldData[fieldId];
+
+            if (newValue !== oldValue && this.originalFileData[fieldId]) {
+              const hasNewFiles = this.hasActualFileObjects(newValue);
+
+              if (hasNewFiles) {
+                delete this.originalFileData[fieldId];
+
+                Object.keys(this.previewCache).forEach((key) => {
+                  if (key.startsWith(fieldId + '_')) {
+                    delete this.previewCache[key];
+                  }
+                });
+
+                this.cleanupObjectUrls(fieldId);
+              }
+            }
+          });
+        }
+
         if (this.props.trigger_on_change) {
           const res = { payload: { formData: newData, userTask: this.userTask } };
           this.send(res, this.totalOutputs - 1);
         }
       },
-      collapsed(newVal) {
-        if (!newVal && this.hasUserTask) {
-          nextTick(() => {
-            this.focusFirstFormField();
-          });
-        }
-      },
-      userTask(newVal) {
-        if (newVal && !this.collapsed) {
-          nextTick(() => {
-            this.focusFirstFormField();
-          });
-        }
-      },
       deep: true,
     },
+    collapsed(newVal) {
+      if (!newVal && this.hasUserTask) {
+        nextTick(() => {
+          this.focusFirstFormField();
+        });
+      }
+    },
+    userTask(newVal) {
+      if (newVal && !this.collapsed) {
+        nextTick(() => {
+          this.focusFirstFormField();
+        });
+      }
+    },
   },
   created() {
     const currentPath = window.location.pathname;
@@ -314,6 +415,7 @@ export default {
   },
   unmounted() {
     this.$socket?.off('msg-input:' + this.id);
+    this.cleanupObjectUrls();
   },
   methods: {
     createComponent(field) {
@@ -495,25 +597,17 @@ export default {
         case 'file':
           const multiple = field.customForm ? JSON.parse(JSON.stringify(field.customForm)).multiple === 'true' : false;
           return {
-            type: 'FormKit',
+            type: 'div',
             props: {
-              type: 'file',
-              id: field.id,
-              name,
-              label: field.label,
-              required: field.required,
-              value: this.formData[field.id],
-              help: hint,
-              innerClass: 'reset-background',
-              wrapperClass: '$remove:formkit-wrapper',
-              labelClass: 'ui-dynamic-form-input-label',
-              inputClass: `input-${this.theme}`,
-              readonly: isReadOnly,
-              disabled: isReadOnly,
-              multiple,
-              validation,
-              validationVisibility: 'live',
+              class: 'ui-dynamic-form-file-wrapper',
             },
+            isFileField: true,
+            field: field,
+            multiple: multiple,
+            isReadOnly: isReadOnly,
+            hint: hint,
+            validation: validation,
+            name: name,
           };
         case 'checkbox':
           const options = JSON.parse(JSON.stringify(field.customForm)).entries.map((obj) => {
@@ -874,6 +968,9 @@ export default {
         return;
       }
 
+      this.originalFileData = {};
+      this.previewCache = {};
+      this.cleanupObjectUrls();
       this.actions = this.props.options;
 
       const hasTask = msg.payload && msg.payload.userTask;
@@ -883,6 +980,8 @@ export default {
       } else {
         this.userTask = null;
         this.formData = {};
+        this.originalFileData = {};
+        this.cleanupObjectUrls();
         return;
       }
 
@@ -972,7 +1071,12 @@ export default {
         Object.keys(initialValues)
           .filter((key) => formFieldIds.includes(key))
           .forEach((key) => {
-            this.formData[key] = initialValues[key];
+            const field = formFields.find((f) => f.id === key);
+            if (field && field.type === 'file') {
+              this.formData[key] = this.transformBase64ToFormKitFormat(initialValues[key], field);
+            } else {
+              this.formData[key] = initialValues[key];
+            }
           });
       }
 
@@ -980,7 +1084,12 @@ export default {
         Object.keys(finishedFormData)
           .filter((key) => formFieldIds.includes(key))
           .forEach((key) => {
-            this.formData[key] = finishedFormData[key];
+            const field = formFields.find((f) => f.id === key);
+            if (field && field.type === 'file') {
+              this.formData[key] = this.transformBase64ToFormKitFormat(finishedFormData[key], field);
+            } else {
+              this.formData[key] = finishedFormData[key];
+            }
           });
       }
 
@@ -1091,6 +1200,88 @@ export default {
         }
       }
     },
+    /**
+     * Transforms base64 file data to FormKit-compatible format for display.
+     *
+     * FormKit file inputs expect an array of objects with 'name' property for display.
+     * This function converts the base64 format (with 'data' property) to the display format,
+     * while preserving the original data in originalFileData for form submission.
+     *
+     * Expected input format from initialValues:
+     * {
+     *   name: "filename.ext",
+     *   size: 12345,
+     *   type: "image/png",
+     *   data: "base64string..."
+     * }
+     *
+     * Output format for FormKit:
+     * [
+     *   { name: "filename.ext" }
+     * ]
+     *
+     * @param {Object|Array} fileData - The file data from initial values
+     * @param {Object} field - The form field configuration
+     * @returns {Array} FormKit-compatible file array
+     */
+    transformBase64ToFormKitFormat(fileData, field) {
+      if (
+        Array.isArray(fileData) &&
+        fileData.length > 0 &&
+        typeof fileData[0] === 'object' &&
+        fileData[0].name &&
+        !fileData[0].data
+      ) {
+        return fileData;
+      }
+
+      const fieldId = field.id;
+      const multiple = field.customForm ? JSON.parse(JSON.stringify(field.customForm)).multiple === 'true' : false;
+
+      if (fileData && typeof fileData === 'object' && fileData.name && fileData.data) {
+        this.originalFileData[fieldId] = fileData;
+
+        const formKitFile = {
+          name: fileData.name,
+        };
+
+        return multiple ? [formKitFile] : [formKitFile];
+      }
+
+      if (Array.isArray(fileData)) {
+        this.originalFileData[fieldId] = fileData;
+
+        const formKitFiles = fileData
+          .filter((file) => file && typeof file === 'object' && file.name)
+          .map((file) => ({
+            name: file.name,
+          }));
+
+        return formKitFiles;
+      }
+
+      return [];
+    },
+    hasActualFileObjects(value) {
+      if (!value) return false;
+
+      if (Array.isArray(value)) {
+        return value.some((item) => {
+          return (
+            item instanceof File ||
+            (item && item.file instanceof File) ||
+            (item && item.file instanceof FileList && item.file.length > 0)
+          );
+        });
+      }
+
+      return (
+        value instanceof File ||
+        (value instanceof FileList && value.length > 0) ||
+        (value && value.file instanceof File) ||
+        (value && value.file instanceof FileList && value.file.length > 0)
+      );
+    },
     async convertFileToBase64(file) {
       return new Promise((resolve, reject) => {
         const reader = new FileReader();
@@ -1114,6 +1305,13 @@ export default {
       for (const field of formFields) {
         if (field.type === 'file') {
           const fieldValue = processedData[field.id];
+          const fieldId = field.id;
+
+          if (this.originalFileData[fieldId]) {
+            processedData[fieldId] = this.originalFileData[fieldId];
+            console.log(`Using original file data for field ${fieldId}:`, this.originalFileData[fieldId]);
+            continue;
+          }
 
           if (fieldValue) {
             const multiple = field.customForm
@@ -1121,7 +1319,6 @@ export default {
               : false;
 
             if (multiple && Array.isArray(fieldValue)) {
-              // Handle multiple files
               const base64Files = [];
               for (const file of fieldValue) {
                 const processedFile = await this.processIndividualFile(file);
@@ -1184,6 +1381,158 @@ export default {
 
       return fileData;
     },
+    isImageFile(fileData) {
+      if (!fileData || typeof fileData !== 'object') return false;
+
+      const mimeType = fileData.type;
+      if (!mimeType) return false;
+
+      return mimeType.startsWith('image/');
+    },
+    generateImagePreviewUrl(fileData) {
+      if (!fileData || !fileData.data || !fileData.type) return null;
+
+      return `data:${fileData.type};base64,${fileData.data}`;
+    },
+    getFilePreviewsForField(fieldId) {
+      const currentData = this.formData[fieldId] || null;
+      const cachedOriginalData = this.originalFileData[fieldId] || null;
+      const cacheKey = `${fieldId}_${JSON.stringify(currentData)}_${JSON.stringify(cachedOriginalData)}`;
+
+      if (this.previewCache[cacheKey]) {
+        return this.previewCache[cacheKey];
+      }
+
+      const currentFormData = this.formData[fieldId];
+      const originalFileData = this.originalFileData[fieldId];
+
+      if (!currentFormData && !originalFileData) {
+        this.previewCache[cacheKey] = [];
+        return [];
+      }
+
+      let previews = [];
+
+      const hasNewFileObjects =
+        currentFormData &&
+        Array.isArray(currentFormData) &&
+        currentFormData.length > 0 &&
+        this.hasActualFileObjects(currentFormData);
+
+      if (hasNewFileObjects) {
+        previews = this.generatePreviewsFromCurrentFiles(currentFormData, fieldId);
+      } else if (originalFileData) {
+        const fileArray = Array.isArray(originalFileData) ? originalFileData : [originalFileData];
+        previews = fileArray
+          .filter((file) => this.isImageFile(file))
+          .map((file) => ({
+            name: file.name,
+            url: this.generateImagePreviewUrl(file),
+            size: file.size,
+            type: file.type,
+          }));
+      }
+
+      this.previewCache[cacheKey] = previews;
+
+      return previews;
+    },
+    generatePreviewsFromCurrentFiles(fileArray, fieldId = null) {
+      if (fieldId && this.objectUrlsByField[fieldId]) {
+        this.objectUrlsByField[fieldId].forEach((url) => URL.revokeObjectURL(url));
+        this.objectUrlsByField[fieldId] = [];
+      } else if (fieldId) {
+        this.objectUrlsByField[fieldId] = [];
+      }
+
+      const previews = fileArray
+        .filter((fileItem) => {
+          let actualFile = null;
+
+          if (fileItem instanceof File) {
+            actualFile = fileItem;
+          } else if (fileItem && fileItem.file instanceof File) {
+            actualFile = fileItem.file;
+          } else if (Array.isArray(fileItem) && fileItem[0] instanceof File) {
+            actualFile = fileItem[0];
+          }
+
+          return actualFile && actualFile.type && actualFile.type.startsWith('image/');
+        })
+        .map((fileItem) => {
+          let actualFile = null;
+
+          if (fileItem instanceof File) {
+            actualFile = fileItem;
+          } else if (fileItem && fileItem.file instanceof File) {
+            actualFile = fileItem.file;
+          } else if (Array.isArray(fileItem) && fileItem[0] instanceof File) {
+            actualFile = fileItem[0];
+          }
+
+          const url = actualFile ? URL.createObjectURL(actualFile) : null;
+
+          if (url && fieldId) {
+            if (!this.objectUrlsByField[fieldId]) {
+              this.objectUrlsByField[fieldId] = [];
+            }
+            this.objectUrlsByField[fieldId].push(url);
+          }
+
+          return {
+            name: actualFile.name,
+            url: url,
+            size: actualFile.size,
+            type: actualFile.type,
+            isObjectUrl: true,
+          };
+        })
+        .filter((preview) => preview.url !== null);
+
+      return previews;
+    },
+    formatFileSize(bytes) {
+      if (!bytes) return '0 B';
+
+      const k = 1024;
+      const sizes = ['B', 'KB', 'MB', 'GB'];
+      const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    },
+    openImageModal(preview) {
+      this.modalImage = preview;
+      this.imageModalOpen = true;
+    },
+    closeImageModal() {
+      this.imageModalOpen = false;
+      this.modalImage = null;
+    },
+    cleanupObjectUrls(fieldId = null) {
+      if (fieldId) {
+        if (this.objectUrlsByField[fieldId]) {
+          this.objectUrlsByField[fieldId].forEach((url) => {
+            URL.revokeObjectURL(url);
+          });
+          this.objectUrlsByField[fieldId] = [];
+        }
+
+        Object.keys(this.previewCache).forEach((key) => {
+          if (key.startsWith(fieldId + '_')) {
+            delete this.previewCache[key];
+          }
+        });
+      } else {
+        Object.keys(this.objectUrlsByField).forEach((fieldId) => {
+          this.objectUrlsByField[fieldId].forEach((url) => {
+            URL.revokeObjectURL(url);
+          });
+        });
+        this.objectUrlsByField = {};
+
+        this.previewCache = {};
+      }
+    },
   },
 };
 

package/ui/stylesheets/ui-dynamic-form.css

@@ -68,7 +68,7 @@ code {
 .ui-dynamic-form-title-default {
   background: linear-gradient(131deg, #18181a 26.76%, #242326 100.16%);
   padding: 32px;
-  color: #ffffff;
+  color: #fff;
   font-size: 36px;
   font-weight: 700;
   border-radius: 8px 8px 0px 0px;
@@ -593,3 +593,111 @@ code {
   margin: revert;
   padding: revert;
 }
+
+.ui-dynamic-form-image-previews {
+  margin-bottom: 16px;
+  padding: 16px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  background-color: #f9f9f9;
+}
+
+.ui-dynamic-form-image-previews h4 {
+  margin: 0 0 12px 0;
+  color: #333;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.ui-dynamic-form-preview-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.ui-dynamic-form-preview-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 8px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  background-color: white;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  max-width: 150px;
+}
+
+.ui-dynamic-form-preview-item:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.ui-dynamic-form-preview-image {
+  width: 120px;
+  height: 80px;
+  object-fit: cover;
+  border-radius: 4px;
+  cursor: pointer;
+  border: 2px solid transparent;
+  transition: border-color 0.2s ease;
+}
+
+.ui-dynamic-form-preview-image:hover {
+  border-color: #1976d2;
+}
+
+.ui-dynamic-form-preview-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 8px;
+  text-align: center;
+}
+
+.ui-dynamic-form-preview-name {
+  font-size: 12px;
+  font-weight: 500;
+  color: #333;
+  word-break: break-word;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.ui-dynamic-form-preview-size {
+  font-size: 10px;
+  color: #666;
+  margin-top: 4px;
+}
+
+.ui-dynamic-form-file-wrapper {
+  width: 100%;
+}
+
+/* Dark theme adjustments */
+.ui-dynamic-form-dark .ui-dynamic-form-image-previews {
+  background-color: #2d2d2d;
+  border-color: #555;
+}
+
+.ui-dynamic-form-dark .ui-dynamic-form-image-previews h4 {
+  color: #fff;
+}
+
+.ui-dynamic-form-dark .ui-dynamic-form-preview-item {
+  background-color: #3d3d3d;
+  border-color: #555;
+}
+
+.ui-dynamic-form-dark .ui-dynamic-form-preview-name {
+  color: #fff;
+}
+
+.ui-dynamic-form-dark .ui-dynamic-form-preview-size {
+  color: #ccc;
+}