#2854 - Field For Uploading Files

dt-assets/build/components/index.es.js

@@ -1,4 +1,4 @@
-import { E as s, C as e, w as D, B as o, D as i, a as l, b as n, d as r, e as c, f as u, u as p, A as C, g as M, x as T, h as m, i as x, j as S, y as g, k as B, t as d, r as h, l as v, m as A, n as L, o as b, p as f, z as y, q as F, c as j, v as k } from "./index-B5P35fmQ.js";
+import { F as s, E as e, x as D, C as o, D as i, a as l, b as n, d as r, e as c, f as p, u, w as C, B as M, g as T, y as m, h as x, i as S, j as d, z as g, k as B, t as h, r as v, l as A, m as F, n as L, o as b, p as f, A as y, q as U, c as j, v as k } from "./index-CVnwJslV.js";
 export {
   s as ApiService,
   e as ComponentService,
@@ -9,25 +9,26 @@ export {
   n as DtConnection,
   r as DtCopyText,
   c as DtDate,
-  u as DtDatetime,
-  p as DtFormBase,
-  C as DtIcon,
-  M as DtLabel,
-  T as DtList,
-  m as DtLocation,
-  x as DtLocationMap,
-  S as DtMapModal,
+  p as DtDatetime,
+  u as DtFileUpload,
+  C as DtFormBase,
+  M as DtIcon,
+  T as DtLabel,
+  m as DtList,
+  x as DtLocation,
+  S as DtLocationMap,
+  d as DtMapModal,
   g as DtModal,
   B as DtMultiSelect,
-  d as DtMultiSelectButtonGroup,
-  h as DtMultiText,
-  v as DtNumberField,
-  A as DtSingleSelect,
+  h as DtMultiSelectButtonGroup,
+  v as DtMultiText,
+  A as DtNumberField,
+  F as DtSingleSelect,
   L as DtTags,
   b as DtText,
   f as DtTextArea,
   y as DtTile,
-  F as DtToggle,
+  U as DtToggle,
   j as DtUsersConnection,
   k as version
 };

dt-core/admin/admin-settings-endpoints.php

@@ -1295,6 +1295,65 @@ public static function edit_field( WP_REST_Request $request ) {
                 $custom_field['default'] = $post_submission['visibility']['checked_by_default'];
             }
 
+            // Upload File Field Types: Field-specific options
+            if ( isset( $post_fields[$field_key]['type'] ) && $post_fields[$field_key]['type'] === 'file_upload' ) {
+                // Accepted file types
+                if ( isset( $post_submission['visibility']['accepted_file_types'] ) && !empty( $post_submission['visibility']['accepted_file_types'] ) ) {
+                    $types = array_map( 'trim', explode( ',', $post_submission['visibility']['accepted_file_types'] ) );
+                    $custom_field['accepted_file_types'] = $types;
+                }
+
+                // Max file size
+                if ( isset( $post_submission['visibility']['max_file_size'] ) && $post_submission['visibility']['max_file_size'] !== '' ) {
+                    $custom_field['max_file_size'] = (int) $post_submission['visibility']['max_file_size'];
+                } else if ( isset( $custom_field['max_file_size'] ) ) {
+                    unset( $custom_field['max_file_size'] );
+                }
+
+                // File type icon
+                if ( isset( $post_submission['visibility']['file_type_icon'] ) ) {
+                    $file_type_icon = sanitize_text_field( wp_unslash( $post_submission['visibility']['file_type_icon'] ) );
+                    if ( !empty( $file_type_icon ) ) {
+                        $custom_field['file_type_icon'] = $file_type_icon;
+                    } else {
+                        unset( $custom_field['file_type_icon'] );
+                    }
+                }
+
+                // Delete enabled
+                if ( isset( $post_submission['visibility']['delete_enabled'] ) ) {
+                    $custom_field['delete_enabled'] = (bool) $post_submission['visibility']['delete_enabled'];
+                } else {
+                    $custom_field['delete_enabled'] = false;
+                }
+
+                // Display layout
+                if ( isset( $post_submission['visibility']['display_layout'] ) ) {
+                    $custom_field['display_layout'] = sanitize_text_field( wp_unslash( $post_submission['visibility']['display_layout'] ) );
+                }
+
+                // Auto upload
+                if ( isset( $post_submission['visibility']['auto_upload'] ) ) {
+                    $custom_field['auto_upload'] = (bool) $post_submission['visibility']['auto_upload'];
+                } else {
+                    $custom_field['auto_upload'] = false;
+                }
+
+                // Download enabled
+                if ( isset( $post_submission['visibility']['download_enabled'] ) ) {
+                    $custom_field['download_enabled'] = (bool) $post_submission['visibility']['download_enabled'];
+                } else {
+                    $custom_field['download_enabled'] = false;
+                }
+
+                // Rename enabled
+                if ( isset( $post_submission['visibility']['rename_enabled'] ) ) {
+                    $custom_field['rename_enabled'] = (bool) $post_submission['visibility']['rename_enabled'];
+                } else {
+                    $custom_field['rename_enabled'] = false;
+                }
+            }
+
             $field_customizations[$post_type][$field_key] = $custom_field;
             update_option( 'dt_field_customizations', $field_customizations );
             wp_cache_delete( $post_type . '_field_settings' );

dt-core/admin/js/dt-settings.js

@@ -1058,6 +1058,7 @@ jQuery(document).ready(function ($) {
 
   dt_admin_modal_box.on('click', '.change-icon-button', function (e) {
     e.preventDefault();
+    e.stopPropagation(); // Prevent the dt-options.js handler from also firing
     enableModalBackDiv('modal-back-icon-picker');
     flip_card();
   });
@@ -1283,6 +1284,7 @@ jQuery(document).ready(function ($) {
                     <option value="user_select">User Select</option>
                     <option value="location">Location (grid only)</option>
                     <option value="communication_channel">Communication Channel</option>
+                    <option value="file_upload">File Upload</option>
                 </select>
                 <p id="field-type-select-description" style="margin:0.2em 0">
                     ${window.field_settings.field_types.key_select.description}
@@ -1603,7 +1605,139 @@ jQuery(document).ready(function ($) {
                 <input type="checkbox" name="show-in-creation" id="show-in-creation" ${field_settings.in_create_form ? 'checked' : ''}>
             </td>
         </tr>
-        ${type_visibility_html}
+        ${type_visibility_html}`;
+
+    // Add file_upload field-specific options
+    if (field_type === 'file_upload') {
+      let accepted_file_types = field_settings['accepted_file_types'] || [
+        'image/*',
+        'application/pdf',
+      ];
+      let max_file_size = field_settings['max_file_size'] || '';
+      let file_type_icon = field_settings['file_type_icon'] || '';
+      let delete_enabled = field_settings['delete_enabled'] !== false; // default true
+      let display_layout = field_settings['display_layout'] || 'grid';
+      let auto_upload = field_settings['auto_upload'] !== false; // default true
+      let download_enabled = field_settings['download_enabled'] !== false; // default true
+      let rename_enabled = field_settings['rename_enabled'] !== false; // default true
+
+      let file_type_icon_html = '';
+      if (
+        file_type_icon &&
+        typeof file_type_icon !== 'undefined' &&
+        file_type_icon !== 'undefined'
+      ) {
+        if (file_type_icon.trim().toLowerCase().startsWith('mdi')) {
+          file_type_icon_html = `<i class="${file_type_icon} field-icon" style="font-size: 20px; vertical-align: middle;"></i>`;
+        } else {
+          file_type_icon_html = `<img src="${file_type_icon}" class="field-icon" style="vertical-align: middle; max-width: 20px;">`;
+        }
+      }
+
+      modal_html_content += `
+        <tr>
+            <td>
+                <label for="accepted_file_types"><b>Accepted File Types</b></label>
+            </td>
+            <td>
+                <input type="text" name="accepted_file_types" id="accepted_file_types" 
+                  value="${accepted_file_types.join(', ')}" 
+                  placeholder="e.g., image/*, application/pdf, .doc, .docx"
+                  style="width: 100%;">
+                <p style="font-size: 11px; color: #666; margin-top: 5px;">
+                  Comma-separated list of MIME types or file extensions (e.g., image/*, application/pdf, .doc)
+                </p>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <label for="max_file_size"><b>Max File Size (MB)</b></label>
+            </td>
+            <td>
+                <input type="number" name="max_file_size" id="max_file_size" 
+                  value="${max_file_size}" min="0" step="0.1"
+                  placeholder="Leave empty for no limit">
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <label for="file_type_icon"><b>File Type Icon</b></label>
+            </td>
+            <td>
+                <div class="input-group">
+                    ${file_type_icon_html}
+                    <input name="file_type_icon" id="file_type_icon" type="text" 
+                      value="${file_type_icon}" style="vertical-align: middle;">
+                    <button class="button change-icon-button" style="vertical-align: middle;"
+                            data-icon-input="file_type_icon">Select Icon</button>
+                </div>
+                <p style="font-size: 11px; color: #666; margin-top: 5px;">
+                  Icon to display for non-image files (e.g., PDFs, documents)
+                </p>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <b>Delete Enabled</b>
+            </td>
+            <td>
+                <input type="checkbox" name="delete_enabled" id="delete_enabled" 
+                  ${delete_enabled ? 'checked' : ''}>
+                <label for="delete_enabled" style="margin-left: 0.5em;">
+                  Allow users to delete uploaded files
+                </label>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <b>Download Enabled</b>
+            </td>
+            <td>
+                <input type="checkbox" name="download_enabled" id="download_enabled" 
+                  ${download_enabled ? 'checked' : ''}>
+                <label for="download_enabled" style="margin-left: 0.5em;">
+                  Allow users to download uploaded files
+                </label>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <b>Rename Enabled</b>
+            </td>
+            <td>
+                <input type="checkbox" name="rename_enabled" id="rename_enabled" 
+                  ${rename_enabled ? 'checked' : ''}>
+                <label for="rename_enabled" style="margin-left: 0.5em;">
+                  Allow users to rename uploaded files
+                </label>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <label for="display_layout"><b>Display Layout</b></label>
+            </td>
+            <td>
+                <select name="display_layout" id="display_layout">
+                  <option value="grid" ${display_layout === 'grid' ? 'selected' : ''}>Grid</option>
+                  <option value="list" ${display_layout === 'list' ? 'selected' : ''}>List</option>
+                </select>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <b>Auto Upload</b>
+            </td>
+            <td>
+                <input type="checkbox" name="auto_upload" id="auto_upload" 
+                  ${auto_upload ? 'checked' : ''}>
+                <label for="auto_upload" style="margin-left: 0.5em;">
+                  Automatically upload files when selected (uncheck to require manual upload)
+                </label>
+            </td>
+        </tr>`;
+    }
+
+    modal_html_content += `
         <tr class="last-row">
             <td>
                 ${delete_field_html_content}
@@ -2305,6 +2439,20 @@ jQuery(document).ready(function ($) {
       );
     }
 
+    // Add file_upload field-specific options to visibility object
+    if (field_settings['type'] && field_settings['type'] === 'file_upload') {
+      visibility['accepted_file_types'] = $('#accepted_file_types')
+        .val()
+        .trim();
+      visibility['max_file_size'] = $('#max_file_size').val().trim();
+      visibility['file_type_icon'] = $('#file_type_icon').val().trim();
+      visibility['delete_enabled'] = $('#delete_enabled').is(':checked');
+      visibility['display_layout'] = $('#display_layout').val();
+      visibility['auto_upload'] = $('#auto_upload').is(':checked');
+      visibility['download_enabled'] = $('#download_enabled').is(':checked');
+      visibility['rename_enabled'] = $('#rename_enabled').is(':checked');
+    }
+
     if (custom_name === '') {
       $('#edit-field-custom-name').css('border', '2px solid #e14d43');
       return false;