Files not previewed on load

Question

I've got a simple Vue-Filepond template:

    <template>
      <div>
        <form class="form-inline">
          <file-pond
            ref="pond"
            name="image[data]"
            allow-multiple=false
            class="less-width"
            max-files="1"
            :accepted-file-types="mimes"
            :label-idle="labelIdle"
            :server="server"
            :files.sync="files"
            @init="init" />
        </form>
      </div>
    </template>

It's a child component so I push to an array on @init.

    methods: {
      init: function() {
        this.attachment_type = this.file.attachment_type
        this.files.push(this.file)

        this.axiosInstance = axios.create({
          baseURL: `/api/${this.id}/images`
        })
      },
      load: function (source, load, error, progress, abort, headers) {
        this.axiosInstance.get(`/${source.id}`, {
          onDownloadProgress: (e) => {
            progress(e.lengthComputable, e.loaded, e.total)
          },
        })
        .then(response => {
          progress(true, 0, 1024) // signal 100%
          load(response.data.image)
        })
        .catch(error => {
          console.log(error)
        })
      }

This all loads fine with no errors, but nothing gets previewed:

The data is there:

What do I need to do to ensure the image is previewed on load?

Answer 1

The server.load load callback expects a file object / blob.

For example:

server.load = (fileSrc, load) => {
    fetch(fileSrc)
        .then(res.blob())
        .then(load)
}