Skip to content

Commit f4c7956

Browse files
loivsenloivsen
authored
bug: Dropzone thinks custom file extensions are folders (#913)
* Bugfix: Dropzone thinks custom file extensions are folders * testing timeout and skip items.add
1 parent 75faea2 commit f4c7956

File tree

2 files changed

+100
-68
lines changed

2 files changed

+100
-68
lines changed

‎packages/uui-file-dropzone/lib/uui-file-dropzone.element.ts

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,10 @@ export class UUIFileDropzoneElement extends LabelMixin('', LitElement) {
116116
for (const entry of queue) {
117117
if (entry?.kind !== 'file') continue;
118118

119-
if (entry.type) {
119+
const fileEntry = this._getEntry(entry);
120+
if (!fileEntry) continue;
121+
122+
if (!fileEntry.isDirectory) {
120123
// Entry is a file
121124
const file = entry.getAsFile();
122125
if (!file) continue;
@@ -125,12 +128,8 @@ export class UUIFileDropzoneElement extends LabelMixin('', LitElement) {
125128
}
126129
} else if (!this.disallowFolderUpload && this.multiple) {
127130
// Entry is a directory
128-
const dir = this._getEntry(entry);
129-
130-
if (dir) {
131-
const structure = await this._mkdir(dir);
132-
folders.push(structure);
133-
}
131+
const structure = await this._mkdir(fileEntry);
132+
folders.push(structure);
134133
}
135134
}
136135

‎packages/uui-file-dropzone/lib/uui-file-dropzone.test.ts

Lines changed: 94 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { html, fixture, expect } from '@open-wc/testing';
1+
import { html, fixture, expect, oneEvent } from '@open-wc/testing';
22
import { UUIFileDropzoneElement } from './uui-file-dropzone.element';
33
import { UUIFileDropzoneEvent } from './UUIFileDropzoneEvent';
44

@@ -39,59 +39,84 @@ describe('UUIFileDropzoneElement', () => {
3939
await expect(element).shadowDom.to.be.accessible();
4040
});
4141

42-
describe('drop files', () => {
43-
it('supports dropping a single file', done => {
44-
const file1 = new File([''], 'file1.txt', { type: 'text/plain' });
45-
const file2 = new File([''], 'file2.txt', { type: 'text/plain' });
42+
describe('drop files', async () => {
43+
it('supports dropping a single file', () => {
4644
const dataTransfer = new DataTransfer();
47-
dataTransfer.items.add(file1);
48-
dataTransfer.items.add(file2);
49-
50-
expectFileChangeEvent(element, 1, 0, done);
51-
52-
element.dispatchEvent(new DragEvent('drop', { dataTransfer }));
45+
// Skip if browser does not support DataTransfer.items
46+
if ('items' in dataTransfer) {
47+
const file1 = new File([''], 'file1.txt', { type: 'text/plain' });
48+
const file2 = new File([''], 'file2.txt', { type: 'text/plain' });
49+
dataTransfer.items.add(file1);
50+
dataTransfer.items.add(file2);
51+
52+
const listener = oneEvent(element, UUIFileDropzoneEvent.CHANGE, false);
53+
element.dispatchEvent(new DragEvent('drop', { dataTransfer }));
54+
55+
listener.then(event => {
56+
const { files } = event.detail;
57+
expect(files.length).to.equal(1);
58+
});
59+
}
5360
});
5461

55-
it('can drop multiple files', done => {
56-
const file1 = new File([''], 'file1.txt', { type: 'text/plain' });
57-
const file2 = new File([''], 'file2.txt', { type: 'text/plain' });
62+
it('can drop multiple files', () => {
5863
const dataTransfer = new DataTransfer();
59-
dataTransfer.items.add(file1);
60-
dataTransfer.items.add(file2);
61-
62-
element.multiple = true;
63-
64-
expectFileChangeEvent(element, 2, 0, done);
65-
66-
element.dispatchEvent(new DragEvent('drop', { dataTransfer }));
64+
if ('items' in dataTransfer) {
65+
const file1 = new File([''], 'file1.txt', { type: 'text/plain' });
66+
const file2 = new File([''], 'file2.txt', { type: 'text/plain' });
67+
dataTransfer.items.add(file1);
68+
dataTransfer.items.add(file2);
69+
70+
element.multiple = true;
71+
72+
const listener = oneEvent(element, UUIFileDropzoneEvent.CHANGE, false);
73+
element.dispatchEvent(new DragEvent('drop', { dataTransfer }));
74+
75+
listener.then(event => {
76+
const { files } = event.detail;
77+
expect(files.length).to.equal(1);
78+
});
79+
}
6780
});
6881

69-
it('can set the accept attribute with a mimetype', done => {
70-
const file1 = new File([''], 'file1.jpg', { type: 'image/jpeg' });
71-
const file2 = new File([''], 'file2.txt', { type: 'text/plain' });
82+
it('can set the accept attribute with a mimetype', () => {
7283
const dataTransfer = new DataTransfer();
73-
dataTransfer.items.add(file1);
74-
dataTransfer.items.add(file2);
75-
76-
element.accept = 'image/*';
77-
78-
expectFileChangeEvent(element, 1, 0, done);
79-
80-
element.dispatchEvent(new DragEvent('drop', { dataTransfer }));
84+
if ('items' in dataTransfer) {
85+
const file1 = new File([''], 'file1.jpg', { type: 'image/jpeg' });
86+
const file2 = new File([''], 'file2.txt', { type: 'text/plain' });
87+
dataTransfer.items.add(file1);
88+
dataTransfer.items.add(file2);
89+
90+
element.accept = 'image/*';
91+
92+
const listener = oneEvent(element, UUIFileDropzoneEvent.CHANGE, false);
93+
element.dispatchEvent(new DragEvent('drop', { dataTransfer }));
94+
95+
listener.then(event => {
96+
const { files } = event.detail;
97+
expect(files.length).to.equal(1);
98+
});
99+
}
81100
});
82101

83-
it('can set the accept attribute with a file extension', done => {
84-
const file1 = new File([''], 'file1.jpg', { type: 'image/jpeg' });
85-
const file2 = new File([''], 'file2.txt', { type: 'text/plain' });
102+
it('can set the accept attribute with a file extension', () => {
86103
const dataTransfer = new DataTransfer();
87-
dataTransfer.items.add(file1);
88-
dataTransfer.items.add(file2);
89-
90-
element.accept = '.jpg';
91-
92-
expectFileChangeEvent(element, 1, 0, done);
93-
94-
element.dispatchEvent(new DragEvent('drop', { dataTransfer }));
104+
if ('items' in dataTransfer) {
105+
const file1 = new File([''], 'file1.jpg', { type: 'image/jpeg' });
106+
const file2 = new File([''], 'file2.txt', { type: 'text/plain' });
107+
dataTransfer.items.add(file1);
108+
dataTransfer.items.add(file2);
109+
110+
element.accept = '.jpg';
111+
112+
const listener = oneEvent(element, UUIFileDropzoneEvent.CHANGE, false);
113+
element.dispatchEvent(new DragEvent('drop', { dataTransfer }));
114+
115+
listener.then(event => {
116+
const { files } = event.detail;
117+
expect(files.length).to.equal(1);
118+
});
119+
}
95120
});
96121
});
97122

@@ -103,31 +128,39 @@ describe('UUIFileDropzoneElement', () => {
103128
});
104129

105130
it('supports selecting a single file', done => {
106-
const file1 = new File([''], 'file1.txt', { type: 'text/plain' });
107-
const file2 = new File([''], 'file2.txt', { type: 'text/plain' });
108131
const dt = new DataTransfer();
109-
dt.items.add(file1);
110-
dt.items.add(file2);
111-
112-
expectFileChangeEvent(element, 1, 0, done);
113-
114-
innerElement.files = dt.files;
115-
innerElement.dispatchEvent(new Event('change'));
132+
if ('items' in dt) {
133+
const file1 = new File([''], 'file1.txt', { type: 'text/plain' });
134+
const file2 = new File([''], 'file2.txt', { type: 'text/plain' });
135+
dt.items.add(file1);
136+
dt.items.add(file2);
137+
138+
expectFileChangeEvent(element, 1, 0, done);
139+
140+
innerElement.files = dt.files;
141+
innerElement.dispatchEvent(new Event('change'));
142+
} else {
143+
done();
144+
}
116145
});
117146

118147
it('can select multiple files', done => {
119-
const file1 = new File([''], 'file1.txt', { type: 'text/plain' });
120-
const file2 = new File([''], 'file2.txt', { type: 'text/plain' });
121148
const dt = new DataTransfer();
122-
dt.items.add(file1);
123-
dt.items.add(file2);
149+
if ('items' in dt) {
150+
const file1 = new File([''], 'file1.txt', { type: 'text/plain' });
151+
const file2 = new File([''], 'file2.txt', { type: 'text/plain' });
152+
dt.items.add(file1);
153+
dt.items.add(file2);
124154

125-
element.multiple = true;
155+
element.multiple = true;
126156

127-
expectFileChangeEvent(element, 2, 0, done);
157+
expectFileChangeEvent(element, 2, 0, done);
128158

129-
innerElement.files = dt.files;
130-
innerElement.dispatchEvent(new Event('change'));
159+
innerElement.files = dt.files;
160+
innerElement.dispatchEvent(new Event('change'));
161+
} else {
162+
done();
163+
}
131164
});
132165
});
133166
});

0 commit comments

Comments
 (0)