From 6d3138e383558c58ecb7018358422b0640ae016a Mon Sep 17 00:00:00 2001 From: Lucas Pennati Date: Thu, 18 Jul 2024 12:07:45 +0200 Subject: [PATCH] Make file upload return an array of files --- docs/changelog.md | 9 +++++++++ docs/components/six-file-upload.md | 11 ++++++----- .../src/components/six-file-upload/index.html | 3 ++- .../src/components/six-file-upload/readme.md | 8 ++++---- .../components/six-file-upload/six-file-upload.tsx | 11 ++--------- 5 files changed, 23 insertions(+), 19 deletions(-) diff --git a/docs/changelog.md b/docs/changelog.md index 3cc08b215..ca8793418 100644 --- a/docs/changelog.md +++ b/docs/changelog.md @@ -6,6 +6,15 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). ## Upcoming +### Added + +### Changed + +- BREAKING: `six-file-upload` on upload success now returns a `FileList` regardless of the value of + the `multiple` property + +### Fixed + ## 4.2.4 - 2024-07-04 ### Fixed diff --git a/docs/components/six-file-upload.md b/docs/components/six-file-upload.md index c0317859e..3c1d73b90 100644 --- a/docs/components/six-file-upload.md +++ b/docs/components/six-file-upload.md @@ -15,7 +15,8 @@ let counter = 0; fileUpload.addEventListener('six-file-upload-success', ({ detail }) => { - const file = detail.file; + // Since multiple is by default false, we know the array contains only one element + const file = detail.files[0]; const item = Object.assign(document.createElement('six-file-list-item'), { id: String(counter++), @@ -181,10 +182,10 @@ When using the `error-text` slot, it is recommended to use the `six-error` compo ## Events -| Event | Description | Type | -| ------------------------- | ------------------------------------------------------------------------ | -------------------------------------------- | -| `six-file-upload-failure` | Triggers when an uploaded file doesn't match MIME type or max file size. | `CustomEvent` | -| `six-file-upload-success` | Triggers when a file is added. | `CustomEvent` | +| Event | Description | Type | +| ------------------------- | ------------------------------------------------------------------------ | ------------------------------------------ | +| `six-file-upload-failure` | Triggers when an uploaded file doesn't match MIME type or max file size. | `CustomEvent` | +| `six-file-upload-success` | Triggers when a file is added. | `CustomEvent` | ## Slots diff --git a/libraries/ui-library/src/components/six-file-upload/index.html b/libraries/ui-library/src/components/six-file-upload/index.html index df576d79e..20ebff63c 100644 --- a/libraries/ui-library/src/components/six-file-upload/index.html +++ b/libraries/ui-library/src/components/six-file-upload/index.html @@ -22,7 +22,8 @@

Simple File Upload

let counter = 0; fileUpload.addEventListener('six-file-upload-success', ({ detail }) => { - const file = detail.file; + // Since multiple is by default false, we know the array contains only one element + const file = detail.files[0]; const item = Object.assign(document.createElement('six-file-list-item'), { id: String(counter++), diff --git a/libraries/ui-library/src/components/six-file-upload/readme.md b/libraries/ui-library/src/components/six-file-upload/readme.md index cbbf3aa42..00f13a81e 100644 --- a/libraries/ui-library/src/components/six-file-upload/readme.md +++ b/libraries/ui-library/src/components/six-file-upload/readme.md @@ -22,10 +22,10 @@ ## Events -| Event | Description | Type | -| ------------------------- | ------------------------------------------------------------------------ | -------------------------------------------- | -| `six-file-upload-failure` | Triggers when an uploaded file doesn't match MIME type or max file size. | `CustomEvent` | -| `six-file-upload-success` | Triggers when a file is added. | `CustomEvent` | +| Event | Description | Type | +| ------------------------- | ------------------------------------------------------------------------ | ------------------------------------------ | +| `six-file-upload-failure` | Triggers when an uploaded file doesn't match MIME type or max file size. | `CustomEvent` | +| `six-file-upload-success` | Triggers when a file is added. | `CustomEvent` | ## Slots diff --git a/libraries/ui-library/src/components/six-file-upload/six-file-upload.tsx b/libraries/ui-library/src/components/six-file-upload/six-file-upload.tsx index 57476365a..1487e218f 100644 --- a/libraries/ui-library/src/components/six-file-upload/six-file-upload.tsx +++ b/libraries/ui-library/src/components/six-file-upload/six-file-upload.tsx @@ -1,16 +1,10 @@ import { Component, Element, Event, EventEmitter, h, Listen, Prop, State } from '@stencil/core'; import { hasSlot } from '../../utils/slot'; -interface ISingleFile { - file: File; -} - -interface IMultipleFiles { +export interface SixFileUploadSuccessPayload { files: FileList; } -export type SixFileUploadSuccessPayload = ISingleFile | IMultipleFiles; - export interface SixFileUploadFailurePayload { reason: string; } @@ -145,8 +139,7 @@ export class SixFileUpload { } } - const eventPayload: SixFileUploadSuccessPayload = this.multiple ? { files } : { file: files[0] }; - this.success.emit(eventPayload); + this.success.emit({ files } as SixFileUploadSuccessPayload); }; componentWillLoad() {