#2854 - Field For Uploading Files - Web Component by kodinkat · Pull Request #193 · DiscipleTools/disciple-tools-web-components

kodinkat · 2026-01-30T17:42:07Z

see: #2854 - Field For Uploading Files disciple-tools-theme#2875

- Introduced component for uploading multiple files, featuring drag & drop, file previews, and both auto-upload and manual upload modes. - Updated and to export the new component. - Enhanced component to support icon rendering. - Updated to version 0.8.9. - Added tests and documentation for the new component.

netlify · 2026-01-30T17:42:13Z

✅ Deploy Preview for jade-chebakia-17493f ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`0e39e6e`
🔍 Latest deploy log	https://app.netlify.com/projects/jade-chebakia-17493f/deploys/698362df8e8c900008474276
😎 Deploy Preview	https://deploy-preview-193--jade-chebakia-17493f.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

kodinkat · 2026-01-30T18:07:22Z

@corsacca @cairocoder01 ready for reviewing-ish - @cairocoder01 will aim to tackle failing tests next week...

cairocoder01

Overall, this looks really great! I like the layout and interactivity of it all. Really great work!

There's a few things we need to change to fit the standards we implement for all the other components.

Component needs to be added to /src/components/kitchen-sink.stories.js
I'm unable to delete a file in storybook. Clicking the delete icon should remove the item from local state, update the UI to remove it, and trigger a change event (that is surfaced in the Storybook Actions panel). Right now it relies on the API, which is not how these components are intended to work.
Similarly, if I drag a file to the upload in storybook, I get an error "Missing required parameters for upload". It should accept the file, show it in the UI, and trigger a change event in the Actions panel. The componentService needs to be hooked up for the rest of the upload process.
It looks like there are changes to the label to support MDI icons. That's great, but doesn't seem related to this issue. Can we separate that out into a separate PR? We should also then add a story for dt-label for using MDI icons.
What is the intention for how to preview images and download documents or images? Right now, just the file name is a link. I would expect also to be able to click on the icon/thumbnail - especially in the grid view.

cairocoder01 · 2026-02-02T10:49:44Z

src/components/form/dt-form-base.js

          font-family: var(--font-family);
          font-size: 0.875rem;
          font-weight: 300;
+          margin-top: 1rem;


This shouldn't be changed in the form base. It should be overridden in the individual component styles if needed. Most components with a single form field show this message butted up against the bottom of the input field. Those with multiple inputs add an equivalent space below the last input. If that's desired for the file input, it should be in the styles within the file input component.

cairocoder01 · 2026-02-02T11:38:56Z

src/components/form/dt-upload-file/README.md

+# dt-upload-file
+
+A web component for uploading multiple files (pictures, documents, PDFs, voice messages, etc.) with drag & drop support, file preview, and both auto-upload and manual upload modes.
+


This whole file is great documentation. Can we move it to docs.mdx though? That is read by storybook and injects lots of info about the available properties. See the Standards.md for info about what other things to include in it (such as CSS variables, slots, and events, which you already have in here).

cairocoder01 · 2026-02-02T11:40:27Z

src/components/form/dt-upload-file/dt-upload-file.js

+ * Field for uploading multiple files (pictures, documents, PDFs, voice messages, etc.)
+ * Supports drag & drop, file preview, and both auto-upload and manual upload modes.
+ */
+export class DtUploadFile extends DtFormBase {


Could we consider naming this "File Upload" instead of "Upload File"? "File Upload" is a noun like the other component names, whereas "Upload File" is a verb/action that doesn't match the naming of other components.

cairocoder01 · 2026-02-02T12:33:23Z

src/components/form/dt-file-upload/dt-file-upload.js

+        }
+
+        .upload-zone.compact .upload-icon {
+          font-size: 1.75rem;


Can we put a transition: font-size 0.2s; on this to match the transition of the container? That way the icon will scale up at the same time as the container expanding.

cairocoder01 · 2026-02-02T12:41:36Z

src/components/form/dt-upload-file/dt-upload-file.js

+      const response = await fetch(url, {
+        method: 'POST',
+        headers: { 'X-WP-Nonce': window.wpApiShare.nonce },
+        body: formData,
+      });


The components shouldn't make any API calls directly or require the wpApiShare object. All of the connection to APIs should happen in the componentService and ApiService. The component should dispatch events with the needed data that those service can make use of. This helps facilitate using components in different scenarios such as a standard POST form vs the detail page where individual updates are synced live on each change event.

If this upload doesn't fit within the intention of the change event, we are namespacing custom events with dt:. You can search the code for dt:get-data as an example in the typeaheads that search the API for available options. If needed, we can use dt:upload for a custom event to handle this.

cairocoder01 · 2026-02-02T12:49:05Z

src/components/form/dt-file-upload/dt-file-upload.stories.js

+      key: 'site_id/prefix_randomstring1.jpg',
+      name: 'photo1.jpg',
+      type: 'image/jpeg',
+      size: 123456,
+      thumbnail_key: 'site_id/prefix_randomstring1_thumbnail.jpg',
+    },
+    {
+      key: 'site_id/prefix_randomstring2.pdf',
+      name: 'document.pdf',
+      type: 'application/pdf',
+      size: 456789,
+    },


If we're going to show these two sample files in the stories, you can add them to the assets directory for Storybook to know about them and be able to load them.

cairocoder01 · 2026-02-02T12:49:58Z

src/components/form/dt-file-upload/dt-file-upload.stories.js

