如何在 Django 模板中使用 filepond javascript 库？

Question

Intro : I have Django web app where users are allowed to create posts. Each post has multiple images that are associated with that post.

What I want to do : I want to use Filepond javascript library for remove, add more and previews of selected images.

The issue : The code below is working ok without filepond library but if i try to use filepond library the form is submitting only title input without files.

views.py

class NewsCreateView(CreateView):
    form_class = FileForm
    template_name = 'create.html'
    success_url = '/'

    def form_valid(self, form):
        post = form.save(commit=False)
        post.author = self.request.user
        post.save()
        for f in self.request.FILES.getlist('filepond'):
            FileModel.objects.create(post=post, file=f)
        return super().form_valid(form)

create.html

<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">


<div class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="hpanel" style="margin-top: 10px;">
                <form method="POST" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="form-group">
                        <input type="text" id="id_title" name="title" class="form-control">
                        <input type="file" id="id_file" name="file" multiple="true">                    
                    </div>
                    <button class=" btn btn-success btn-block" type="submit">Submit</button>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>

<script>
    FilePond.registerPlugin(
        FilePondPluginImagePreview
    );

    FilePond.create(
        document.querySelector('input[type="file"]')
    );
</script>

Answer 1

It's not possible to set a file input value, see: https://pqina.nl/blog/the-trouble-with-editing-and-uploading-files-in-the-browser/

So FilePond won't update the existing file input.

You either have to upload the file asynchronously by setting the FilePond server property or use the Filepond File Encode plugin to encode the file as base64 data which can be sent to the server as a string.