The uploaded image file does not appear

[Suriyadi]

i'm using vuejs and have initial file, i also use custom server.

  <div>
    <file-pond
      ref="tes"
      :files="files"
      :server="server"
      :allow-image-preview="true"
      :allow-file-poster="false"
      :image-preview-height="170"
      image-crop-aspect-ratio="1:1"
      :image-resize-target-width="200"
      :image-resize-target-height="200"
      style-panel-layout="compact circle"
      style-load-indicator-position="center bottom"
      style-progress-indicator-position="right bottom"
      style-button-remove-item-position="left bottom"
      style-button-process-item-position="right bottom"
    />
  </div>
</template>

export default {
  data() {
    const self = this
    return {
      files: [{
            source: '12345',
            options: {
                type: 'local'
            }
        }],
      server: {
        process(
          fieldName,
          file,
          metadata,
          load,
          error,
          progress,
          abort,
          transfer,
          options
        ) {
          const source = axios.CancelToken.source()
          const formData = new FormData()
          formData.append('file', file, file.name)
          console.log(file)
          self
            .$axios({
              url: 'url',
              method: 'POST',
              data: formData,
              cancelToken: source.token,
              headers: {
                'Content-Type': `multipart/form-data; boundary=${formData._boundary}`
              },
              onUploadProgress(progressEvent) {
                progress(
                  progressEvent.lengthComputable,
                  progressEvent.loaded,
                  progressEvent.total
                )
              }
            })
            .then((response) => {
              load(response.data)
            })
            .catch((thrown) => {
              if (axios.isCancel(thrown)) {
                console.log('Request canceled', thrown.message)
              } else {
                error('oh no')
              }
            })

          return {
            abort() {
              source.cancel('Operation canceled by the user.')
              abort()
            }
          }
        },
        load(source, load, error, progress, abort, headers) {
          console.log('load called')
          const sourceToken = axios.CancelToken.source()
          self
            .$axios({
              url: `url/${source}`,
              method: 'GET',
              cancelToken: sourceToken.token,
              onDownloadProgress(progressEvent) {
                progress(
                  progressEvent.lengthComputable,
                  progressEvent.loaded,
                  progressEvent.total
                )
              }
            })
            .then((response) => {
              const blob = new Blob([response.data], {
                type: response.headers['content-type']
              })
              load(blob)
            })
            .catch((thrown) => {
              if (axios.isCancel(thrown)) {
                console.log('Request canceled', thrown.message)
              } else {
                error('oh no')
              }
            })
          return {
            abort() {
              sourceToken.cancel('Operation canceled by the user.')
              abort()
            }
          }
        },
      }
    }
  }
}
</script>

is there something wrong with my code above? how do you bring up an uploaded image?

[Rik]

See this example implementation: https://codesandbox.io/s/vanilla-filepond-preview-server-file-fo1k1