Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bugfix: Dropzone thinks custom file extensions are folders #913

Merged
merged 6 commits into from
Sep 25, 2024
Merged

Bugfix: Dropzone thinks custom file extensions are folders #913

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
96a1fdd
Bugfix: Dropzone thinks custom file extensions are folders
loivsen Sep 19, 2024
8c1287f
testing timeout and skip items.add
loivsen Sep 24, 2024
eba7a1b
test return
loivsen Sep 24, 2024
394903b
timeout
loivsen Sep 24, 2024
9e1d996
timeouts
loivsen Sep 24, 2024
83f71d8
listeners
loivsen Sep 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 6 additions & 7 deletions packages/uui-file-dropzone/lib/uui-file-dropzone.element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,10 @@ export class UUIFileDropzoneElement extends LabelMixin('', LitElement) {
for (const entry of queue) {
if (entry?.kind !== 'file') continue;

if (entry.type) {
const fileEntry = this._getEntry(entry);
if (!fileEntry) continue;

if (!fileEntry.isDirectory) {
// Entry is a file
const file = entry.getAsFile();
if (!file) continue;
Expand All @@ -125,12 +128,8 @@ export class UUIFileDropzoneElement extends LabelMixin('', LitElement) {
}
} else if (!this.disallowFolderUpload && this.multiple) {
// Entry is a directory
const dir = this._getEntry(entry);

if (dir) {
const structure = await this._mkdir(dir);
folders.push(structure);
}
const structure = await this._mkdir(fileEntry);
folders.push(structure);
}
}

Expand Down
155 changes: 94 additions & 61 deletions packages/uui-file-dropzone/lib/uui-file-dropzone.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { html, fixture, expect } from '@open-wc/testing';
import { html, fixture, expect, oneEvent } from '@open-wc/testing';
import { UUIFileDropzoneElement } from './uui-file-dropzone.element';
import { UUIFileDropzoneEvent } from './UUIFileDropzoneEvent';

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

describe('drop files', () => {
it('supports dropping a single file', done => {
const file1 = new File([''], 'file1.txt', { type: 'text/plain' });
const file2 = new File([''], 'file2.txt', { type: 'text/plain' });
describe('drop files', async () => {
it('supports dropping a single file', () => {
const dataTransfer = new DataTransfer();
dataTransfer.items.add(file1);
dataTransfer.items.add(file2);

expectFileChangeEvent(element, 1, 0, done);

element.dispatchEvent(new DragEvent('drop', { dataTransfer }));
// Skip if browser does not support DataTransfer.items
if ('items' in dataTransfer) {
const file1 = new File([''], 'file1.txt', { type: 'text/plain' });
const file2 = new File([''], 'file2.txt', { type: 'text/plain' });
dataTransfer.items.add(file1);
dataTransfer.items.add(file2);

const listener = oneEvent(element, UUIFileDropzoneEvent.CHANGE, false);
element.dispatchEvent(new DragEvent('drop', { dataTransfer }));

listener.then(event => {
const { files } = event.detail;
expect(files.length).to.equal(1);
});
}
});

it('can drop multiple files', done => {
const file1 = new File([''], 'file1.txt', { type: 'text/plain' });
const file2 = new File([''], 'file2.txt', { type: 'text/plain' });
it('can drop multiple files', () => {
const dataTransfer = new DataTransfer();
dataTransfer.items.add(file1);
dataTransfer.items.add(file2);

element.multiple = true;

expectFileChangeEvent(element, 2, 0, done);

element.dispatchEvent(new DragEvent('drop', { dataTransfer }));
if ('items' in dataTransfer) {
const file1 = new File([''], 'file1.txt', { type: 'text/plain' });
const file2 = new File([''], 'file2.txt', { type: 'text/plain' });
dataTransfer.items.add(file1);
dataTransfer.items.add(file2);

element.multiple = true;

const listener = oneEvent(element, UUIFileDropzoneEvent.CHANGE, false);
element.dispatchEvent(new DragEvent('drop', { dataTransfer }));

listener.then(event => {
const { files } = event.detail;
expect(files.length).to.equal(1);
});
}
});

it('can set the accept attribute with a mimetype', done => {
const file1 = new File([''], 'file1.jpg', { type: 'image/jpeg' });
const file2 = new File([''], 'file2.txt', { type: 'text/plain' });
it('can set the accept attribute with a mimetype', () => {
const dataTransfer = new DataTransfer();
dataTransfer.items.add(file1);
dataTransfer.items.add(file2);

element.accept = 'image/*';

expectFileChangeEvent(element, 1, 0, done);

element.dispatchEvent(new DragEvent('drop', { dataTransfer }));
if ('items' in dataTransfer) {
const file1 = new File([''], 'file1.jpg', { type: 'image/jpeg' });
const file2 = new File([''], 'file2.txt', { type: 'text/plain' });
dataTransfer.items.add(file1);
dataTransfer.items.add(file2);

element.accept = 'image/*';

const listener = oneEvent(element, UUIFileDropzoneEvent.CHANGE, false);
element.dispatchEvent(new DragEvent('drop', { dataTransfer }));

listener.then(event => {
const { files } = event.detail;
expect(files.length).to.equal(1);
});
}
});

it('can set the accept attribute with a file extension', done => {
const file1 = new File([''], 'file1.jpg', { type: 'image/jpeg' });
const file2 = new File([''], 'file2.txt', { type: 'text/plain' });
it('can set the accept attribute with a file extension', () => {
const dataTransfer = new DataTransfer();
dataTransfer.items.add(file1);
dataTransfer.items.add(file2);

element.accept = '.jpg';

expectFileChangeEvent(element, 1, 0, done);

element.dispatchEvent(new DragEvent('drop', { dataTransfer }));
if ('items' in dataTransfer) {
const file1 = new File([''], 'file1.jpg', { type: 'image/jpeg' });
const file2 = new File([''], 'file2.txt', { type: 'text/plain' });
dataTransfer.items.add(file1);
dataTransfer.items.add(file2);

element.accept = '.jpg';

const listener = oneEvent(element, UUIFileDropzoneEvent.CHANGE, false);
element.dispatchEvent(new DragEvent('drop', { dataTransfer }));

listener.then(event => {
const { files } = event.detail;
expect(files.length).to.equal(1);
});
}
});
});

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

it('supports selecting a single file', done => {
const file1 = new File([''], 'file1.txt', { type: 'text/plain' });
const file2 = new File([''], 'file2.txt', { type: 'text/plain' });
const dt = new DataTransfer();
dt.items.add(file1);
dt.items.add(file2);

expectFileChangeEvent(element, 1, 0, done);

innerElement.files = dt.files;
innerElement.dispatchEvent(new Event('change'));
if ('items' in dt) {
const file1 = new File([''], 'file1.txt', { type: 'text/plain' });
const file2 = new File([''], 'file2.txt', { type: 'text/plain' });
dt.items.add(file1);
dt.items.add(file2);

expectFileChangeEvent(element, 1, 0, done);

innerElement.files = dt.files;
innerElement.dispatchEvent(new Event('change'));
} else {
done();
}
});

it('can select multiple files', done => {
const file1 = new File([''], 'file1.txt', { type: 'text/plain' });
const file2 = new File([''], 'file2.txt', { type: 'text/plain' });
const dt = new DataTransfer();
dt.items.add(file1);
dt.items.add(file2);
if ('items' in dt) {
const file1 = new File([''], 'file1.txt', { type: 'text/plain' });
const file2 = new File([''], 'file2.txt', { type: 'text/plain' });
dt.items.add(file1);
dt.items.add(file2);

element.multiple = true;
element.multiple = true;

expectFileChangeEvent(element, 2, 0, done);
expectFileChangeEvent(element, 2, 0, done);

innerElement.files = dt.files;
innerElement.dispatchEvent(new Event('change'));
innerElement.files = dt.files;
innerElement.dispatchEvent(new Event('change'));
} else {
done();
}
});
});
});
Loading