How to point FilePond to django media files

Question

I am using FilePond.js to allow users to drag and drop images on a website. I am trying to setup FilePond to retrieve user photo inputs. Apparently I am meant to put in the media link of where I want the photo to be uploaded to. Like so:

 <script>
    FilePond.registerPlugin(FilePondPluginImagePreview);
    const inputElement = document.querySelector('input[type="file"]');
    const pond = FilePond.create(inputElement);

    FilePond.setOptions({
      server: "#" *** I have tried everthing possible as a server option, nothing works***
    });
</script>


def add(request):
if request.method == "POST":
    product_title = request.POST.get("product_title")
    product_price = request.POST.get("product_price")
    product_description = request.POST.get("product_description")
    product_images = request.FILES.getlist('filepond')
    request.user.product_set.create(product_title = product_title,product_price =product_price, product_description = product_description, product_images = product_images)
return render(request,"main/add.html")


class product(models.Model):
  user = models.ForeignKey(User, on_delete=models.CASCADE)
  product_title =  models.CharField(max_length=100, blank=True)
  product_price =  models.CharField(max_length=30, blank=True)
  product_description =  models.CharField(max_length=1000, blank=True)
  product_images = models.FileField()

But I can't seem to get FilePond to upload the images to the Django media url.

How can I point FilePond to upload to the url where my photo is meant to be stored?

The only way I know how to collect images from user inputs is with a get request. Also can I use a get request to just retrieve the users submitted FilePond images and upload them to the database that way?

P.S I am trying to point FilePond to upload it to the media url on my development server. Which is http://www.example.local:8000/media

You can do it this way: https://hvitis.dev/how-to-upload-files-with-filepond-and-drf-extension — Hvitis, Oct 18 '20 at 17:19

score 1 · Accepted Answer · answered Feb 15 '19 at 13:27

1

The backend script handling /media should accept POST requests from a field named filepond. See the FilePond docs on how to configure the field name.

Looking at the Django docs on file uploads I guess this is how you retrieve files in Django:

request.FILES['filepond']

If the field is set to multiple

files = request.FILES.getlist('filepond')

So if you adjust your Django script accordingly you should see the file objects appear in the backend.

answered Feb 15 '19 at 13:27

Rik

3,328
1
20
23

If I use this method will I still have to specify something in the server option? Because I tried it and I'm getting an empty list. – Opp Feb 16 '19 at 02:42
1

the server option will have to point to the backend script location – Rik Feb 16 '19 at 15:23
Thanks I figured it out. Please upvote the question for future users who might be having this same issue. – Opp Feb 16 '19 at 23:07

score 0 · Answer 2 · answered Mar 12 '19 at 14:17

I've written a little helper app for django:

django-filepond

It lets you specify the app for which the upload was ment via the upload path and you can write a custom upload handler which then matches the uploaded file to the right model.

It's in an early stage, but maybe it helps.

How to point FilePond to django media files

2 Answers2

Linked