41 lines
1.2 KiB
JavaScript
41 lines
1.2 KiB
JavaScript
(() => {
|
|
const dropzones = document.querySelectorAll('[data-dropzone]');
|
|
dropzones.forEach((dropzone) => {
|
|
const input = dropzone.querySelector('input[type="file"]');
|
|
const fileLabel = dropzone.querySelector('[data-file-name]');
|
|
if (!input || !fileLabel) return;
|
|
|
|
const updateName = (file) => {
|
|
if (!file) {
|
|
fileLabel.textContent = 'Belum ada file dipilih';
|
|
return;
|
|
}
|
|
fileLabel.textContent = `${file.name} (${Math.round(file.size / 1024)} KB)`;
|
|
};
|
|
|
|
input.addEventListener('change', (event) => {
|
|
updateName(event.target.files[0]);
|
|
});
|
|
|
|
['dragenter', 'dragover'].forEach((eventName) => {
|
|
dropzone.addEventListener(eventName, (event) => {
|
|
event.preventDefault();
|
|
dropzone.classList.add('is-dragover');
|
|
});
|
|
});
|
|
|
|
['dragleave', 'drop'].forEach((eventName) => {
|
|
dropzone.addEventListener(eventName, () => {
|
|
dropzone.classList.remove('is-dragover');
|
|
});
|
|
});
|
|
|
|
dropzone.addEventListener('drop', (event) => {
|
|
event.preventDefault();
|
|
if (!event.dataTransfer.files.length) return;
|
|
input.files = event.dataTransfer.files;
|
|
updateName(event.dataTransfer.files[0]);
|
|
});
|
|
});
|
|
})();
|