Skip to content

Commit 224d619

Browse files
sblondeausblondeau
committed
[Dropzone] Improve display with multiple files
1 parent 61819ae commit 224d619

File tree

9 files changed

+203
-122
lines changed

9 files changed

+203
-122
lines changed

‎src/Dropzone/CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# CHANGELOG
22

3+
## 2.24
4+
5+
- Preview works with muliple files
6+
37
## 2.20
48

59
- Enable file replacement via "drag-and-drop"

‎src/Dropzone/assets/dist/controller.d.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,14 @@ export default class extends Controller {
66
readonly previewClearButtonTarget: HTMLButtonElement;
77
readonly previewFilenameTarget: HTMLDivElement;
88
readonly previewImageTarget: HTMLDivElement;
9+
readonly containerTarget: HTMLDivElement;
910
static targets: string[];
1011
initialize(): void;
1112
connect(): void;
1213
disconnect(): void;
1314
clear(): void;
1415
onInputChange(event: any): void;
15-
_populateImagePreview(file: Blob): void;
16+
_populateImagePreview(file: Blob, imagePreviewElement: HTMLElement): void;
1617
onDragEnter(): void;
1718
onDragLeave(event: any): void;
1819
private dispatchEvent;

‎src/Dropzone/assets/dist/controller.js‎

Lines changed: 31 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -25,55 +25,71 @@ class default_1 extends Controller {
2525
this.inputTarget.value = '';
2626
this.inputTarget.style.display = 'block';
2727
this.placeholderTarget.style.display = 'block';
28+
this.previewTarget.innerHTML = '';
2829
this.previewTarget.style.display = 'none';
29-
this.previewImageTarget.style.display = 'none';
30-
this.previewImageTarget.style.backgroundImage = 'none';
31-
this.previewFilenameTarget.textContent = '';
3230
this.dispatchEvent('clear');
3331
}
3432
onInputChange(event) {
35-
const file = event.target.files[0];
36-
if (typeof file === 'undefined') {
33+
const files = event.target.files;
34+
if (files.length === 0) {
35+
this.previewClearButtonTarget.style.display = 'none';
3736
return;
3837
}
3938
this.inputTarget.style.display = 'none';
4039
this.placeholderTarget.style.display = 'none';
41-
this.previewFilenameTarget.textContent = file.name;
42-
this.previewTarget.style.display = 'flex';
43-
this.previewImageTarget.style.display = 'none';
44-
if (file.type && file.type.indexOf('image') !== -1) {
45-
this._populateImagePreview(file);
40+
this.previewTarget.innerHTML = '';
41+
for (let file of files) {
42+
const filePreviewContainer = document.createElement('div');
43+
filePreviewContainer.classList.add('dropzone-preview-file');
44+
const fileNameElement = document.createElement('span');
45+
fileNameElement.textContent = file.name;
46+
filePreviewContainer.appendChild(fileNameElement);
47+
if (file.type) {
48+
const imagePreviewElement = document.createElement('div');
49+
if (file.type.indexOf('image') !== -1) {
50+
imagePreviewElement.classList.add('dropzone-preview-image');
51+
this._populateImagePreview(file, imagePreviewElement);
52+
}
53+
else {
54+
imagePreviewElement.classList.add('dropzone-preview-svg');
55+
}
56+
filePreviewContainer.appendChild(imagePreviewElement);
57+
}
58+
this.previewTarget.appendChild(filePreviewContainer);
59+
this.dispatchEvent('change', file);
4660
}
47-
this.dispatchEvent('change', file);
61+
this.previewTarget.style.display = 'grid';
4862
}
49-
_populateImagePreview(file) {
63+
_populateImagePreview(file, imagePreviewElement) {
5064
if (typeof FileReader === 'undefined') {
5165
return;
5266
}
5367
const reader = new FileReader();
5468
reader.addEventListener('load', (event) => {
55-
this.previewImageTarget.style.display = 'block';
56-
this.previewImageTarget.style.backgroundImage = `url("${event.target.result}")`;
69+
imagePreviewElement.style.backgroundImage = `url("${event.target.result}")`;
70+
imagePreviewElement.style.display = 'block';
5771
});
5872
reader.readAsDataURL(file);
5973
}
6074
onDragEnter() {
6175
this.inputTarget.style.display = 'block';
6276
this.placeholderTarget.style.display = 'block';
6377
this.previewTarget.style.display = 'none';
78+
this.containerTarget.classList.add('dropzone-on-drag-enter');
6479
}
6580
onDragLeave(event) {
6681
event.preventDefault();
6782
if (!this.element.contains(event.relatedTarget)) {
6883
this.inputTarget.style.display = 'none';
6984
this.placeholderTarget.style.display = 'none';
7085
this.previewTarget.style.display = 'block';
86+
this.containerTarget.classList.add('dropzone-on-drag-leave');
7187
}
7288
}
7389
dispatchEvent(name, payload = {}) {
7490
this.dispatch(name, { detail: payload, prefix: 'dropzone' });
7591
}
7692
}
77-
default_1.targets = ['input', 'placeholder', 'preview', 'previewClearButton', 'previewFilename', 'previewImage'];
93+
default_1.targets = ['container', 'input', 'placeholder', 'preview', 'previewClearButton', 'previewFilename', 'previewImage'];
7894

7995
export { default_1 as default };

‎src/Dropzone/assets/dist/style.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/Dropzone/assets/src/controller.ts‎

Lines changed: 44 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,9 @@ export default class extends Controller {
1616
declare readonly previewClearButtonTarget: HTMLButtonElement;
1717
declare readonly previewFilenameTarget: HTMLDivElement;
1818
declare readonly previewImageTarget: HTMLDivElement;
19+
declare readonly containerTarget: HTMLDivElement;
1920

20-
static targets = ['input', 'placeholder', 'preview', 'previewClearButton', 'previewFilename', 'previewImage'];
21+
static targets = ['container', 'input', 'placeholder', 'preview', 'previewClearButton', 'previewFilename', 'previewImage'];
2122

2223
initialize() {
2324
this.clear = this.clear.bind(this);
@@ -56,38 +57,60 @@ export default class extends Controller {
5657
this.inputTarget.value = '';
5758
this.inputTarget.style.display = 'block';
5859
this.placeholderTarget.style.display = 'block';
60+
this.previewTarget.innerHTML = '';
5961
this.previewTarget.style.display = 'none';
60-
this.previewImageTarget.style.display = 'none';
61-
this.previewImageTarget.style.backgroundImage = 'none';
62-
this.previewFilenameTarget.textContent = '';
6362

6463
this.dispatchEvent('clear');
6564
}
6665

6766
onInputChange(event: any) {
68-
const file = event.target.files[0];
69-
if (typeof file === 'undefined') {
67+
const files = event.target.files;
68+
if (files.length === 0) {
69+
this.previewClearButtonTarget.style.display = 'none';
7070
return;
7171
}
7272

7373
// Hide the input and placeholder
7474
this.inputTarget.style.display = 'none';
7575
this.placeholderTarget.style.display = 'none';
7676

77-
// Show the filename in preview
78-
this.previewFilenameTarget.textContent = file.name;
79-
this.previewTarget.style.display = 'flex';
77+
// Clear previous previews
78+
this.previewTarget.innerHTML = '';
8079

81-
// If the file is an image, load it and display it as preview
82-
this.previewImageTarget.style.display = 'none';
83-
if (file.type && file.type.indexOf('image') !== -1) {
84-
this._populateImagePreview(file);
85-
}
80+
for (let file of files) {
81+
// Create a container for each file preview
82+
const filePreviewContainer = document.createElement('div');
83+
filePreviewContainer.classList.add('dropzone-preview-file');
8684

87-
this.dispatchEvent('change', file);
88-
}
85+
// Create a filename preview element
86+
const fileNameElement = document.createElement('span');
87+
fileNameElement.textContent = file.name;
88+
filePreviewContainer.appendChild(fileNameElement);
89+
90+
// Create an image preview element if the file is an image, else a default svg file icon
91+
if (file.type) {
92+
const imagePreviewElement = document.createElement('div');
93+
if (file.type.indexOf('image') !== -1) {
94+
imagePreviewElement.classList.add('dropzone-preview-image');
95+
this._populateImagePreview(file, imagePreviewElement);
96+
} else {
97+
imagePreviewElement.classList.add('dropzone-preview-svg');
98+
}
99+
100+
filePreviewContainer.appendChild(imagePreviewElement);
101+
}
102+
103+
// Append the file preview container to the main preview target
104+
this.previewTarget.appendChild(filePreviewContainer);
105+
106+
this.dispatchEvent('change', file);
107+
};
108+
109+
// Show the preview container
110+
this.previewTarget.style.display = 'grid';
111+
}
89112

90-
_populateImagePreview(file: Blob) {
113+
_populateImagePreview(file: Blob, imagePreviewElement: HTMLElement) {
91114
if (typeof FileReader === 'undefined') {
92115
// FileReader API not available, skip
93116
return;
@@ -96,8 +119,8 @@ export default class extends Controller {
96119
const reader = new FileReader();
97120

98121
reader.addEventListener('load', (event: any) => {
99-
this.previewImageTarget.style.display = 'block';
100-
this.previewImageTarget.style.backgroundImage = `url("${event.target.result}")`;
122+
imagePreviewElement.style.backgroundImage = `url("${event.target.result}")`;
123+
imagePreviewElement.style.display = 'block';
101124
});
102125

103126
reader.readAsDataURL(file);
@@ -107,6 +130,7 @@ export default class extends Controller {
107130
this.inputTarget.style.display = 'block';
108131
this.placeholderTarget.style.display = 'block';
109132
this.previewTarget.style.display = 'none';
133+
this.containerTarget.classList.add('dropzone-on-drag-enter');
110134
}
111135

112136
onDragLeave(event: any) {
@@ -117,6 +141,7 @@ export default class extends Controller {
117141
this.inputTarget.style.display = 'none';
118142
this.placeholderTarget.style.display = 'none';
119143
this.previewTarget.style.display = 'block';
144+
this.containerTarget.classList.add('dropzone-on-drag-leave');
120145
}
121146
}
122147

0 commit comments

Comments
 (0)