javascript
This commit is contained in:
parent
7092583b0a
commit
981e7ff244
1 changed files with 67 additions and 23 deletions
|
@ -1,37 +1,81 @@
|
||||||
import { ApplicationController } from './application_controller';
|
import { ApplicationController } from './application_controller';
|
||||||
import { hide, show } from '@utils';
|
|
||||||
|
|
||||||
export class FileInputResetController extends ApplicationController {
|
export class FileInputResetController extends ApplicationController {
|
||||||
static targets = ['reset'];
|
static targets = ['fileList'];
|
||||||
|
declare fileListTarget: HTMLElement;
|
||||||
declare readonly resetTarget: HTMLElement;
|
|
||||||
|
|
||||||
connect() {
|
connect() {
|
||||||
this.on('change', (event) => {
|
super.connect();
|
||||||
if (event.target == this.fileInput) {
|
this.updateFileList();
|
||||||
this.showResetButton();
|
this.element.addEventListener('change', (event) => {
|
||||||
|
if (
|
||||||
|
event.target instanceof HTMLInputElement &&
|
||||||
|
event.target.type === 'file'
|
||||||
|
) {
|
||||||
|
this.updateFileList();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
reset(event: Event) {
|
updateFileList() {
|
||||||
event.preventDefault();
|
const files = this.fileInput?.files ?? [];
|
||||||
this.fileInput.value = '';
|
this.fileListTarget.innerHTML = '';
|
||||||
hide(this.resetTarget);
|
|
||||||
|
const deleteLabel =
|
||||||
|
this.element.getAttribute('data-delete-label') || 'Delete';
|
||||||
|
|
||||||
|
Array.from(files).forEach((file, index) => {
|
||||||
|
const container = document.createElement('li');
|
||||||
|
container.style.display = 'flex';
|
||||||
|
container.style.alignItems = 'center';
|
||||||
|
|
||||||
|
const deleteButton = this.createDeleteButton(deleteLabel, index);
|
||||||
|
container.appendChild(deleteButton);
|
||||||
|
|
||||||
|
const listItem = document.createElement('div');
|
||||||
|
listItem.textContent = file.name;
|
||||||
|
listItem.style.marginLeft = '8px';
|
||||||
|
|
||||||
|
container.appendChild(listItem);
|
||||||
|
this.fileListTarget.appendChild(container);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
showResetButton() {
|
createDeleteButton(deleteLabel: string, index: number) {
|
||||||
show(this.resetTarget);
|
const button = document.createElement('button');
|
||||||
|
button.textContent = deleteLabel;
|
||||||
|
button.classList.add(
|
||||||
|
'fr-btn',
|
||||||
|
'fr-btn--tertiary',
|
||||||
|
'fr-btn--sm',
|
||||||
|
'fr-icon-delete-line'
|
||||||
|
);
|
||||||
|
|
||||||
|
button.addEventListener('click', (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
this.removeFile(index);
|
||||||
|
});
|
||||||
|
|
||||||
|
return button;
|
||||||
}
|
}
|
||||||
|
|
||||||
private get fileInput() {
|
removeFile(index: number) {
|
||||||
const inputs =
|
const files = this.fileInput?.files;
|
||||||
this.element.querySelectorAll<HTMLInputElement>('input[type="file"]');
|
if (!files) return;
|
||||||
if (inputs.length == 0) {
|
|
||||||
throw new Error('No file input found');
|
const dataTransfer = new DataTransfer();
|
||||||
} else if (inputs.length > 1) {
|
Array.from(files).forEach((file, i) => {
|
||||||
throw new Error('Multiple file inputs found');
|
if (index !== i) {
|
||||||
}
|
dataTransfer.items.add(file);
|
||||||
return inputs[0];
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (this.fileInput) this.fileInput.files = dataTransfer.files;
|
||||||
|
this.updateFileList();
|
||||||
|
}
|
||||||
|
|
||||||
|
private get fileInput(): HTMLInputElement | null {
|
||||||
|
return this.element.querySelector(
|
||||||
|
'input[type="file"]'
|
||||||
|
) as HTMLInputElement | null;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue