DRF Filepond implementation

gistfile1.txt

```js
<file-pond
    name="filepond"
    ref="pond"
    label-idle="Drop file here..."
    v-bind:allow-multiple="false"
    accepted-file-types="image/jpeg, image/png, image/jpg"
    v-bind:files="myFiles"
    v-on:init="handleFilePondInit"                     <-- Example optional hook
    v-on:processfile="handleFilePondSuccessProcessed"  <-- Example optional hook
    :server="serverOptions"
/>
...
<script>
//* FILE POND
//* On the client side, you need to set the endpoints of the process, revert, fetch, load, restore and patch functions
//* to match the endpoint used in your path statement above. For example if the first parameter to url is fp/ then the
//* endpoint for the process function will be /fp/process/
import vueFilePond from "vue-filepond";
import { setOptions } from "vue-filepond";
// Import FilePond styles
import "filepond/dist/filepond.min.css";

// Import FilePond plugins
// Please note that you need to install these plugins separately

// Import image preview plugin styles
import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css";

// Import image preview and file type validation plugins
import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type";
import FilePondPluginImagePreview from "filepond-plugin-image-preview";

// Create component
const FilePond = vueFilePond(
  FilePondPluginFileValidateType,
  FilePondPluginImagePreview
);
export default {
  data: function () {
    return {
      myFiles: [],
      serverOptions: {
        url: `${process.env.VUE_APP_BACKEND_URL}/fp`,
        process: {
          url: "/process/",
        },
        revert: "/revert/",
        restore: "/restore/",
        load: "/load/",
        fetch: "/fetch/",
      },
    };
  },
  methods: {
    handleFilePondInit: function () {
      console.log("FilePond has initialized");
      // FilePond instance methods are available on `this.$refs.pond`
    },
    
  },
  components: {
    FilePond,
  },
};
</script>
```