Skip to content

feat(add-data): Add modal to import data via file upload - #189

Open
david-bretaud-dev wants to merge 4 commits into
mainfrom
david-bretaud-dev/feat-add-modal-to-import-new-data
Open

feat(add-data): Add modal to import data via file upload#189
david-bretaud-dev wants to merge 4 commits into
mainfrom
david-bretaud-dev/feat-add-modal-to-import-new-data

Conversation

@david-bretaud-dev

@david-bretaud-dev david-bretaud-dev commented Jul 12, 2026

Copy link
Copy Markdown
Collaborator

Highlights

  1. Add "add-data" feature slice.
  2. Add Dialog from shadcn CLI
  3. I had an issue with some container breakpoints used by shadcn (max-w-lg) => the dialog sized was wronged. Why ? because of the spacing custom tokens added in the style. I removed it (and their usage) to be sure we don't have conflicts with native containers token.

Demos

UI only

demo-upload-file-data-ui.mp4

Full flow - Form based (internal)

demo-append-data-inventaire-for.mp4

Full flow - External data

demo-append-external-data.mp4

@david-bretaud-dev david-bretaud-dev self-assigned this Jul 12, 2026
@david-bretaud-dev david-bretaud-dev linked an issue Jul 12, 2026 that may be closed by this pull request
@david-bretaud-dev
david-bretaud-dev force-pushed the david-bretaud-dev/feat-add-modal-to-import-new-data branch from beffea5 to 04316e3 Compare July 19, 2026 08:23
Comment thread webapp/src/app/routes/app-router-all4trees.tsx
@david-bretaud-dev
david-bretaud-dev force-pushed the david-bretaud-dev/feat-add-modal-to-import-new-data branch from 04316e3 to 54560ef Compare July 19, 2026 08:33
@david-bretaud-dev
david-bretaud-dev changed the base branch from main to david-bretaud-dev/refactor-remove-spacing-tokens July 19, 2026 08:33
@david-bretaud-dev
david-bretaud-dev force-pushed the david-bretaud-dev/refactor-remove-spacing-tokens branch from cf98511 to 9976ad4 Compare July 19, 2026 08:35
@david-bretaud-dev
david-bretaud-dev force-pushed the david-bretaud-dev/feat-add-modal-to-import-new-data branch from 54560ef to db3ec55 Compare July 19, 2026 08:35
Comment thread webapp/src/app/routes/app-router-all4trees.tsx Outdated
Comment thread webapp/src/app/routes/app-router-all4trees.tsx
// Accepted upload extensions per kind (coordo's file / kobotoolbox loaders).
// Form data is the multi-sheet KoboToolbox answers workbook (.xlsx).
export const ACCEPTED_EXTENSIONS_BY_KIND = {
[RESOURCE_KINDS.ExternalData]: ".csv,.xls,.xlsx",

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why it is not a table ? Also there is more supported extensions (see here and here

Suggested change
[RESOURCE_KINDS.ExternalData]: ".csv,.xls,.xlsx",
[RESOURCE_KINDS.ExternalData]: [
".csv",
".tsv",
".tab",
".xlsx",
".xls",
".xlsm",
".xlsb",
".odf",
".ods",
".odt",
],

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay to have a table, but it should be joined as a final string to be injected in the input at the end (this is the API of the html element): https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/file#accept

The accept attribute value is a string that defines the file types the file input should accept. This string is a comma-separated list of unique file type specifiers.

Comment thread webapp/src/features/add-data/constants.ts Outdated
Comment thread webapp/src/shared/i18n/translations/en/common.json Outdated
Comment thread webapp/src/shared/i18n/translations/fr/common.json Outdated
Comment thread webapp/src/shared/i18n/translations/en/common.json Outdated
Comment thread webapp/src/shared/i18n/translations/en/common.json Outdated
Comment thread webapp/src/shared/i18n/translations/en/common.json Outdated
Comment thread webapp/src/shared/i18n/translations/fr/common.json Outdated
@david-bretaud-dev
david-bretaud-dev force-pushed the david-bretaud-dev/refactor-remove-spacing-tokens branch from 9976ad4 to be7c6c4 Compare July 25, 2026 17:27
@david-bretaud-dev
david-bretaud-dev force-pushed the david-bretaud-dev/feat-add-modal-to-import-new-data branch from db3ec55 to 87cfef3 Compare July 26, 2026 09:49
@david-bretaud-dev
david-bretaud-dev changed the base branch from david-bretaud-dev/refactor-remove-spacing-tokens to main July 26, 2026 09:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Feature: Add Button and Modal to import DataFile

2 participants