5

I am trying to use FilePond to implement drag and drop functionality on my website. I have downloaded the filepond css and js files and attatched them correctly. I keep getting an "Uncaught reference error : FilePond is not defined" whenever I try to finish the setup. 

{% extends 'main/dashboardbase.html'%}
{% block content %}
{% load static %}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-tofit=no">
 <!-- Bootstrap CSS -->

 <title>Hello, world!</title>
<link rel="stylesheet "type="text/css" href="{% static 'main/add.css'%}">
<link rel="stylesheet "type="text/css" href="{% static 'main/filepond.css'%}">
<link rel="stylesheet" type="text/css" href="{% static 'main/filepond-plugin-image-preview.css'%}">
 </head>
  <body>
  <button type="submit" id="add">Save</button>
  <a href="{% url 'main:products'%}">
    <button id="cancel" >Cancel</button>
  </a>
  <div class="col-sm-12 col-lg-6" id="inner">
    <form method="POST" enctype="multipart/form-data" id="inputform" name="form1">
        {% csrf_token %}
        <h4>Title</h4>
        <input type="text" name="product_title" id="product_title" placeholder="Give your product a name">
    <h4>Price</h4>
    <input type="text" name="product_price" id="product_price" placeholder="0.00">
    <h4>Description</h4>
    <input type="text" name="product_description" id="product_description" placeholder="Write a description about your product">
    <input type="file" name="filepond">
</form>
  </div>
    <script type="text/javascript" src="{% static 'main/add.js'%}"></script>
    <script src="{% static 'main/filepond-plugin-image-preview.js'%}"></script>
    <script src="{% static 'main/filepond.js'%}"></script>


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

 {% endblock%}
Opp
  • 520
  • 1
  • 8
  • 21

1 Answers1

9

Your loading the FilePond.js file correctly but you're trying to use it before it has loaded. To solve this, move the initialization logic inside a 'DOMContentLoaded' event handler.

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Register any plugins
    FilePond.registerPlugin(FilePondPluginImagePreview);

    // Create FilePond object
    const inputElement = document.querySelector('input[type="file"]');
    const pond = FilePond.create(inputElement);
  });      
</script>
Rik
  • 3,328
  • 1
  • 20
  • 23
  • Thanks, that's exactly what I was looking for. I noticed that a lot of people had this question and there were no resources on how to fix it. Could you up-vote the question so the next person that might have this issue will be able to find it. – Opp Feb 13 '19 at 10:17
  • Oh and one last thing, I'm trying to enable file pond to add image previews and I've run into issues with this also. I attached the css and js properly but it's still not loading the image previews. I'm editing my code to reflect the updates for the image preview. Could you take a look at it and tell me where I went wrong? – Opp Feb 13 '19 at 11:07
  • 2
    If you are using js files manually do not forget to add the plugin file. Here an example: https://pqina.nl/filepond/docs/patterns/plugins/image-preview/ – Suat Atan PhD Jul 22 '19 at 07:24