{% extends 'django_glue/form/field/_base_file_field.html' %}
{% block x-data %}
async handle_files_change(event) {
let files = Array.from(event.target.files || []);
if (files.length === 0) return;
this.files = [];
Object.keys(this.objects).forEach(id => {
URL.revokeObjectURL(this.files.find(file => file.id === id)?.data);
URL.revokeObjectURL(this.files.find(file => file.id === id)?.preview);
});
this.objects = {};
let file = files[0];
if (file.size > this.maximum_filesize) {
alert(`The file is too large (${this.format_file_size(file.size)}). Maximum size is ${this.format_file_size(this.maximum_filesize)}.`);
return;
}
let file_id = Date.now() + '-' + Math.random().toString(36).substr(2, 9);
let processed = file;
if (file.type.startsWith('image/') && file.type !== 'image/svg+xml' && this.compression) {
processed = await this.compress(file);
}
this.objects[file_id] = processed;
let data = URL.createObjectURL(processed);
this.files.push({
id: file_id,
name: processed.name,
size: processed.size,
type: processed.type,
data: data,
preview: processed.type.startsWith('image/') ? data : null
});
this.update_value();
this.show_dropdown = true;
this.update_form_files();
this.$refs.file_input.value = '';
this.$refs.camera_input.value = '';
},
remove_file(file_id) {
let file = this.files.find(file => file.id === file_id);
if (file) {
URL.revokeObjectURL(file.data);
if (file.preview) URL.revokeObjectURL(file.preview);
}
delete this.objects[file_id];
this.files = [];
this.update_value();
this.update_form_files();
if (this.files.length === 0) {
this.show_dropdown = false;
}
}
{% endblock %}
{% block upload_attributes %}{% endblock %}
{% block file_input_attributes %}{% endblock %}
{% block camera_input_attributes %}{% endblock %}
{% block selection_display %}
No file selected
{% endblock %}
{% block drop_area_text %}
Click to select or drag and drop a file here
{% endblock %}