@digital-realty/ix-file-uploader 1.1.13 → 1.1.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/IxFileUploader.d.ts +16 -2
- package/dist/IxFileUploader.js +127 -28
- package/dist/IxFileUploader.js.map +1 -1
- package/dist/ix-file-uploader.min.js +63 -3
- package/dist/styles/ix-file-uploader-styles.js +31 -1
- package/dist/styles/ix-file-uploader-styles.js.map +1 -1
- package/package.json +7 -6
package/dist/IxFileUploader.d.ts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import { LitElement, PropertyValues, TemplateResult } from 'lit';
|
|
1
|
+
import { LitElement, nothing, PropertyValues, TemplateResult } from 'lit';
|
|
2
2
|
import { Ref } from 'lit/directives/ref.js';
|
|
3
3
|
import './ix-file-chip.js';
|
|
4
4
|
import DataStorageUnit from './data-storage-unit.js';
|
|
5
5
|
import UploaderFile from './internal/uploader-file.js';
|
|
6
|
+
import '@digital-realty/ix-dialog/ix-dialog.js';
|
|
6
7
|
export declare class IxFileUploader extends LitElement {
|
|
7
8
|
static readonly styles: import("lit").CSSResult[];
|
|
8
9
|
/** @nocollapse */
|
|
@@ -10,18 +11,25 @@ export declare class IxFileUploader extends LitElement {
|
|
|
10
11
|
private readonly internals;
|
|
11
12
|
dropzoneRef: Ref<HTMLInputElement>;
|
|
12
13
|
fileRef: Ref<HTMLInputElement>;
|
|
14
|
+
showTemplateFileLink: boolean;
|
|
13
15
|
allowMultipleFiles: boolean;
|
|
14
16
|
allowDuplicates: boolean;
|
|
17
|
+
headerText: string;
|
|
15
18
|
bodyText: string;
|
|
19
|
+
hintText: string | undefined;
|
|
16
20
|
defaultFiles: Array<UploaderFile>;
|
|
17
21
|
allowDeleteDefaultFiles: boolean;
|
|
22
|
+
hideBody: boolean;
|
|
18
23
|
extensions: string[];
|
|
19
|
-
headerText: string;
|
|
20
24
|
maxFileCount: number;
|
|
21
25
|
maxFileSizeUnit: DataStorageUnit;
|
|
22
26
|
maxFileSizeValue: number;
|
|
23
27
|
name: string;
|
|
24
28
|
error: boolean;
|
|
29
|
+
askConfirmationOnDeleteFile: boolean;
|
|
30
|
+
deleteConfirmationDialogLabel: string;
|
|
31
|
+
isDeleteBulkFileDialogOpen: boolean;
|
|
32
|
+
pendingFileDeletion: UploaderFile | undefined;
|
|
25
33
|
files: Array<UploaderFile>;
|
|
26
34
|
private maxFileSizeInBytes;
|
|
27
35
|
/**
|
|
@@ -30,16 +38,22 @@ export declare class IxFileUploader extends LitElement {
|
|
|
30
38
|
get form(): HTMLFormElement | null;
|
|
31
39
|
private onDrop;
|
|
32
40
|
private onFileChange;
|
|
41
|
+
get allowedMaxFileCount(): number;
|
|
33
42
|
private process;
|
|
34
43
|
private updateState;
|
|
35
44
|
private onFilesUploaded;
|
|
36
45
|
private onFileClick;
|
|
37
46
|
private onFileDelete;
|
|
47
|
+
handleDeleteBulkFile(): void;
|
|
48
|
+
deleteLastFileWithoutConfirmation(): void;
|
|
38
49
|
private openFileUploadDialog;
|
|
39
50
|
protected firstUpdated(): void;
|
|
40
51
|
protected update(changedProperties: PropertyValues): void;
|
|
41
52
|
isFileDeletable(file: UploaderFile): boolean;
|
|
42
53
|
private renderFileList;
|
|
43
54
|
protected updated(_: PropertyValues): void;
|
|
55
|
+
renderDeleteBulkFileConfirmationDialog(): TemplateResult<1> | typeof nothing;
|
|
56
|
+
renderHintText(): TemplateResult<1> | typeof nothing;
|
|
57
|
+
renderBody(): TemplateResult<1>;
|
|
44
58
|
protected render(): TemplateResult<1>;
|
|
45
59
|
}
|
package/dist/IxFileUploader.js
CHANGED
|
@@ -9,24 +9,32 @@ import getTotalBytes from './internal/get-total-bytes.js';
|
|
|
9
9
|
import { processFiles } from './internal/process-files.js';
|
|
10
10
|
import sortFilesAscending from './internal/sort-files-ascending.js';
|
|
11
11
|
import IxFileUploaderStyles from './styles/ix-file-uploader-styles.js';
|
|
12
|
+
import '@digital-realty/ix-dialog/ix-dialog.js';
|
|
12
13
|
export class IxFileUploader extends LitElement {
|
|
13
14
|
constructor() {
|
|
14
15
|
super(...arguments);
|
|
15
16
|
this.internals = this.attachInternals();
|
|
16
17
|
this.dropzoneRef = createRef();
|
|
17
18
|
this.fileRef = createRef();
|
|
19
|
+
this.showTemplateFileLink = false;
|
|
18
20
|
this.allowMultipleFiles = false;
|
|
19
21
|
this.allowDuplicates = false;
|
|
22
|
+
this.headerText = '';
|
|
20
23
|
this.bodyText = '';
|
|
24
|
+
this.hintText = undefined;
|
|
21
25
|
this.defaultFiles = [];
|
|
22
26
|
this.allowDeleteDefaultFiles = false;
|
|
27
|
+
this.hideBody = false;
|
|
23
28
|
this.extensions = [];
|
|
24
|
-
this.headerText = '';
|
|
25
29
|
this.maxFileCount = 10;
|
|
26
30
|
this.maxFileSizeUnit = DataStorageUnit.MB;
|
|
27
31
|
this.maxFileSizeValue = 10;
|
|
28
32
|
this.name = 'ix-file-uploader';
|
|
29
33
|
this.error = false;
|
|
34
|
+
this.askConfirmationOnDeleteFile = false;
|
|
35
|
+
this.deleteConfirmationDialogLabel = 'Are you sure you want to delete your upload file?';
|
|
36
|
+
this.isDeleteBulkFileDialogOpen = false;
|
|
37
|
+
this.pendingFileDeletion = undefined;
|
|
30
38
|
this.files = [];
|
|
31
39
|
this.maxFileSizeInBytes = 0;
|
|
32
40
|
}
|
|
@@ -53,13 +61,16 @@ export class IxFileUploader extends LitElement {
|
|
|
53
61
|
// clear the files from the file input; we are tracking state at the component level, not in the file input
|
|
54
62
|
this.fileRef.value.files = new DataTransfer().files;
|
|
55
63
|
}
|
|
64
|
+
get allowedMaxFileCount() {
|
|
65
|
+
return this.allowMultipleFiles ? this.maxFileCount : 1;
|
|
66
|
+
}
|
|
56
67
|
// common method for processing files which are dropped or selected from file input dialog
|
|
57
68
|
process(filesToProcess) {
|
|
58
69
|
const results = processFiles({
|
|
59
70
|
currentFiles: this.files,
|
|
60
71
|
extensions: this.extensions,
|
|
61
72
|
filesToProcess,
|
|
62
|
-
maxFileCount: this.
|
|
73
|
+
maxFileCount: this.allowedMaxFileCount,
|
|
63
74
|
maxFileSizeInBytes: this.maxFileSizeInBytes,
|
|
64
75
|
allowDuplicates: this.allowDuplicates,
|
|
65
76
|
});
|
|
@@ -101,14 +112,28 @@ export class IxFileUploader extends LitElement {
|
|
|
101
112
|
this.dispatchEvent(event);
|
|
102
113
|
}
|
|
103
114
|
onFileDelete(e) {
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
115
|
+
this.pendingFileDeletion = e.detail.file;
|
|
116
|
+
if (this.askConfirmationOnDeleteFile) {
|
|
117
|
+
this.isDeleteBulkFileDialogOpen = true;
|
|
118
|
+
return;
|
|
119
|
+
}
|
|
120
|
+
this.handleDeleteBulkFile();
|
|
121
|
+
}
|
|
122
|
+
handleDeleteBulkFile() {
|
|
123
|
+
this.files = [...this.files].filter(file => { var _a; return file.id !== ((_a = this.pendingFileDeletion) === null || _a === void 0 ? void 0 : _a.id); });
|
|
107
124
|
const event = new CustomEvent('on-file-removed', {
|
|
108
|
-
detail: { allFiles: this.files, file:
|
|
125
|
+
detail: { allFiles: this.files, file: this.pendingFileDeletion },
|
|
109
126
|
});
|
|
127
|
+
this.isDeleteBulkFileDialogOpen = false;
|
|
110
128
|
this.dispatchEvent(event);
|
|
111
129
|
}
|
|
130
|
+
deleteLastFileWithoutConfirmation() {
|
|
131
|
+
if (this.files.length === 0) {
|
|
132
|
+
return; // no files to delete
|
|
133
|
+
}
|
|
134
|
+
this.pendingFileDeletion = this.files[this.files.length - 1];
|
|
135
|
+
this.handleDeleteBulkFile();
|
|
136
|
+
}
|
|
112
137
|
openFileUploadDialog() {
|
|
113
138
|
var _a;
|
|
114
139
|
(_a = this.fileRef.value) === null || _a === void 0 ? void 0 : _a.click();
|
|
@@ -155,10 +180,21 @@ export class IxFileUploader extends LitElement {
|
|
|
155
180
|
@on-file-click=${this.onFileClick}
|
|
156
181
|
@on-file-delete=${this.onFileDelete}
|
|
157
182
|
></ix-file-chip>`);
|
|
183
|
+
const uploadedFileListClasses = {
|
|
184
|
+
'uploaded-file-list': true,
|
|
185
|
+
'uploaded-file-list--spaced': !this.hideBody
|
|
186
|
+
};
|
|
158
187
|
return html `
|
|
159
|
-
<ul class
|
|
188
|
+
<ul class=${classMap(uploadedFileListClasses)}">
|
|
160
189
|
${chips}
|
|
190
|
+
${this.showTemplateFileLink ?
|
|
191
|
+
html `<li class="ix-file-uploader__template-file">
|
|
192
|
+
<slot name="template-file"></slot>
|
|
193
|
+
</li>`
|
|
194
|
+
: nothing}
|
|
195
|
+
|
|
161
196
|
</ul>
|
|
197
|
+
${this.renderDeleteBulkFileConfirmationDialog()}
|
|
162
198
|
`;
|
|
163
199
|
}
|
|
164
200
|
updated(_) {
|
|
@@ -168,28 +204,70 @@ export class IxFileUploader extends LitElement {
|
|
|
168
204
|
});
|
|
169
205
|
this.internals.setFormValue(formData);
|
|
170
206
|
}
|
|
171
|
-
|
|
207
|
+
renderDeleteBulkFileConfirmationDialog() {
|
|
208
|
+
if (!this.askConfirmationOnDeleteFile)
|
|
209
|
+
return nothing;
|
|
210
|
+
return html `<ix-dialog
|
|
211
|
+
id="deleteFileConfirmationDialog"
|
|
212
|
+
?open=${this.isDeleteBulkFileDialogOpen}
|
|
213
|
+
preventCloseOnScrimClick="true"
|
|
214
|
+
@closed=${() => { this.isDeleteBulkFileDialogOpen = false; }}
|
|
215
|
+
@close=${() => { this.isDeleteBulkFileDialogOpen = false; }}
|
|
216
|
+
>
|
|
217
|
+
<form slot="content" id="delete-file-id" method="dialog" class="delete-file-confirmation-dialog">
|
|
218
|
+
${this.deleteConfirmationDialogLabel}
|
|
219
|
+
</form>
|
|
220
|
+
<div slot="actions">
|
|
221
|
+
<ix-button appearance="text" @click=${() => { this.isDeleteBulkFileDialogOpen = false; }}>
|
|
222
|
+
<span class="button-label">NO</span>
|
|
223
|
+
</ix-button>
|
|
224
|
+
<ix-button
|
|
225
|
+
appearance="text"
|
|
226
|
+
name="submitBtn"
|
|
227
|
+
@click=${() => this.handleDeleteBulkFile()}
|
|
228
|
+
>
|
|
229
|
+
<span class="button-label">YES</span>
|
|
230
|
+
</ix-button>
|
|
231
|
+
</div>
|
|
232
|
+
</ix-dialog>`;
|
|
233
|
+
}
|
|
234
|
+
renderHintText() {
|
|
235
|
+
if (!this.hintText) {
|
|
236
|
+
return nothing;
|
|
237
|
+
}
|
|
238
|
+
return html `<div class="ix-file-uploader__hint-text">${this.hintText}</div>`;
|
|
239
|
+
}
|
|
240
|
+
renderBody() {
|
|
172
241
|
const accept = this.extensions.map(ext => `.${ext}`).join(', ');
|
|
242
|
+
const classes = {
|
|
243
|
+
'ix-file-uploader--hide-body': this.hideBody,
|
|
244
|
+
};
|
|
245
|
+
return html `<div class=${classMap(classes)}>
|
|
246
|
+
<div
|
|
247
|
+
class="dropzone"
|
|
248
|
+
@click=${this.openFileUploadDialog}
|
|
249
|
+
@keyup=${this.openFileUploadDialog}
|
|
250
|
+
${ref(this.dropzoneRef)}
|
|
251
|
+
>
|
|
252
|
+
<div class="ix-file-uploader__label">${this.headerText}</div>
|
|
253
|
+
<div class="ix-file-uploader__help-text">${this.bodyText}</div>
|
|
254
|
+
<input
|
|
255
|
+
accept=${accept}
|
|
256
|
+
class="file-input"
|
|
257
|
+
?multiple=${this.allowMultipleFiles}
|
|
258
|
+
onchange=${(e) => this.onFileChange(e)}
|
|
259
|
+
${ref(this.fileRef)}
|
|
260
|
+
type="file"
|
|
261
|
+
/>
|
|
262
|
+
</div>
|
|
263
|
+
${this.renderHintText()}
|
|
264
|
+
</div>`;
|
|
265
|
+
}
|
|
266
|
+
render() {
|
|
173
267
|
return html `<div
|
|
174
268
|
class=${classMap({ 'ix-file-uploader': true, error: this.error })}
|
|
175
269
|
>
|
|
176
|
-
|
|
177
|
-
class="dropzone"
|
|
178
|
-
@click=${this.openFileUploadDialog}
|
|
179
|
-
@keyup=${this.openFileUploadDialog}
|
|
180
|
-
${ref(this.dropzoneRef)}
|
|
181
|
-
>
|
|
182
|
-
<div class="ix-file-uploader__label">${this.headerText}</div>
|
|
183
|
-
<div class="ix-file-uploader__help-text">${this.bodyText}</div>
|
|
184
|
-
<input
|
|
185
|
-
accept=${accept}
|
|
186
|
-
class="file-input"
|
|
187
|
-
?multiple=${this.allowMultipleFiles}
|
|
188
|
-
onchange=${(e) => this.onFileChange(e)}
|
|
189
|
-
${ref(this.fileRef)}
|
|
190
|
-
type="file"
|
|
191
|
-
/>
|
|
192
|
-
</div>
|
|
270
|
+
${this.renderBody()}
|
|
193
271
|
${this.files.length ? this.renderFileList(this.files) : nothing}
|
|
194
272
|
</div>`;
|
|
195
273
|
}
|
|
@@ -197,27 +275,36 @@ export class IxFileUploader extends LitElement {
|
|
|
197
275
|
IxFileUploader.styles = [IxFileUploaderStyles];
|
|
198
276
|
/** @nocollapse */
|
|
199
277
|
IxFileUploader.formAssociated = true;
|
|
278
|
+
__decorate([
|
|
279
|
+
property({ type: Boolean })
|
|
280
|
+
], IxFileUploader.prototype, "showTemplateFileLink", void 0);
|
|
200
281
|
__decorate([
|
|
201
282
|
property({ type: Boolean })
|
|
202
283
|
], IxFileUploader.prototype, "allowMultipleFiles", void 0);
|
|
203
284
|
__decorate([
|
|
204
285
|
property({ type: Boolean })
|
|
205
286
|
], IxFileUploader.prototype, "allowDuplicates", void 0);
|
|
287
|
+
__decorate([
|
|
288
|
+
property()
|
|
289
|
+
], IxFileUploader.prototype, "headerText", void 0);
|
|
206
290
|
__decorate([
|
|
207
291
|
property()
|
|
208
292
|
], IxFileUploader.prototype, "bodyText", void 0);
|
|
293
|
+
__decorate([
|
|
294
|
+
property()
|
|
295
|
+
], IxFileUploader.prototype, "hintText", void 0);
|
|
209
296
|
__decorate([
|
|
210
297
|
property({ type: Array })
|
|
211
298
|
], IxFileUploader.prototype, "defaultFiles", void 0);
|
|
212
299
|
__decorate([
|
|
213
300
|
property({ type: Boolean })
|
|
214
301
|
], IxFileUploader.prototype, "allowDeleteDefaultFiles", void 0);
|
|
302
|
+
__decorate([
|
|
303
|
+
property({ type: Boolean })
|
|
304
|
+
], IxFileUploader.prototype, "hideBody", void 0);
|
|
215
305
|
__decorate([
|
|
216
306
|
property({ type: Array })
|
|
217
307
|
], IxFileUploader.prototype, "extensions", void 0);
|
|
218
|
-
__decorate([
|
|
219
|
-
property()
|
|
220
|
-
], IxFileUploader.prototype, "headerText", void 0);
|
|
221
308
|
__decorate([
|
|
222
309
|
property({ type: Number })
|
|
223
310
|
], IxFileUploader.prototype, "maxFileCount", void 0);
|
|
@@ -233,6 +320,18 @@ __decorate([
|
|
|
233
320
|
__decorate([
|
|
234
321
|
property({ type: Boolean })
|
|
235
322
|
], IxFileUploader.prototype, "error", void 0);
|
|
323
|
+
__decorate([
|
|
324
|
+
property({ type: Boolean })
|
|
325
|
+
], IxFileUploader.prototype, "askConfirmationOnDeleteFile", void 0);
|
|
326
|
+
__decorate([
|
|
327
|
+
property()
|
|
328
|
+
], IxFileUploader.prototype, "deleteConfirmationDialogLabel", void 0);
|
|
329
|
+
__decorate([
|
|
330
|
+
state()
|
|
331
|
+
], IxFileUploader.prototype, "isDeleteBulkFileDialogOpen", void 0);
|
|
332
|
+
__decorate([
|
|
333
|
+
state()
|
|
334
|
+
], IxFileUploader.prototype, "pendingFileDeletion", void 0);
|
|
236
335
|
__decorate([
|
|
237
336
|
state()
|
|
238
337
|
], IxFileUploader.prototype, "files", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxFileUploader.js","sourceRoot":"","sources":["../src/IxFileUploader.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, PropertyValues, TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { createRef, ref, Ref } from 'lit/directives/ref.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport './ix-file-chip.js';\nimport DataStorageUnit from './data-storage-unit.js';\nimport FileInfo from './internal/file-info.js';\nimport FileUploadResult from './internal/file-upload-result.js';\nimport FileChangeInfo from './internal/file-change-info.js';\nimport FilesUploadedInfo from './internal/files-uploaded-info.js';\nimport getTotalBytes from './internal/get-total-bytes.js';\nimport { processFiles } from './internal/process-files.js';\nimport sortFilesAscending from './internal/sort-files-ascending.js';\nimport IxFileUploaderStyles from './styles/ix-file-uploader-styles.js';\nimport UploaderFile from './internal/uploader-file.js';\n\nexport class IxFileUploader extends LitElement {\n static readonly styles = [IxFileUploaderStyles];\n\n /** @nocollapse */\n static readonly formAssociated = true;\n\n private readonly internals = (this as HTMLElement).attachInternals();\n\n dropzoneRef: Ref<HTMLInputElement> = createRef();\n\n fileRef: Ref<HTMLInputElement> = createRef();\n\n @property({ type: Boolean }) allowMultipleFiles: boolean = false;\n\n @property({ type: Boolean }) allowDuplicates: boolean = false;\n\n @property() bodyText: string = '';\n\n @property({ type: Array }) defaultFiles: Array<UploaderFile> = [];\n\n @property({ type: Boolean }) allowDeleteDefaultFiles: boolean = false;\n\n @property({ type: Array }) extensions: string[] = [];\n\n @property() headerText: string = '';\n\n @property({ type: Number }) maxFileCount: number = 10;\n\n @property() maxFileSizeUnit: DataStorageUnit = DataStorageUnit.MB;\n\n @property({ type: Number }) maxFileSizeValue: number = 10;\n\n @property() name: string = 'ix-file-uploader';\n\n @property({ type: Boolean }) error: boolean = false;\n\n @state() files: Array<UploaderFile> = [];\n\n private maxFileSizeInBytes: number = 0;\n\n /**\n * The associated form element with which this element's value will submit.\n */\n get form() {\n return this.internals.form;\n }\n\n // called when the user drops files on the dropzone\n private onDrop(e: DragEvent): void {\n e.preventDefault();\n\n if (!e.dataTransfer) {\n return; // no files dropped\n }\n\n const filesToProcess = Array.from(e.dataTransfer.files);\n\n this.process(filesToProcess);\n }\n\n // This is called when the user selects files from the file dialog\n private onFileChange(e: Event): void {\n const fileList = (e.currentTarget as any).files as FileList;\n\n const filesToProcess = Array.from(fileList);\n\n this.process(filesToProcess);\n\n // clear the files from the file input; we are tracking state at the component level, not in the file input\n this.fileRef.value!.files = new DataTransfer().files;\n }\n\n // common method for processing files which are dropped or selected from file input dialog\n private process(filesToProcess: Array<File>): void {\n const results = processFiles({\n currentFiles: this.files,\n extensions: this.extensions,\n filesToProcess,\n maxFileCount: this.allowMultipleFiles ? this.maxFileCount : 1,\n maxFileSizeInBytes: this.maxFileSizeInBytes,\n allowDuplicates: this.allowDuplicates,\n });\n\n this.updateState(results);\n\n this.onFilesUploaded(results);\n }\n\n private updateState(results: Array<FileUploadResult> = []): void {\n const filesToUpload: Array<UploaderFile> = [];\n\n results.forEach(result => {\n if (result.uploaded) {\n filesToUpload.push(Object.assign(result.file, { id: result.id }));\n }\n });\n\n // handle multiple file setting\n if (this.allowMultipleFiles) {\n this.files = [...this.files, ...filesToUpload];\n return;\n }\n\n // handle single file setting\n if (filesToUpload.length) {\n const file = filesToUpload[0];\n this.files = [file];\n }\n }\n\n private onFilesUploaded(results: Array<FileUploadResult>): void {\n const event = new CustomEvent<FilesUploadedInfo>('on-files-uploaded', {\n detail: {\n allFiles: this.files,\n filesUploaded: results.filter(result => result.uploaded),\n filesNotUploaded: results.filter(result => !result.uploaded),\n },\n });\n\n this.dispatchEvent(event);\n }\n\n private onFileClick(e: CustomEvent<FileInfo>): void {\n const event = new CustomEvent<FileChangeInfo>('on-file-clicked', {\n detail: { allFiles: this.files, file: e.detail.file },\n });\n\n this.dispatchEvent(event);\n }\n\n private onFileDelete(e: CustomEvent<FileInfo>): void {\n const fileIdToDelete = e.detail.file?.id;\n\n this.files = [...this.files].filter(file => file.id !== fileIdToDelete);\n\n const event = new CustomEvent<FileChangeInfo>('on-file-removed', {\n detail: { allFiles: this.files, file: e.detail.file },\n });\n\n this.dispatchEvent(event);\n }\n\n private openFileUploadDialog(): void {\n this.fileRef.value?.click();\n }\n\n protected override firstUpdated(): void {\n this.files = [...this.defaultFiles];\n\n // connect the dropzone\n const dropzone = this.dropzoneRef.value;\n if (dropzone) {\n dropzone.addEventListener('dragenter', e => e.preventDefault());\n dropzone.addEventListener('dragover', e => e.preventDefault());\n dropzone.addEventListener('drop', this.onDrop.bind(this));\n }\n\n // connect the file input\n const fileElem = this.fileRef.value;\n if (fileElem) {\n fileElem.addEventListener('change', this.onFileChange.bind(this));\n }\n\n // calculate the maxBytes based on props\n // Calculate the max file size in bytes to use for checking if files are too large\n const totalBytesForStorageUnit = getTotalBytes(this.maxFileSizeUnit);\n this.maxFileSizeInBytes = this.maxFileSizeValue * totalBytesForStorageUnit;\n }\n\n protected update(changedProperties: PropertyValues) {\n super.update(changedProperties);\n\n if (changedProperties.has('defaultFiles')) {\n this.files = [\n ...this.files.filter(\n file => !this.defaultFiles.some(x => x.name === file.name)\n ),\n ...this.defaultFiles,\n ];\n }\n }\n\n isFileDeletable(file: UploaderFile): boolean {\n if (this.defaultFiles.some(x => x.name === file.name)) {\n return this.allowDeleteDefaultFiles;\n }\n\n return true;\n }\n\n private renderFileList(files: Array<UploaderFile> = []): TemplateResult<1> {\n const sortedFiles = sortFilesAscending(files);\n const chips = sortedFiles.map(\n (file?: UploaderFile) => html`<ix-file-chip\n .file=${file}\n .deletable=${this.isFileDeletable(file!)}\n @on-file-click=${this.onFileClick}\n @on-file-delete=${this.onFileDelete}\n ></ix-file-chip>`\n );\n\n return html`\n <ul class=\"uploaded-file-list\">\n ${chips}\n </ul>\n `;\n }\n\n protected override updated(_: PropertyValues) {\n const formData = new FormData();\n\n this.files.forEach(file => {\n formData.append(`${this.name}[]`, file);\n });\n\n this.internals.setFormValue(formData);\n }\n\n protected render(): TemplateResult<1> {\n const accept = this.extensions.map(ext => `.${ext}`).join(', ');\n\n return html`<div\n class=${classMap({ 'ix-file-uploader': true, error: this.error })}\n >\n <div\n class=\"dropzone\"\n @click=${this.openFileUploadDialog}\n @keyup=${this.openFileUploadDialog}\n ${ref(this.dropzoneRef)}\n >\n <div class=\"ix-file-uploader__label\">${this.headerText}</div>\n <div class=\"ix-file-uploader__help-text\">${this.bodyText}</div>\n <input\n accept=${accept}\n class=\"file-input\"\n ?multiple=${this.allowMultipleFiles}\n onchange=${(e: Event) => this.onFileChange(e)}\n ${ref(this.fileRef)}\n type=\"file\"\n />\n </div>\n ${this.files.length ? this.renderFileList(this.files) : nothing}\n </div>`;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"IxFileUploader.js","sourceRoot":"","sources":["../src/IxFileUploader.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAkC,MAAM,KAAK,CAAC;AAChF,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,GAAG,EAAO,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,MAAM,wBAAwB,CAAC;AAKrD,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,kBAAkB,MAAM,oCAAoC,CAAC;AACpE,OAAO,oBAAoB,MAAM,qCAAqC,CAAC;AAEvE,OAAO,wCAAwC,CAAC;AAEhD,MAAM,OAAO,cAAe,SAAQ,UAAU;IAA9C;;QAMmB,cAAS,GAAI,IAAoB,CAAC,eAAe,EAAE,CAAC;QAErE,gBAAW,GAA0B,SAAS,EAAE,CAAC;QAEjD,YAAO,GAA0B,SAAS,EAAE,CAAC;QAEhB,yBAAoB,GAAY,KAAK,CAAC;QAEtC,uBAAkB,GAAY,KAAK,CAAC;QAEpC,oBAAe,GAAY,KAAK,CAAC;QAElD,eAAU,GAAW,EAAE,CAAC;QAExB,aAAQ,GAAW,EAAE,CAAC;QAEtB,aAAQ,GAAuB,SAAS,CAAC;QAE1B,iBAAY,GAAwB,EAAE,CAAC;QAErC,4BAAuB,GAAY,KAAK,CAAC;QAEzC,aAAQ,GAAY,KAAK,CAAC;QAE5B,eAAU,GAAa,EAAE,CAAC;QAEzB,iBAAY,GAAW,EAAE,CAAC;QAE1C,oBAAe,GAAoB,eAAe,CAAC,EAAE,CAAC;QAEtC,qBAAgB,GAAW,EAAE,CAAC;QAE9C,SAAI,GAAW,kBAAkB,CAAC;QAEjB,UAAK,GAAY,KAAK,CAAC;QAEvB,gCAA2B,GAAY,KAAK,CAAC;QAE9D,kCAA6B,GAAW,mDAAmD,CAAC;QAE/F,+BAA0B,GAAY,KAAK,CAAC;QAE5C,wBAAmB,GAA6B,SAAS,CAAC;QAE1D,UAAK,GAAwB,EAAE,CAAC;QAEjC,uBAAkB,GAAW,CAAC,CAAC;IAmSzC,CAAC;IAhSC;;OAEG;IACH,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAC7B,CAAC;IAED,mDAAmD;IAC3C,MAAM,CAAC,CAAY;QACzB,CAAC,CAAC,cAAc,EAAE,CAAC;QAEnB,IAAI,CAAC,CAAC,CAAC,YAAY,EAAE;YACnB,OAAO,CAAC,mBAAmB;SAC5B;QAED,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QAExD,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;IAC/B,CAAC;IAED,kEAAkE;IAC1D,YAAY,CAAC,CAAQ;QAC3B,MAAM,QAAQ,GAAI,CAAC,CAAC,aAAqB,CAAC,KAAiB,CAAC;QAE5D,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAE5C,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;QAE7B,2GAA2G;QAC3G,IAAI,CAAC,OAAO,CAAC,KAAM,CAAC,KAAK,GAAG,IAAI,YAAY,EAAE,CAAC,KAAK,CAAC;IACvD,CAAC;IAED,IAAI,mBAAmB;QACrB,OAAO,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;IACzD,CAAC;IAED,0FAA0F;IAClF,OAAO,CAAC,cAA2B;QACzC,MAAM,OAAO,GAAG,YAAY,CAAC;YAC3B,YAAY,EAAE,IAAI,CAAC,KAAK;YACxB,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,cAAc;YACd,YAAY,EAAE,IAAI,CAAC,mBAAmB;YACtC,kBAAkB,EAAE,IAAI,CAAC,kBAAkB;YAC3C,eAAe,EAAE,IAAI,CAAC,eAAe;SACtC,CAAC,CAAC;QAEH,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAE1B,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;IAChC,CAAC;IAEO,WAAW,CAAC,UAAmC,EAAE;QACvD,MAAM,aAAa,GAAwB,EAAE,CAAC;QAE9C,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;YACvB,IAAI,MAAM,CAAC,QAAQ,EAAE;gBACnB,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;aACnE;QACH,CAAC,CAAC,CAAC;QAEH,+BAA+B;QAC/B,IAAI,IAAI,CAAC,kBAAkB,EAAE;YAC3B,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,aAAa,CAAC,CAAC;YAC/C,OAAO;SACR;QAED,6BAA6B;QAC7B,IAAI,aAAa,CAAC,MAAM,EAAE;YACxB,MAAM,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;YAC9B,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,CAAC;SACrB;IACH,CAAC;IAEO,eAAe,CAAC,OAAgC;QACtD,MAAM,KAAK,GAAG,IAAI,WAAW,CAAoB,mBAAmB,EAAE;YACpE,MAAM,EAAE;gBACN,QAAQ,EAAE,IAAI,CAAC,KAAK;gBACpB,aAAa,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC;gBACxD,gBAAgB,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC;aAC7D;SACF,CAAC,CAAC;QAEH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAEO,WAAW,CAAC,CAAwB;QAC1C,MAAM,KAAK,GAAG,IAAI,WAAW,CAAiB,iBAAiB,EAAE;YAC/D,MAAM,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE;SACtD,CAAC,CAAC;QAEH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAEO,YAAY,CAAC,CAAwB;QAC3C,IAAI,CAAC,mBAAmB,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC;QAEzC,IAAG,IAAI,CAAC,2BAA2B,EAAE;YACnC,IAAI,CAAC,0BAA0B,GAAG,IAAI,CAAC;YACvC,OAAO;SACR;QAED,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,WAAC,OAAA,IAAI,CAAC,EAAE,MAAK,MAAA,IAAI,CAAC,mBAAmB,0CAAE,EAAE,CAAA,CAAA,EAAA,CAAC,CAAC;QAEtF,MAAM,KAAK,GAAG,IAAI,WAAW,CAAiB,iBAAiB,EAAE;YAC/D,MAAM,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,mBAAmB,EAAE;SACjE,CAAC,CAAC;QAEH,IAAI,CAAC,0BAA0B,GAAG,KAAK,CAAC;QACxC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAEM,iCAAiC;QACtC,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;YAC3B,OAAO,CAAC,qBAAqB;SAC9B;QAED,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAE7D,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAEO,oBAAoB;;QAC1B,MAAA,IAAI,CAAC,OAAO,CAAC,KAAK,0CAAE,KAAK,EAAE,CAAC;IAC9B,CAAC;IAEkB,YAAY;QAC7B,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC;QAEpC,uBAAuB;QACvB,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;QACxC,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC;YAChE,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC;YAC/D,QAAQ,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;SAC3D;QAED,yBAAyB;QACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;QACpC,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;SACnE;QAED,wCAAwC;QACxC,kFAAkF;QAClF,MAAM,wBAAwB,GAAG,aAAa,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QACrE,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,gBAAgB,GAAG,wBAAwB,CAAC;IAC7E,CAAC;IAES,MAAM,CAAC,iBAAiC;QAChD,KAAK,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;QAEhC,IAAI,iBAAiB,CAAC,GAAG,CAAC,cAAc,CAAC,EAAE;YACzC,IAAI,CAAC,KAAK,GAAG;gBACX,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAClB,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,CAC3D;gBACD,GAAG,IAAI,CAAC,YAAY;aACrB,CAAC;SACH;IACH,CAAC;IAED,eAAe,CAAC,IAAkB;QAChC,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,EAAE;YACrD,OAAO,IAAI,CAAC,uBAAuB,CAAC;SACrC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAEO,cAAc,CAAC,QAA6B,EAAE;QACpD,MAAM,WAAW,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;QAC9C,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,CAC3B,CAAC,IAAmB,EAAE,EAAE,CAAC,IAAI,CAAA;gBACnB,IAAI;qBACC,IAAI,CAAC,eAAe,CAAC,IAAK,CAAC;yBACvB,IAAI,CAAC,WAAW;0BACf,IAAI,CAAC,YAAY;uBACpB,CAClB,CAAC;QAEF,MAAM,uBAAuB,GAAG;YAC9B,oBAAoB,EAAE,IAAI;YAC1B,4BAA4B,EAAE,CAAC,IAAI,CAAC,QAAQ;SAC7C,CAAC;QAEF,OAAO,IAAI,CAAA;kBACG,QAAQ,CAAC,uBAAuB,CAAC;UACzC,KAAK;UACL,IAAI,CAAC,oBAAoB,CAAC,CAAC;YAC3B,IAAI,CAAA;;gBAEE;YACN,CAAC,CAAC,OAAO;;;QAGX,IAAI,CAAC,sCAAsC,EAAE;KAChD,CAAC;IACJ,CAAC;IAEkB,OAAO,CAAC,CAAiB;QAC1C,MAAM,QAAQ,GAAG,IAAI,QAAQ,EAAE,CAAC;QAEhC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACxB,QAAQ,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,IAAI,CAAC,CAAC;QAC1C,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;IACxC,CAAC;IAED,sCAAsC;QACpC,IAAG,CAAC,IAAI,CAAC,2BAA2B;YAAE,OAAO,OAAO,CAAC;QAErD,OAAO,IAAI,CAAA;;cAED,IAAI,CAAC,0BAA0B;;gBAE7B,GAAG,EAAE,GAAG,IAAI,CAAC,0BAA0B,GAAG,KAAK,CAAC,CAAC,CAAC;eACnD,GAAG,EAAE,GAAG,IAAI,CAAC,0BAA0B,GAAG,KAAK,CAAC,CAAC,CAAC;;;UAGvD,IAAI,CAAC,6BAA6B;;;8CAGE,GAAG,EAAE,GAAG,IAAI,CAAC,0BAA0B,GAAG,KAAK,CAAC,CAAC,CAAC;;;;;;mBAM7E,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE;;;;;iBAKnC,CAAC;IAChB,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,OAAO,OAAO,CAAC;SAChB;QAED,OAAO,IAAI,CAAA,4CAA4C,IAAI,CAAC,QAAQ,QAAQ,CAAC;IAC/E,CAAC;IAED,UAAU;QACR,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEhE,MAAM,OAAO,GAAG;YACd,6BAA6B,EAAE,IAAI,CAAC,QAAQ;SAC7C,CAAC;QAEF,OAAO,IAAI,CAAA,cAAc,QAAQ,CAAC,OAAO,CAAC;;;mBAG3B,IAAI,CAAC,oBAAoB;mBACzB,IAAI,CAAC,oBAAoB;YAChC,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC;;iDAEgB,IAAI,CAAC,UAAU;qDACX,IAAI,CAAC,QAAQ;;qBAE7C,MAAM;;wBAEH,IAAI,CAAC,kBAAkB;uBACxB,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;cAC3C,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;;;;UAIrB,IAAI,CAAC,cAAc,EAAE;aAClB,CAAC;IACZ,CAAC;IAES,MAAM;QAEd,OAAO,IAAI,CAAA;cACD,QAAQ,CAAC,EAAE,kBAAkB,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;;QAE/D,IAAI,CAAC,UAAU,EAAE;QACjB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO;WAC1D,CAAC;IACV,CAAC;;AArVe,qBAAM,GAAG,CAAC,oBAAoB,CAAC,CAAC;AAEhD,mBAAmB;AACH,6BAAc,GAAG,IAAI,CAAC;AAQT;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4DAAuC;AAEtC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0DAAqC;AAEpC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uDAAkC;AAElD;IAAX,QAAQ,EAAE;kDAAyB;AAExB;IAAX,QAAQ,EAAE;gDAAuB;AAEtB;IAAX,QAAQ,EAAE;gDAA0C;AAE1B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;oDAAwC;AAErC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+DAA0C;AAEzC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDAA2B;AAE5B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAA2B;AAEzB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAA2B;AAE1C;IAAX,QAAQ,EAAE;uDAAuD;AAEtC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAA+B;AAE9C;IAAX,QAAQ,EAAE;4CAAmC;AAEjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAwB;AAEvB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mEAA8C;AAE9D;IAAX,QAAQ,EAAE;qEAA6F;AAE/F;IAAR,KAAK,EAAE;kEAA6C;AAE5C;IAAR,KAAK,EAAE;2DAA2D;AAE1D;IAAR,KAAK,EAAE;6CAAiC","sourcesContent":["import { html, LitElement, nothing, PropertyValues, TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { createRef, ref, Ref } from 'lit/directives/ref.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport './ix-file-chip.js';\nimport DataStorageUnit from './data-storage-unit.js';\nimport FileInfo from './internal/file-info.js';\nimport FileUploadResult from './internal/file-upload-result.js';\nimport FileChangeInfo from './internal/file-change-info.js';\nimport FilesUploadedInfo from './internal/files-uploaded-info.js';\nimport getTotalBytes from './internal/get-total-bytes.js';\nimport { processFiles } from './internal/process-files.js';\nimport sortFilesAscending from './internal/sort-files-ascending.js';\nimport IxFileUploaderStyles from './styles/ix-file-uploader-styles.js';\nimport UploaderFile from './internal/uploader-file.js';\nimport '@digital-realty/ix-dialog/ix-dialog.js';\n\nexport class IxFileUploader extends LitElement {\n static readonly styles = [IxFileUploaderStyles];\n\n /** @nocollapse */\n static readonly formAssociated = true;\n\n private readonly internals = (this as HTMLElement).attachInternals();\n\n dropzoneRef: Ref<HTMLInputElement> = createRef();\n\n fileRef: Ref<HTMLInputElement> = createRef();\n\n @property({ type: Boolean }) showTemplateFileLink: boolean = false;\n\n @property({ type: Boolean }) allowMultipleFiles: boolean = false;\n\n @property({ type: Boolean }) allowDuplicates: boolean = false;\n\n @property() headerText: string = '';\n\n @property() bodyText: string = '';\n\n @property() hintText: string | undefined = undefined;\n\n @property({ type: Array }) defaultFiles: Array<UploaderFile> = [];\n\n @property({ type: Boolean }) allowDeleteDefaultFiles: boolean = false;\n\n @property({ type: Boolean }) hideBody: boolean = false;\n\n @property({ type: Array }) extensions: string[] = [];\n\n @property({ type: Number }) maxFileCount: number = 10;\n\n @property() maxFileSizeUnit: DataStorageUnit = DataStorageUnit.MB;\n\n @property({ type: Number }) maxFileSizeValue: number = 10;\n\n @property() name: string = 'ix-file-uploader';\n\n @property({ type: Boolean }) error: boolean = false;\n\n @property({ type: Boolean }) askConfirmationOnDeleteFile: boolean = false;\n\n @property() deleteConfirmationDialogLabel: string = 'Are you sure you want to delete your upload file?';\n\n @state() isDeleteBulkFileDialogOpen: boolean = false;\n\n @state() pendingFileDeletion: UploaderFile | undefined = undefined;\n\n @state() files: Array<UploaderFile> = [];\n\n private maxFileSizeInBytes: number = 0;\n\n\n /**\n * The associated form element with which this element's value will submit.\n */\n get form() {\n return this.internals.form;\n }\n\n // called when the user drops files on the dropzone\n private onDrop(e: DragEvent): void {\n e.preventDefault();\n\n if (!e.dataTransfer) {\n return; // no files dropped\n }\n\n const filesToProcess = Array.from(e.dataTransfer.files);\n\n this.process(filesToProcess);\n }\n\n // This is called when the user selects files from the file dialog\n private onFileChange(e: Event): void {\n const fileList = (e.currentTarget as any).files as FileList;\n\n const filesToProcess = Array.from(fileList);\n\n this.process(filesToProcess);\n\n // clear the files from the file input; we are tracking state at the component level, not in the file input\n this.fileRef.value!.files = new DataTransfer().files;\n }\n\n get allowedMaxFileCount(): number {\n return this.allowMultipleFiles ? this.maxFileCount : 1;\n }\n\n // common method for processing files which are dropped or selected from file input dialog\n private process(filesToProcess: Array<File>): void {\n const results = processFiles({\n currentFiles: this.files,\n extensions: this.extensions,\n filesToProcess,\n maxFileCount: this.allowedMaxFileCount,\n maxFileSizeInBytes: this.maxFileSizeInBytes,\n allowDuplicates: this.allowDuplicates,\n });\n\n this.updateState(results);\n\n this.onFilesUploaded(results);\n }\n\n private updateState(results: Array<FileUploadResult> = []): void {\n const filesToUpload: Array<UploaderFile> = [];\n\n results.forEach(result => {\n if (result.uploaded) {\n filesToUpload.push(Object.assign(result.file, { id: result.id }));\n }\n });\n\n // handle multiple file setting\n if (this.allowMultipleFiles) {\n this.files = [...this.files, ...filesToUpload];\n return;\n }\n\n // handle single file setting\n if (filesToUpload.length) {\n const file = filesToUpload[0];\n this.files = [file];\n }\n }\n\n private onFilesUploaded(results: Array<FileUploadResult>): void {\n const event = new CustomEvent<FilesUploadedInfo>('on-files-uploaded', {\n detail: {\n allFiles: this.files,\n filesUploaded: results.filter(result => result.uploaded),\n filesNotUploaded: results.filter(result => !result.uploaded),\n },\n });\n\n this.dispatchEvent(event);\n }\n\n private onFileClick(e: CustomEvent<FileInfo>): void {\n const event = new CustomEvent<FileChangeInfo>('on-file-clicked', {\n detail: { allFiles: this.files, file: e.detail.file },\n });\n\n this.dispatchEvent(event);\n }\n\n private onFileDelete(e: CustomEvent<FileInfo>): void {\n this.pendingFileDeletion = e.detail.file;\n\n if(this.askConfirmationOnDeleteFile) {\n this.isDeleteBulkFileDialogOpen = true;\n return;\n }\n \n this.handleDeleteBulkFile();\n }\n \n handleDeleteBulkFile() {\n this.files = [...this.files].filter(file => file.id !== this.pendingFileDeletion?.id);\n\n const event = new CustomEvent<FileChangeInfo>('on-file-removed', {\n detail: { allFiles: this.files, file: this.pendingFileDeletion },\n });\n\n this.isDeleteBulkFileDialogOpen = false;\n this.dispatchEvent(event);\n }\n\n public deleteLastFileWithoutConfirmation(): void {\n if (this.files.length === 0) {\n return; // no files to delete\n }\n\n this.pendingFileDeletion = this.files[this.files.length - 1];\n\n this.handleDeleteBulkFile();\n }\n\n private openFileUploadDialog(): void {\n this.fileRef.value?.click();\n }\n\n protected override firstUpdated(): void {\n this.files = [...this.defaultFiles];\n\n // connect the dropzone\n const dropzone = this.dropzoneRef.value;\n if (dropzone) {\n dropzone.addEventListener('dragenter', e => e.preventDefault());\n dropzone.addEventListener('dragover', e => e.preventDefault());\n dropzone.addEventListener('drop', this.onDrop.bind(this));\n }\n\n // connect the file input\n const fileElem = this.fileRef.value;\n if (fileElem) {\n fileElem.addEventListener('change', this.onFileChange.bind(this));\n }\n\n // calculate the maxBytes based on props\n // Calculate the max file size in bytes to use for checking if files are too large\n const totalBytesForStorageUnit = getTotalBytes(this.maxFileSizeUnit);\n this.maxFileSizeInBytes = this.maxFileSizeValue * totalBytesForStorageUnit;\n }\n\n protected update(changedProperties: PropertyValues) {\n super.update(changedProperties);\n\n if (changedProperties.has('defaultFiles')) {\n this.files = [\n ...this.files.filter(\n file => !this.defaultFiles.some(x => x.name === file.name)\n ),\n ...this.defaultFiles,\n ];\n }\n }\n\n isFileDeletable(file: UploaderFile): boolean {\n if (this.defaultFiles.some(x => x.name === file.name)) {\n return this.allowDeleteDefaultFiles;\n }\n\n return true;\n }\n\n private renderFileList(files: Array<UploaderFile> = []): TemplateResult<1> {\n const sortedFiles = sortFilesAscending(files);\n const chips = sortedFiles.map(\n (file?: UploaderFile) => html`<ix-file-chip\n .file=${file}\n .deletable=${this.isFileDeletable(file!)}\n @on-file-click=${this.onFileClick}\n @on-file-delete=${this.onFileDelete}\n ></ix-file-chip>`\n );\n\n const uploadedFileListClasses = {\n 'uploaded-file-list': true,\n 'uploaded-file-list--spaced': !this.hideBody\n };\n\n return html`\n <ul class=${classMap(uploadedFileListClasses)}\">\n ${chips}\n ${this.showTemplateFileLink ? \n html`<li class=\"ix-file-uploader__template-file\">\n <slot name=\"template-file\"></slot>\n </li>` \n : nothing}\n\n </ul>\n ${this.renderDeleteBulkFileConfirmationDialog()}\n `;\n }\n\n protected override updated(_: PropertyValues) {\n const formData = new FormData();\n\n this.files.forEach(file => {\n formData.append(`${this.name}[]`, file);\n });\n\n this.internals.setFormValue(formData);\n }\n\n renderDeleteBulkFileConfirmationDialog() {\n if(!this.askConfirmationOnDeleteFile) return nothing;\n\n return html`<ix-dialog\n id=\"deleteFileConfirmationDialog\"\n ?open=${this.isDeleteBulkFileDialogOpen}\n preventCloseOnScrimClick=\"true\"\n @closed=${() => { this.isDeleteBulkFileDialogOpen = false; }}\n @close=${() => { this.isDeleteBulkFileDialogOpen = false; }}\n >\n <form slot=\"content\" id=\"delete-file-id\" method=\"dialog\" class=\"delete-file-confirmation-dialog\">\n ${this.deleteConfirmationDialogLabel}\n </form>\n <div slot=\"actions\">\n <ix-button appearance=\"text\" @click=${() => { this.isDeleteBulkFileDialogOpen = false; }}>\n <span class=\"button-label\">NO</span>\n </ix-button>\n <ix-button\n appearance=\"text\"\n name=\"submitBtn\"\n @click=${() => this.handleDeleteBulkFile()}\n >\n <span class=\"button-label\">YES</span>\n </ix-button>\n </div>\n </ix-dialog>`;\n }\n\n renderHintText(){\n if (!this.hintText) {\n return nothing;\n }\n\n return html`<div class=\"ix-file-uploader__hint-text\">${this.hintText}</div>`;\n }\n\n renderBody() {\n const accept = this.extensions.map(ext => `.${ext}`).join(', ');\n\n const classes = {\n 'ix-file-uploader--hide-body': this.hideBody,\n };\n\n return html`<div class=${classMap(classes)}>\n <div\n class=\"dropzone\"\n @click=${this.openFileUploadDialog}\n @keyup=${this.openFileUploadDialog}\n ${ref(this.dropzoneRef)}\n >\n <div class=\"ix-file-uploader__label\">${this.headerText}</div>\n <div class=\"ix-file-uploader__help-text\">${this.bodyText}</div>\n <input\n accept=${accept}\n class=\"file-input\"\n ?multiple=${this.allowMultipleFiles}\n onchange=${(e: Event) => this.onFileChange(e)}\n ${ref(this.fileRef)}\n type=\"file\"\n />\n </div>\n ${this.renderHintText()}\n </div>`;\n }\n\n protected render(): TemplateResult<1> {\n\n return html`<div\n class=${classMap({ 'ix-file-uploader': true, error: this.error })}\n >\n ${this.renderBody()}\n ${this.files.length ? this.renderFileList(this.files) : nothing}\n </div>`;\n }\n}\n"]}
|
|
@@ -1,10 +1,70 @@
|
|
|
1
|
-
import{__decorate}from"tslib";import{css,svg,LitElement,nothing,html}from"lit";import{property,state}from"lit/decorators.js";import{createRef,ref}from"lit/directives/ref.js";import{classMap}from"lit/directives/class-map.js";import"@digital-realty/ix-icon-button/ix-icon-button.js";let IxFileChipStyles=css`.file-chip{align-items:center;background:#f5f7ff;cursor:pointer;display:flex;flex:auto;padding:4px 8px;height:40px}.file-chip span{margin-right:10px;font-size:var(--ix-file-chip-font-size,var(--text-small-size,1rem));line-height:var(--ix-file-chip-line-height,var(--text-small-line-height,1.3rem));letter-spacing:var(--ix-file-chip-letter-spacing,var(--text-small-letter-spacing,.15px));color:var(--ix-file-chip-color, var(--clr-on-surface, 'inherit'))}.delete-icon{color:var(--md-sys-color-error)}`,trash=svg`<svg viewBox="0 0 24 24"><path d="M15.5 4H19V6H5V4H8.5L9.5 3H14.5L15.5 4ZM8 21C6.9 21 6 20.1 6 19V7H18V19C18 20.1 17.1 21 16 21H8Z"/></svg>`;class IxFileChip extends LitElement{constructor(){super(...arguments),this.deletable=!0}onClick(){var e=new CustomEvent("on-file-click",{detail:{file:this.file}});this.dispatchEvent(e)}onDelete(){var e;this.deletable&&(e=new CustomEvent("on-file-delete",{detail:{file:this.file}}),this.dispatchEvent(e))}render(){var e;return html`<li class="file-chip"><span @click="${this.onClick}">${null==(e=this.file)?void 0:e.name} </span>${this.deletable?html`<ix-icon-button @click="${this.onDelete}" name="delete-button"><ix-icon slot="default" class="delete-icon">${trash}</ix-icon></ix-icon-button>`:nothing}</li>`}}IxFileChip.styles=[IxFileChipStyles],__decorate([property({type:Object})],IxFileChip.prototype,"file",void 0),__decorate([property({type:Boolean})],IxFileChip.prototype,"deletable",void 0),customElements.define("ix-file-chip",IxFileChip),(e=>{e.B="B",e.KB="KB",e.MB="MB",e.GB="GB",e.TB="TB",e.PB="PB",e.EB="EB",e.ZB="ZB",e.YB="YB"})(DataStorageUnit=DataStorageUnit||{});var DataStorageUnit,DataStorageUnit$1=DataStorageUnit;let KB=1024,MB=1024*KB,GB=1024*MB,TB=1024*GB,PB=1024*TB,EB=1024*PB,ZB=1024*EB,YB=1024*ZB,getTotalBytes=e=>{switch(e){case DataStorageUnit$1.KB:return KB;case DataStorageUnit$1.MB:return MB;case DataStorageUnit$1.GB:return GB;case DataStorageUnit$1.TB:return TB;case DataStorageUnit$1.PB:return PB;case DataStorageUnit$1.EB:return EB;case DataStorageUnit$1.ZB:return ZB;case DataStorageUnit$1.YB:return YB;default:return 0}},mimeTypeMap={"csv-application/vnd.ms-excel":"text/csv"};function mapBrowserContentTypes(e,
|
|
1
|
+
import{__decorate}from"tslib";import{css,svg,LitElement,nothing,html}from"lit";import{property,state}from"lit/decorators.js";import{createRef,ref}from"lit/directives/ref.js";import{classMap}from"lit/directives/class-map.js";import"@digital-realty/ix-icon-button/ix-icon-button.js";import"@digital-realty/ix-dialog/ix-dialog.js";let IxFileChipStyles=css`.file-chip{align-items:center;background:#f5f7ff;cursor:pointer;display:flex;flex:auto;padding:4px 8px;height:40px}.file-chip span{margin-right:10px;font-size:var(--ix-file-chip-font-size,var(--text-small-size,1rem));line-height:var(--ix-file-chip-line-height,var(--text-small-line-height,1.3rem));letter-spacing:var(--ix-file-chip-letter-spacing,var(--text-small-letter-spacing,.15px));color:var(--ix-file-chip-color, var(--clr-on-surface, 'inherit'))}.delete-icon{color:var(--md-sys-color-error)}`,trash=svg`<svg viewBox="0 0 24 24"><path d="M15.5 4H19V6H5V4H8.5L9.5 3H14.5L15.5 4ZM8 21C6.9 21 6 20.1 6 19V7H18V19C18 20.1 17.1 21 16 21H8Z"/></svg>`;class IxFileChip extends LitElement{constructor(){super(...arguments),this.deletable=!0}onClick(){var e=new CustomEvent("on-file-click",{detail:{file:this.file}});this.dispatchEvent(e)}onDelete(){var e;this.deletable&&(e=new CustomEvent("on-file-delete",{detail:{file:this.file}}),this.dispatchEvent(e))}render(){var e;return html`<li class="file-chip"><span @click="${this.onClick}">${null==(e=this.file)?void 0:e.name} </span>${this.deletable?html`<ix-icon-button @click="${this.onDelete}" name="delete-button"><ix-icon slot="default" class="delete-icon">${trash}</ix-icon></ix-icon-button>`:nothing}</li>`}}IxFileChip.styles=[IxFileChipStyles],__decorate([property({type:Object})],IxFileChip.prototype,"file",void 0),__decorate([property({type:Boolean})],IxFileChip.prototype,"deletable",void 0),customElements.define("ix-file-chip",IxFileChip),(e=>{e.B="B",e.KB="KB",e.MB="MB",e.GB="GB",e.TB="TB",e.PB="PB",e.EB="EB",e.ZB="ZB",e.YB="YB"})(DataStorageUnit=DataStorageUnit||{});var DataStorageUnit,DataStorageUnit$1=DataStorageUnit;let KB=1024,MB=1024*KB,GB=1024*MB,TB=1024*GB,PB=1024*TB,EB=1024*PB,ZB=1024*EB,YB=1024*ZB,getTotalBytes=e=>{switch(e){case DataStorageUnit$1.KB:return KB;case DataStorageUnit$1.MB:return MB;case DataStorageUnit$1.GB:return GB;case DataStorageUnit$1.TB:return TB;case DataStorageUnit$1.PB:return PB;case DataStorageUnit$1.EB:return EB;case DataStorageUnit$1.ZB:return ZB;case DataStorageUnit$1.YB:return YB;default:return 0}},mimeTypeMap={"csv-application/vnd.ms-excel":"text/csv"};function mapBrowserContentTypes(e,i){return mimeTypeMap[e+"-"+i.type]?new File([i],i.name,{type:mimeTypeMap[e+"-"+i.type]}):i}let processFiles=e=>{var{currentFiles:t,extensions:l,filesToProcess:e,maxFileCount:a,maxFileSizeInBytes:o,allowDuplicates:r}=e,s=[];let n=0;for(let i of e){var p=i.name.split(".").pop()||"",d=l.includes(p.toLocaleLowerCase());if(i=mapBrowserContentTypes(p,i),d)if(i.size>o)s.push({file:i,message:"The file you are attempting to upload exceeds the maximum size allowed.",uploaded:!1,id:crypto.randomUUID()});else if(t.length+n>=a)s.push({file:i,message:`File not uploaded; it would exceed the maximum number of files (${a})`,uploaded:!1,id:crypto.randomUUID()});else{if(!r)if(t.some(e=>e.name===i.name)){p="File not uploaded; there is already a file named "+i.name;s.push({file:i,message:p,uploaded:!1,id:crypto.randomUUID()});continue}s.push({file:i,message:"File uploaded",uploaded:!0,id:crypto.randomUUID()}),n+=1}else{d=`File extension for "${i.name}" is not allowed`;s.push({file:i,message:d,uploaded:!1,id:crypto.randomUUID()})}}return s},sortFilesAscending=(e=[])=>e.sort((e,i)=>{e=e.name.toLocaleLowerCase(),i=i.name.toLocaleLowerCase();return e<i?-1:0}),IxFileUploaderStyles=css`.ix-file-uploader{display:flex;flex-direction:column;justify-content:center;min-width:320px}.ix-file-uploader--hide-body{display:none}.dropzone{background:var(--clr-surface,#f5f7ff);border:1px dashed var(--clr-info,#2196f3);border-radius:3px;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:16px}.ix-file-uploader__label{color:var(
|
|
2
2
|
--ix-file-uploader-label-color,
|
|
3
3
|
var(--clr-on-surface, 'inherit')
|
|
4
4
|
);font-family:var(
|
|
5
5
|
--ix-file-uploader-label-font-family,
|
|
6
6
|
var(--root-secondary-font, 'inherit')
|
|
7
|
-
);font-size:var(--ix-file-uploader-label-font-size,var(--text-small-size,.75rem));font-style:normal;font-weight:var(--ix-file-uploader-label-font-weight,700);line-height:var(--ix-file-uploader-label-line-height,var(--text-small-line-height,16px));letter-spacing:var(--ix-file-uploader-label-letter-spacing,var(--text-small-letter-spacing,1.25px));text-align:center;text-transform:var(--ix-file-uploader-label-text-transform,uppercase)}.ix-file-uploader__help-text{color:var(--ix-file-uploader-help-color, var(--clr-on-surface, 'inherit'));font-family:var(
|
|
7
|
+
);font-size:var(--ix-file-uploader-label-font-size,var(--text-small-size,.75rem));font-style:normal;font-weight:var(--ix-file-uploader-label-font-weight,700);line-height:var(--ix-file-uploader-label-line-height,var(--text-small-line-height,16px));letter-spacing:var(--ix-file-uploader-label-letter-spacing,var(--text-small-letter-spacing,1.25px));text-align:center;text-transform:var(--ix-file-uploader-label-text-transform,uppercase);margin:auto;width:var(--ix-file-uploader-label-width,100%)}.ix-file-uploader__help-text{color:var(--ix-file-uploader-help-color, var(--clr-on-surface, 'inherit'));font-family:var(
|
|
8
8
|
--ix-file-uploader-help-font-family,
|
|
9
9
|
var(--root-secondary-font, 'inherit')
|
|
10
|
-
);font-size:var(--ix-file-uploader-help-font-size,var(--text-small-size,.75rem));line-height:var(--ix-file-uploader-help-line-height,var(--text-small-line-height,16px));letter-spacing:var(--ix-file-uploader-help-letter-spacing,var(--text-small-letter-spacing,1.25px));text-align:center}.uploaded-file-list{display:flex;flex-wrap:wrap;gap:16px;list-style:none;margin:0;margin-top:32px
|
|
10
|
+
);font-size:var(--ix-file-uploader-help-font-size,var(--text-small-size,.75rem));line-height:var(--ix-file-uploader-help-line-height,var(--text-small-line-height,16px));letter-spacing:var(--ix-file-uploader-help-letter-spacing,var(--text-small-letter-spacing,1.25px));text-align:center}.uploaded-file-list{display:flex;flex-wrap:wrap;gap:16px;list-style:none;margin:0;padding:0}.uploaded-file-list--spaced{margin-top:32px}.file-input{opacity:0;border-width:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;white-space:nowrap;width:1px}.error .dropzone{border-color:var(--md-sys-color-error)}.ix-file-uploader__hint-text{font-family:var(--root-primary-font, 'inherit') font-weight: 400;font-size:12px;line-height:16px;letter-spacing:.4px;padding-top:.5rem;color:var(--clr-on-surface, 'inherit')}.ix-file-uploader__template-file{display:flex;align-items:center}.delete-file-confirmation-dialog{max-width:560px;font-family:var(--root-secondary-font, 'Red Hat Display');font-weight:700;font-size:20px;leading-trim:NONE;line-height:24px;letter-spacing:.15px}`;class IxFileUploader extends LitElement{constructor(){super(...arguments),this.internals=this.attachInternals(),this.dropzoneRef=createRef(),this.fileRef=createRef(),this.showTemplateFileLink=!1,this.allowMultipleFiles=!1,this.allowDuplicates=!1,this.headerText="",this.bodyText="",this.hintText=void 0,this.defaultFiles=[],this.allowDeleteDefaultFiles=!1,this.hideBody=!1,this.extensions=[],this.maxFileCount=10,this.maxFileSizeUnit=DataStorageUnit$1.MB,this.maxFileSizeValue=10,this.name="ix-file-uploader",this.error=!1,this.askConfirmationOnDeleteFile=!1,this.deleteConfirmationDialogLabel="Are you sure you want to delete your upload file?",this.isDeleteBulkFileDialogOpen=!1,this.pendingFileDeletion=void 0,this.files=[],this.maxFileSizeInBytes=0}get form(){return this.internals.form}onDrop(e){e.preventDefault(),e.dataTransfer&&(e=Array.from(e.dataTransfer.files),this.process(e))}onFileChange(e){e=e.currentTarget.files,e=Array.from(e);this.process(e),this.fileRef.value.files=(new DataTransfer).files}get allowedMaxFileCount(){return this.allowMultipleFiles?this.maxFileCount:1}process(e){e=processFiles({currentFiles:this.files,extensions:this.extensions,filesToProcess:e,maxFileCount:this.allowedMaxFileCount,maxFileSizeInBytes:this.maxFileSizeInBytes,allowDuplicates:this.allowDuplicates});this.updateState(e),this.onFilesUploaded(e)}updateState(e=[]){let i=[];e.forEach(e=>{e.uploaded&&i.push(Object.assign(e.file,{id:e.id}))}),this.allowMultipleFiles?this.files=[...this.files,...i]:i.length&&(e=i[0],this.files=[e])}onFilesUploaded(e){e=new CustomEvent("on-files-uploaded",{detail:{allFiles:this.files,filesUploaded:e.filter(e=>e.uploaded),filesNotUploaded:e.filter(e=>!e.uploaded)}});this.dispatchEvent(e)}onFileClick(e){e=new CustomEvent("on-file-clicked",{detail:{allFiles:this.files,file:e.detail.file}});this.dispatchEvent(e)}onFileDelete(e){this.pendingFileDeletion=e.detail.file,this.askConfirmationOnDeleteFile?this.isDeleteBulkFileDialogOpen=!0:this.handleDeleteBulkFile()}handleDeleteBulkFile(){this.files=[...this.files].filter(e=>e.id!==(null==(e=this.pendingFileDeletion)?void 0:e.id));var e=new CustomEvent("on-file-removed",{detail:{allFiles:this.files,file:this.pendingFileDeletion}});this.isDeleteBulkFileDialogOpen=!1,this.dispatchEvent(e)}deleteLastFileWithoutConfirmation(){0!==this.files.length&&(this.pendingFileDeletion=this.files[this.files.length-1],this.handleDeleteBulkFile())}openFileUploadDialog(){var e;null!=(e=this.fileRef.value)&&e.click()}firstUpdated(){this.files=[...this.defaultFiles];var e=this.dropzoneRef.value,e=(e&&(e.addEventListener("dragenter",e=>e.preventDefault()),e.addEventListener("dragover",e=>e.preventDefault()),e.addEventListener("drop",this.onDrop.bind(this))),this.fileRef.value),e=(e&&e.addEventListener("change",this.onFileChange.bind(this)),getTotalBytes(this.maxFileSizeUnit));this.maxFileSizeInBytes=this.maxFileSizeValue*e}update(e){super.update(e),e.has("defaultFiles")&&(this.files=[...this.files.filter(i=>!this.defaultFiles.some(e=>e.name===i.name)),...this.defaultFiles])}isFileDeletable(i){return!this.defaultFiles.some(e=>e.name===i.name)||this.allowDeleteDefaultFiles}renderFileList(e=[]){var e=sortFilesAscending(e).map(e=>html`<ix-file-chip
|
|
11
|
+
.file=${e}
|
|
12
|
+
.deletable=${this.isFileDeletable(e)}
|
|
13
|
+
@on-file-click=${this.onFileClick}
|
|
14
|
+
@on-file-delete=${this.onFileDelete}
|
|
15
|
+
></ix-file-chip>`),i={"uploaded-file-list":!0,"uploaded-file-list--spaced":!this.hideBody};return html`
|
|
16
|
+
<ul class=${classMap(i)}">
|
|
17
|
+
${e}
|
|
18
|
+
${this.showTemplateFileLink?html`<li class="ix-file-uploader__template-file">
|
|
19
|
+
<slot name="template-file"></slot>
|
|
20
|
+
</li>`:nothing}
|
|
21
|
+
|
|
22
|
+
</ul>
|
|
23
|
+
${this.renderDeleteBulkFileConfirmationDialog()}
|
|
24
|
+
`}updated(e){let i=new FormData;this.files.forEach(e=>{i.append(this.name+"[]",e)}),this.internals.setFormValue(i)}renderDeleteBulkFileConfirmationDialog(){return this.askConfirmationOnDeleteFile?html`<ix-dialog
|
|
25
|
+
id="deleteFileConfirmationDialog"
|
|
26
|
+
?open=${this.isDeleteBulkFileDialogOpen}
|
|
27
|
+
preventCloseOnScrimClick="true"
|
|
28
|
+
@closed=${()=>{this.isDeleteBulkFileDialogOpen=!1}}
|
|
29
|
+
@close=${()=>{this.isDeleteBulkFileDialogOpen=!1}}
|
|
30
|
+
>
|
|
31
|
+
<form slot="content" id="delete-file-id" method="dialog" class="delete-file-confirmation-dialog">
|
|
32
|
+
${this.deleteConfirmationDialogLabel}
|
|
33
|
+
</form>
|
|
34
|
+
<div slot="actions">
|
|
35
|
+
<ix-button appearance="text" @click=${()=>{this.isDeleteBulkFileDialogOpen=!1}}>
|
|
36
|
+
<span class="button-label">NO</span>
|
|
37
|
+
</ix-button>
|
|
38
|
+
<ix-button
|
|
39
|
+
appearance="text"
|
|
40
|
+
name="submitBtn"
|
|
41
|
+
@click=${()=>this.handleDeleteBulkFile()}
|
|
42
|
+
>
|
|
43
|
+
<span class="button-label">YES</span>
|
|
44
|
+
</ix-button>
|
|
45
|
+
</div>
|
|
46
|
+
</ix-dialog>`:nothing}renderHintText(){return this.hintText?html`<div class="ix-file-uploader__hint-text">${this.hintText}</div>`:nothing}renderBody(){var e=this.extensions.map(e=>"."+e).join(", "),i={"ix-file-uploader--hide-body":this.hideBody};return html`<div class=${classMap(i)}>
|
|
47
|
+
<div
|
|
48
|
+
class="dropzone"
|
|
49
|
+
@click=${this.openFileUploadDialog}
|
|
50
|
+
@keyup=${this.openFileUploadDialog}
|
|
51
|
+
${ref(this.dropzoneRef)}
|
|
52
|
+
>
|
|
53
|
+
<div class="ix-file-uploader__label">${this.headerText}</div>
|
|
54
|
+
<div class="ix-file-uploader__help-text">${this.bodyText}</div>
|
|
55
|
+
<input
|
|
56
|
+
accept=${e}
|
|
57
|
+
class="file-input"
|
|
58
|
+
?multiple=${this.allowMultipleFiles}
|
|
59
|
+
onchange=${e=>this.onFileChange(e)}
|
|
60
|
+
${ref(this.fileRef)}
|
|
61
|
+
type="file"
|
|
62
|
+
/>
|
|
63
|
+
</div>
|
|
64
|
+
${this.renderHintText()}
|
|
65
|
+
</div>`}render(){return html`<div
|
|
66
|
+
class=${classMap({"ix-file-uploader":!0,error:this.error})}
|
|
67
|
+
>
|
|
68
|
+
${this.renderBody()}
|
|
69
|
+
${this.files.length?this.renderFileList(this.files):nothing}
|
|
70
|
+
</div>`}}IxFileUploader.styles=[IxFileUploaderStyles],IxFileUploader.formAssociated=!0,__decorate([property({type:Boolean})],IxFileUploader.prototype,"showTemplateFileLink",void 0),__decorate([property({type:Boolean})],IxFileUploader.prototype,"allowMultipleFiles",void 0),__decorate([property({type:Boolean})],IxFileUploader.prototype,"allowDuplicates",void 0),__decorate([property()],IxFileUploader.prototype,"headerText",void 0),__decorate([property()],IxFileUploader.prototype,"bodyText",void 0),__decorate([property()],IxFileUploader.prototype,"hintText",void 0),__decorate([property({type:Array})],IxFileUploader.prototype,"defaultFiles",void 0),__decorate([property({type:Boolean})],IxFileUploader.prototype,"allowDeleteDefaultFiles",void 0),__decorate([property({type:Boolean})],IxFileUploader.prototype,"hideBody",void 0),__decorate([property({type:Array})],IxFileUploader.prototype,"extensions",void 0),__decorate([property({type:Number})],IxFileUploader.prototype,"maxFileCount",void 0),__decorate([property()],IxFileUploader.prototype,"maxFileSizeUnit",void 0),__decorate([property({type:Number})],IxFileUploader.prototype,"maxFileSizeValue",void 0),__decorate([property()],IxFileUploader.prototype,"name",void 0),__decorate([property({type:Boolean})],IxFileUploader.prototype,"error",void 0),__decorate([property({type:Boolean})],IxFileUploader.prototype,"askConfirmationOnDeleteFile",void 0),__decorate([property()],IxFileUploader.prototype,"deleteConfirmationDialogLabel",void 0),__decorate([state()],IxFileUploader.prototype,"isDeleteBulkFileDialogOpen",void 0),__decorate([state()],IxFileUploader.prototype,"pendingFileDeletion",void 0),__decorate([state()],IxFileUploader.prototype,"files",void 0),customElements.define("ix-file-uploader",IxFileUploader);
|
|
@@ -6,6 +6,9 @@ const IxFileUploaderStyles = css `
|
|
|
6
6
|
justify-content: center;
|
|
7
7
|
min-width: 320px;
|
|
8
8
|
}
|
|
9
|
+
.ix-file-uploader--hide-body {
|
|
10
|
+
display: none;
|
|
11
|
+
}
|
|
9
12
|
.dropzone {
|
|
10
13
|
background: var(--clr-surface, #f5f7ff);
|
|
11
14
|
border: 1px dashed var(--clr-info, #2196f3);
|
|
@@ -41,6 +44,8 @@ const IxFileUploaderStyles = css `
|
|
|
41
44
|
);
|
|
42
45
|
text-align: center;
|
|
43
46
|
text-transform: var(--ix-file-uploader-label-text-transform, uppercase);
|
|
47
|
+
margin: auto;
|
|
48
|
+
width: var(--ix-file-uploader-label-width, 100%);
|
|
44
49
|
}
|
|
45
50
|
.ix-file-uploader__help-text {
|
|
46
51
|
color: var(--ix-file-uploader-help-color, var(--clr-on-surface, 'inherit'));
|
|
@@ -68,9 +73,11 @@ const IxFileUploaderStyles = css `
|
|
|
68
73
|
gap: 16px;
|
|
69
74
|
list-style: none;
|
|
70
75
|
margin: 0;
|
|
71
|
-
margin-top: 32px;
|
|
72
76
|
padding: 0;
|
|
73
77
|
}
|
|
78
|
+
.uploaded-file-list--spaced {
|
|
79
|
+
margin-top: 32px;
|
|
80
|
+
}
|
|
74
81
|
.file-input {
|
|
75
82
|
/*
|
|
76
83
|
Per MDN -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
|
|
@@ -93,6 +100,29 @@ const IxFileUploaderStyles = css `
|
|
|
93
100
|
.error .dropzone {
|
|
94
101
|
border-color: var(--md-sys-color-error);
|
|
95
102
|
}
|
|
103
|
+
.ix-file-uploader__hint-text{
|
|
104
|
+
font-family: var(--root-primary-font, 'inherit')
|
|
105
|
+
font-weight: 400;
|
|
106
|
+
font-size: 12px;
|
|
107
|
+
line-height: 16px;
|
|
108
|
+
letter-spacing: 0.4px;
|
|
109
|
+
padding-top: 0.5rem;
|
|
110
|
+
color: var(--clr-on-surface, 'inherit');
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.ix-file-uploader__template-file {
|
|
114
|
+
display: flex;
|
|
115
|
+
align-items: center;
|
|
116
|
+
}
|
|
117
|
+
.delete-file-confirmation-dialog {
|
|
118
|
+
max-width: 560px;
|
|
119
|
+
font-family: var(--root-secondary-font, 'Red Hat Display');
|
|
120
|
+
font-weight: 700;
|
|
121
|
+
font-size: 20px;
|
|
122
|
+
leading-trim: NONE;
|
|
123
|
+
line-height: 24px;
|
|
124
|
+
letter-spacing: 0.15px;
|
|
125
|
+
}
|
|
96
126
|
`;
|
|
97
127
|
export default IxFileUploaderStyles;
|
|
98
128
|
//# sourceMappingURL=ix-file-uploader-styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ix-file-uploader-styles.js","sourceRoot":"","sources":["../../src/styles/ix-file-uploader-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,oBAAoB,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"ix-file-uploader-styles.js","sourceRoot":"","sources":["../../src/styles/ix-file-uploader-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4H/B,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst IxFileUploaderStyles = css`\n .ix-file-uploader {\n display: flex;\n flex-direction: column;\n justify-content: center;\n min-width: 320px;\n }\n .ix-file-uploader--hide-body {\n display: none;\n }\n .dropzone {\n background: var(--clr-surface, #f5f7ff);\n border: 1px dashed var(--clr-info, #2196f3);\n border-radius: 3px;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n gap: 4px;\n padding: 16px;\n }\n .ix-file-uploader__label {\n color: var(\n --ix-file-uploader-label-color,\n var(--clr-on-surface, 'inherit')\n );\n font-family: var(\n --ix-file-uploader-label-font-family,\n var(--root-secondary-font, 'inherit')\n );\n font-size: var(\n --ix-file-uploader-label-font-size,\n var(--text-small-size, 0.75rem)\n );\n font-style: normal;\n font-weight: var(--ix-file-uploader-label-font-weight, 700);\n line-height: var(\n --ix-file-uploader-label-line-height,\n var(--text-small-line-height, 16px)\n );\n letter-spacing: var(\n --ix-file-uploader-label-letter-spacing,\n var(--text-small-letter-spacing, 1.25px)\n );\n text-align: center;\n text-transform: var(--ix-file-uploader-label-text-transform, uppercase);\n margin: auto;\n width: var(--ix-file-uploader-label-width, 100%);\n }\n .ix-file-uploader__help-text {\n color: var(--ix-file-uploader-help-color, var(--clr-on-surface, 'inherit'));\n font-family: var(\n --ix-file-uploader-help-font-family,\n var(--root-secondary-font, 'inherit')\n );\n font-size: var(\n --ix-file-uploader-help-font-size,\n var(--text-small-size, 0.75rem)\n );\n line-height: var(\n --ix-file-uploader-help-line-height,\n var(--text-small-line-height, 16px)\n );\n letter-spacing: var(\n --ix-file-uploader-help-letter-spacing,\n var(--text-small-letter-spacing, 1.25px)\n );\n text-align: center;\n }\n .uploaded-file-list {\n display: flex;\n flex-wrap: wrap;\n gap: 16px;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n .uploaded-file-list--spaced {\n margin-top: 32px;\n }\n .file-input {\n /*\n Per MDN -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file\n \"Note: opacity is used to hide the file input instead of visibility: hidden or display: none, because assistive technology interprets the latter two styles to mean the file input isn't interactive.\"\n */\n opacity: 0;\n\n /*\n Adapted styles from https://tailwindcss.com/docs/screen-readers\n */\n border-width: 0;\n clip: rect(0, 0, 0, 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n white-space: nowrap;\n width: 1px;\n }\n .error .dropzone {\n border-color: var(--md-sys-color-error);\n }\n .ix-file-uploader__hint-text{\n font-family: var(--root-primary-font, 'inherit')\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n letter-spacing: 0.4px;\n padding-top: 0.5rem;\n color: var(--clr-on-surface, 'inherit');\n }\n\n .ix-file-uploader__template-file {\n display: flex;\n align-items: center;\n }\n .delete-file-confirmation-dialog {\n max-width: 560px;\n font-family: var(--root-secondary-font, 'Red Hat Display');\n font-weight: 700;\n font-size: 20px;\n leading-trim: NONE;\n line-height: 24px;\n letter-spacing: 0.15px;\n}\n`;\n\nexport default IxFileUploaderStyles;\n"]}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Webcomponent ix-file-uploader following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Digital Realty",
|
|
6
|
-
"version": "1.1.
|
|
6
|
+
"version": "1.1.15",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -29,8 +29,9 @@
|
|
|
29
29
|
"test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@digital-realty/ix-button": "^3.3.
|
|
33
|
-
"@digital-realty/ix-
|
|
32
|
+
"@digital-realty/ix-button": "^3.3.8",
|
|
33
|
+
"@digital-realty/ix-dialog": "^1.1.21",
|
|
34
|
+
"@digital-realty/ix-icon-button": "^1.1.8",
|
|
34
35
|
"@lit-labs/react": "^2.1.0",
|
|
35
36
|
"@lit/react": "^1.0.2",
|
|
36
37
|
"@material/web": "1.2.0",
|
|
@@ -43,8 +44,8 @@
|
|
|
43
44
|
"@open-wc/testing": "^3.1.6",
|
|
44
45
|
"@typescript-eslint/eslint-plugin": "^5.48.0",
|
|
45
46
|
"@typescript-eslint/parser": "^5.48.0",
|
|
46
|
-
"@web/dev-server": "^0.
|
|
47
|
-
"@web/test-runner": "^0.
|
|
47
|
+
"@web/dev-server": "^0.4.6",
|
|
48
|
+
"@web/test-runner": "^0.20.2",
|
|
48
49
|
"concurrently": "^9.1.0",
|
|
49
50
|
"eslint": "^8.31.0",
|
|
50
51
|
"eslint-config-prettier": "^8.3.0",
|
|
@@ -113,5 +114,5 @@
|
|
|
113
114
|
"README.md",
|
|
114
115
|
"LICENSE"
|
|
115
116
|
],
|
|
116
|
-
"gitHead": "
|
|
117
|
+
"gitHead": "fce72072fc7a72d550911c6862d6ca6d783a9482"
|
|
117
118
|
}
|