I’m using FilePond for file uploads in my Django project. I want to add a custom description input field next to each file name in the list of files to be uploaded. When I use the following HTML, the description fields appear but they are outside the FilePond design. This way, I can upload files, but I can’t add a custom input field next to the file name within the FilePond structure.
Here is the HTML I’m using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FilePond File Upload</title>
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
.filepond--item {
width: calc(100% - 0.5em);
}
</style>
</head>
<body>
<div class="container">
<form action="{% url 'upload_file' %}" method="POST" enctype="multipart/form-data" id="file-upload-form">
{% csrf_token %}
<input type="file" class="filepond" name="file">
<div id="description-container"></div>
<button type="button" id="upload-button" class="btn btn-primary mt-3">Upload</button>
</form>
</div>
<script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.js"></script>
<script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
// Register the plugins
FilePond.registerPlugin(
FilePondPluginFileValidateSize,
FilePondPluginFileValidateType,
);
// Set FilePond global options
FilePond.setOptions({
maxFileSize: '100KB',
credits: false,
allowMultiple: true,
maxFiles: 50,
server: {
process: {
url: '{% url "upload_file" %}',
method: 'POST',
headers: {
'X-CSRFToken': '{{ csrf_token }}'
},
onload: (response) => {
console.log('File uploaded successfully:', response);
}
}
},
instantUpload: false // Disable automatic upload
});
// Turn all file input elements into ponds
const pond = FilePond.create(document.querySelector('.filepond'), {
onaddfile: (error, fileItem) => {
if (error) {
console.log('Oh no');
return;
}
console.log('File added', fileItem);
// Create a description input for each file
const descriptionContainer = document.getElementById('description-container');
const descriptionInput = document.createElement('textarea');
descriptionInput.setAttribute('class', 'form-control mt-2');
descriptionInput.setAttribute('name', 'descriptions');
descriptionInput.setAttribute('placeholder', 'Description');
descriptionInput.setAttribute('data-file-id', fileItem.id);
descriptionContainer.appendChild(descriptionInput);
},
onremovefile: (error, fileItem) => {
if (error) {
console.log('Oh no');
return;
}
console.log('File removed', fileItem);
// Remove the corresponding description input
const descriptionContainer = document.getElementById('description-container');
const descriptionInputs = descriptionContainer.querySelectorAll('textarea');
descriptionInputs.forEach(input => {
if (input.getAttribute('data-file-id') === fileItem.id) {
descriptionContainer.removeChild(input);
}
});
}
});
// Upload button click handler
document.getElementById('upload-button').addEventListener('click', () => {
// Add descriptions to FormData
const formData = new FormData(document.getElementById('file-upload-form'));
const descriptionContainer = document.getElementById('description-container');
const descriptionInputs = descriptionContainer.querySelectorAll('textarea');
descriptionInputs.forEach(input => {
formData.append('descriptions', input.value);
});
// Process files manually
pond.processFiles().then(() => {
const xhr = new XMLHttpRequest();
xhr.open('POST', '{% url "upload_file" %}');
xhr.setRequestHeader('X-CSRFToken', '{{ csrf_token }}');
xhr.onload = () => {
console.log('Files uploaded successfully:', xhr.responseText);
};
xhr.send(formData);
});
});
</script>
</body>
</html>
When I select files, the description fields appear, but they are outside the FilePond design. I can upload files, but I cannot add a custom input field within the FilePond structure next to the file name.
Question: How can I add a custom description input field for each file within the FilePond structure so that it appears next to the file name in the FilePond design?