file uploaded any time every time I visit the form

I setup a component that correctly uploads files to the backend but it uploads the file any time you visit the form. Clearly I have made some mistake but I can't find where.

My component is roughly:


<template>
  <file-pond
    name="filepond"
    :class-name="fieldName"
    ref="pond"
    label-idle="Drop files here..."
    :allow-multiple="false"
    :files="url"
    :server="serverOptions"
    @processfile="processFile()"
  />
</template>

The script is:

import vueFilePond from 'vue-filepond'
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.esm.js'
import FilePondPluginImagePreview from 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.esm.js'
import 'filepond/dist/filepond.min.css'
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css'

const FilePond = vueFilePond(
  FilePondPluginFileValidateType,
  FilePondPluginImagePreview
)
...
  props: ['file', 'fieldName', 'value'],
  computed: {
    ...
    serverOptions () {
      return {
        url: 'http://127.0.0.1:8000/api/fp/',
        withCredentials: false,
        process: {
          url: './process/',
          headers: {
            'Authorization': `JWT ${this.token}`,
          },
        },
        revert: './revert/',
        restore: './restore/',
        load: './load/',
        fetch: './fetch/',
      }
    },
    url () {
      if (this.file) {
        let parsedUrl = new URL(this.file)
        return [parsedUrl.pathname]
      } else {
        return null
      }
    },
  },
methods: {
   processFile (e, file) {
      console.log(`processFile: file has terminated`, this.getValue())
      this.$emit('input', this.getValue())
    },
}

When you select an image or drop it, the image is loaded to the server and the preview is correctly displayed, when you visit a form that has already an image defined I populate the files attribute with an array with a single filepath, i.e.:I strip the host part and leave the path as in /media/my_image.png. The widget correctly shows the name and "Upload completed" (with green background), but doesn't show the image. My guess is that it can't understand the match between the complete name and the 'url' computed value. Am I wrong? what's the proper way to pass it?

pqina / vue-filepond

file uploaded any time every time I visit the form #68