Cannot set Server Options on VueFilePond

[majortom64]

Is there an existing issue for this?

• [X] I have searched the existing issues

Have you updated Vue FilePond, FilePond, and all plugins?

• [X] I have updated FilePond and its plugins

Describe the bug

Get:

TypeError: undefined is not a function (near '...this.$refs.ctPond.setOptions...')

When trying to set the server options.

Reproduction

A small set that reproduces the problem:

<template>
  <div>
    <div class="shadow sm:rounded-md sm:overflow-hidden">
      <form action="#" method="POST">
        <div class="shadow sm:rounded-md sm:overflow-hidden">
          <div class="bg-white py-6 px-4 space-y-6 sm:p-6">
            <div class="grid grid-cols-6 gap-6">
              <div class="col-span-6">
                <!-- <div class="col-span-3"> -->
                <!-- <div
                  id="ctFilePond1a"
                  ref="ctFilePond1a"
                  class="filepond--root bg-red-300 border-gray-300 border-dashed rounded-md justify-center "
                  @dragover.prevent
                  @drop.prevent
                > -->
                <div class="space-y-1 text-center">
                  <FilePond
                    id="ctFilePond1a"
                    ref="ctPond"
                    name="ctUploads"
                    accepted-file-types="*"
                    label-idle='<div class="bg-blue-400 center mt-14 " ><svg
                        class="mx-auto h-12 w-12 text-gray-400"
                        stroke="currentColor"
                        fill="none"
                        viewBox="0 0 48 48"
                        aria-hidden="true"
                      >
                        <path
                          d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
                          stroke-width="2"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                        />
                      </svg>
                      <span>Upload a file </span>
                      <p class="text-xs text-gray-500 pt-3">
                        PNG, JPG, GIF up to 15MB
                      </p></div>'
                    allow-multiple="true"
                    instant-upload="false"
                    :files="ctFiles"
                    @init="handleFilePondInit"
                  />
                </div>
                <!-- </div> -->
              </div>
            </div>
          </div>
          <div class="mt-7 px-4 py-3 bg-gray-50 text-right sm:px-6">
            <button
              type="submit"
              class="bg-indigo-600 border border-transparent rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
            >
              Save
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import { useStore } from 'vuex'
import { computed, ref } from 'vue'

import vueFilePond from 'vue-filepond'
import 'filepond/dist/filepond.min.css'

import FilePondPluginImagePreview from 'filepond-plugin-image-preview'
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css'
//const myFilePond = filePond(FilePondPluginImagePreview)
const FilePond = vueFilePond(FilePondPluginImagePreview)

export default {
  name: 'DocMin',
  components: {
    FilePond
  },
  setup() {
    const store = useStore()
    const email = computed(() => store.getters['user/email'])

    return {
      //   navigation,
      email
    }
  },

  data: () => ({
    isSending: false
  }),
  methods: {
    startUpload: function() {
      console.log('upload begins')
    },
    handleFilePondInit: function() {
      console.log('FilePond has initialized')
      this.$refs.ctPond.setOptions({
        server: {
          url: 'http://192.168.0.100',
          timeout: 7000,
          process: null,
          load: './load/',
          fetch: './fetch/'
        }
      })
    }
  }
}
</script>

<style scoped lang="postcss">
:deep(.filepond--panel-root) {
  @apply m-1 pt-14 pb-8 bg-white rounded-md justify-center;
}
:deep(.filepond--root) {
  @apply p-24 border-2 bg-red-400 border-gray-300 border-dashed rounded-md justify-center;
}
/* the background color of the file and file panel (used when dropping an image) */
.filepond--item-panel {
  @apply bg-green-500 rounded-md;
}
</style>

Environment

- Device: 2018 Mac mini 
- OS: macOS 12.1
- Broser: Firefox 95.0.5 Safari 15.02
- Vue version: 3.2.6

[rikschennink]

This is an implementation problem not a bug, please post these questions on Stack Overflow.

[soylomass]

Closing this without telling how to set server options doesn't help anyone. I'm also trying to do this to add custom headers.

For anyone who's looking for this, this is how you do it:

  import { setOptions } from "vue-filepond";

  const pond = ref(null as any);

  function handleFilePondInit() {
    setOptions({
      name: "file",
      server: {
        url: ...`,
        headers: {
          ...
        },
      },
    });
  }

...

  <FilePond
    ref="pond"
    :files="files"
    allow-multiple
    @init="handleFilePondInit"
  />