#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	`529f16e`
🔍 Latest deploy log	https://app.netlify.com/projects/jade-chebakia-17493f/deploys/69a03a1ec80cf1000837787a
😎 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.

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

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

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

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

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

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

… 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....

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

cairocoder01

This is looking great. I think just some adjustments for the change event details, mostly:

On "With Files" story, if I delete one of the files, they both disappear
When deleting a file, looking at the event details, both the newValue and oldValue are an empty array. The oldValue should contain the value before deleting the selected file
When I drag a new file to the component, the change event shows the new value in the oldValue property of the details, which is the same as what is in the newValue property
If I click the photo.jpg file to open it for preview, the link doesn't seem to show anything. I think it has to do with being a data URI. If I open dev tools and click the value of the HREF, it seems to work. Not sure what the difference is when clicking the thumbnail

If it's helpful, I just merged in a bunch of agents.md stuff that helps to enforce some standards for code style, expected stories, and tests. If you're using an agent, hopefully it should pick that up and keep things in line with how I've just cleaned up the rest of the components.

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

- Created configuration XML, JSON data, PDF, DOCX, TXT, HTML, and unknown file types for the dt-file-upload component. - These files serve as sample assets for Storybook previews and demonstrate various file handling capabilities.

kodinkat · 2026-02-10T13:44:49Z

@cairocoder01 see latest update...

cairocoder01 · 2026-02-10T15:24:58Z

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

+      @dt:upload=${(event) => onUpload?.(event.detail)}
+      @dt:delete-file=${(event) => onDeleteFile?.(event.detail)}
+      @dt:rename-file=${(event) => onRenameFile?.(event.detail)}
+      @dt:download-file=${(event) => onDownloadFile?.(event.detail)}


I'm not seeing these show up in the Storybook actions panel. I think the syntax might be a little off. They should be just like the change event, so @dt:upload=${onUpload}

…ce event dispatching - Updated the _filesToMockFileObjects method to generate blob URLs for images instead of data URLs, improving browser compatibility. - Added event dispatching for upload, delete, rename, and download actions to facilitate integration with Storybook actions panel. - Implemented cleanup of blob URLs to prevent memory leaks in standalone mode. - Enhanced the download functionality to use the correct file name when downloading files.

kodinkat · 2026-02-11T10:23:20Z

@cairocoder01 review ready....

cairocoder01 · 2026-02-18T12:56:27Z

After testing in the theme, I found a few more little things:

If displaying in list view, the loading/saved indicators show up behind the delete button:

We don't have a story for the manual upload option. It would be good to add that.
We are missing the standard story for a basic form submission. That will help to ensure that when the events are not hooked up to API endpoints, the file content will still be sent via javascript or standard HTML form submission

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

- Changed stylesheet import in Storybook from style.css to components.css for better organization. - Added status indicators in the DtFileUpload component to display loading and saved states. - Enhanced ManualUpload story to include additional args for better demonstration. - Introduced BasicForm story to showcase the component with default values.

…oved file handling - Added upload progress tracking to the DtFileUpload component, allowing users to see the upload percentage. - Updated the API service to support progress callbacks during file uploads. - Enhanced the component service to relay upload progress to the DtFileUpload component. - Introduced new styles for upload status indicators and progress text for better user feedback.

kodinkat · 2026-02-20T14:46:09Z

@cairocoder01 review ready.....

cairocoder01 · 2026-02-23T13:28:43Z

When using the Basic Form story:

The default values sent with the form are an empty array JSON string: "[]". It should be an actual empty array.
When a file is added, the JS value is being set correctly, but the value sent with a native HTML form submit is still showing the empty JSON array string. You can look at something like the multi-text field for how to handle complex structured values.

- Removed upload progress tracking from the DtFileUpload component, including related styles and state management. - Updated API and component services to eliminate progress callback handling. - Adjusted styles for status indicators to improve layout without progress text.

…proved handling - Added converters for the value attribute to parse and stringify arrays, ensuring proper data handling. - Updated firstUpdated lifecycle method to parse value if not an array. - Modified updated lifecycle method to set form value when the value property changes. - Adjusted Storybook to pass the value directly instead of stringifying it.

kodinkat · 2026-02-26T12:48:48Z

@cairocoder01 review ready....

cairocoder01 · 2026-03-02T10:45:35Z

Looks good to me. Will just wait to merge until the theme PR is all approved.

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

cairocoder01 reviewed Feb 9, 2026

View reviewed changes

src/components/form/dt-file-upload/dt-file-upload.stories.js Show resolved Hide resolved

cairocoder01 requested changes Feb 9, 2026

View reviewed changes

kodinkat added 2 commits February 10, 2026 10:30

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

0016804

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

Add initial files for dt-file-upload component

7173b40

- Created configuration XML, JSON data, PDF, DOCX, TXT, HTML, and unknown file types for the dt-file-upload component. - These files serve as sample assets for Storybook previews and demonstrate various file handling capabilities.

cairocoder01 reviewed Feb 10, 2026

View reviewed changes

kodinkat added 3 commits February 20, 2026 09:50

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

499b125

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

kodinkat added 2 commits February 26, 2026 11:03

cairocoder01 merged commit f9a3fde into DiscipleTools:master Mar 2, 2026
5 checks passed

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 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kodinkat commented Feb 4, 2026

Uh oh!

Uh oh!

cairocoder01 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kodinkat commented Feb 10, 2026

Uh oh!

cairocoder01 Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

kodinkat commented Feb 11, 2026

Uh oh!

cairocoder01 commented Feb 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kodinkat commented Feb 20, 2026

Uh oh!

cairocoder01 commented Feb 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kodinkat commented Feb 26, 2026

Uh oh!

cairocoder01 commented Mar 2, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

netlify bot commented Jan 30, 2026 •

edited

Loading

cairocoder01 left a comment •

edited

Loading

cairocoder01 left a comment •

edited

Loading

cairocoder01 commented Feb 18, 2026 •

edited

Loading

cairocoder01 commented Feb 23, 2026 •

edited

Loading