+export const NoDelete = Template.bind({});
+NoDelete.args = {
+  deleteEnabled: false,
+  value: [
+    {
+      key: 'site_id/prefix_randomstring1.jpg',
+      name: 'photo1.jpg',
+      type: 'image/jpeg',
+      size: 123456,
+    },
+  ],
+};


I still see the delete button for this story. Is that intentional?

cairocoder01 · 2026-02-02T12:52:25Z

src/components/form/dt-file-upload/dt-file-upload.stories.js

+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+  value: [
+    {
+      key: 'site_id/prefix_randomstring1.jpg',
+      name: 'photo1.jpg',
+      type: 'image/jpeg',
+      size: 123456,
+    },
+  ],
+};


When disabled, the delete button on a file is still showing as active. It should probably just be completely hidden (which I suspect would be the same for the deleteEnabled=false story)

… component. This update includes support for multiple file uploads, drag & drop functionality, file previews, and both auto-upload and manual upload modes. Updated relevant exports and added comprehensive tests and documentation for the new component.

- Removed margin-top from the DtFormBase component's styles. - Added margin-top to the error-container class in the DtFileUpload component's styles for improved layout.

…h dt-icon - Implemented a new labelTemplate method to handle icon rendering, allowing for both image URLs and MDI icons. - Updated DtLabel component to simplify icon handling and removed redundant icon rendering logic. - Improved the overall structure and clarity of the label rendering process.

- Replaced direct API calls in DtFileUpload with event dispatching for file uploads and deletions, enhancing separation of concerns. - Introduced new methods in ApiService for file upload, deletion, and renaming, streamlining API interactions. - Added event listeners in ComponentService to handle file operations, improving component responsiveness and maintainability. - Updated the file upload logic to handle success and error callbacks more effectively.

- Created a comprehensive documentation file for the DtFileUpload component, detailing its features, usage examples, file object format, browser support, dependencies, parameters, slots, events, methods, CSS properties, theming, and parts. - Included code snippets for basic and advanced usage scenarios, enhancing developer understanding and ease of integration.

…tation - Integrated the DtFileUpload component into the kitchen sink stories for demonstration purposes. - Updated the documentation for the DtFileUpload component, correcting hover border color values and enhancing clarity on theme variables. - Implemented new methods in the DtFileUpload class to support standalone mode, allowing for local file handling without API configuration. - Enhanced file upload, deletion, and renaming functionalities to work seamlessly in standalone mode, improving user experience in Storybook.

- Added functionality to automatically detect and display appropriate icons for common file types based on MIME type or file extension. - Updated documentation to include details on automatic file type icons and usage examples. - Enhanced unit tests to cover various scenarios for file type icon detection, ensuring robust functionality.

…nd error handling - Implemented support for downloading files in both standalone and API modes, allowing for flexible file handling. - Added event dispatching for download actions, enabling integration with the componentService for API-based downloads. - Enhanced error handling during download processes, providing clearer feedback to users. - Updated unit tests to cover new download scenarios, ensuring robust functionality and user experience.

…ols-web-components into 2854-field-for-uploading-files-web-component

kodinkat · 2026-02-04T15:37:22Z

@cairocoder01 @corsacca latest updates ready for review....

kodinkat mentioned this pull request Jan 30, 2026

#2854 - Field For Uploading Files DiscipleTools/disciple-tools-theme#2875

Open

cairocoder01 requested changes Feb 2, 2026

View reviewed changes

kodinkat added 11 commits February 2, 2026 13:16

Update dt-upload-file tests to use property binding for autoUpload

e32adba

Add transition effect to upload icon in DtFileUpload component

8ff60c7

Refactor DtFormBase and DtFileUpload components

ffe1cb7

- Removed margin-top from the DtFormBase component's styles. - Added margin-top to the error-container class in the DtFileUpload component's styles for improved layout.

Merge branch 'master' of https://github.com/DiscipleTools/disciple-to…

0e39e6e

…ols-web-components into 2854-field-for-uploading-files-web-component

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

#2854 - Field For Uploading Files - Web Component#193

#2854 - Field For Uploading Files - Web Component#193
kodinkat wants to merge 12 commits intoDiscipleTools:masterfrom
kodinkat:2854-field-for-uploading-files-web-component

kodinkat commented Jan 30, 2026

Uh oh!

netlify bot commented Jan 30, 2026 •

edited

Loading

Uh oh!

kodinkat commented Jan 30, 2026

Uh oh!

cairocoder01 left a comment

Uh oh!

cairocoder01 Feb 2, 2026

Uh oh!

cairocoder01 Feb 2, 2026

Uh oh!

cairocoder01 Feb 2, 2026

Uh oh!

cairocoder01 Feb 2, 2026

Uh oh!

cairocoder01 Feb 2, 2026

Uh oh!

cairocoder01 Feb 2, 2026

Uh oh!

cairocoder01 Feb 2, 2026

Uh oh!

cairocoder01 Feb 2, 2026

Uh oh!

kodinkat commented Feb 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		# dt-upload-file

		A web component for uploading multiple files (pictures, documents, PDFs, voice messages, etc.) with drag & drop support, file preview, and both auto-upload and manual upload modes.

Conversation

kodinkat commented Jan 30, 2026

Uh oh!

netlify bot commented Jan 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for jade-chebakia-17493f ready!

Uh oh!

kodinkat commented Jan 30, 2026

Uh oh!

cairocoder01 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kodinkat commented Feb 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

netlify bot commented Jan 30, 2026 •

edited

Loading