vue-filepond: Upload button not showing

I just follow this under example.

<template>
  <div id="app">
    
    <FilePond
        name="test"
        ref="pond"
        labelIdle="Drop files here..."
        allowMultiple="true"
        acceptedFileTypes="image/jpeg, image/png"
        v-bind:files="myFiles"
        v-on:init="handleFilePondInit"/>
    
  </div>
</template>

<script>
// Import Vue FilePond
import FilePond, { registerPlugin } from 'vue-filepond';

// Import FilePond styles
import 'filepond/dist/filepond.min.css';

// Register file type validation plugin
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
registerPlugin(FilePondPluginFileValidateType);

export default {
    name: 'app',
    data: function() {
        return { myFiles: ['index.html'] };
    },
    methods: {
        handleFilePondInit: function() {
            console.log('FilePond has initialized');
            
            // FilePond instance methods are available on `this.$refs.pond`
        }
    },
    components: {
        FilePond
    }
};
</script>

https://codepen.io/rikschennink/pen/WXavEx

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 15

Most upvoted comments

@chtsngn To achieve that you can set instantUpload to false.

+11

rikschennink on Oct 16, 2018

Hi @rosnaib11, the upload button will not show if there’s no process endpoint specified. You can do so using the ~server~ :server option. https://pqina.nl/filepond/docs/patterns/api/server/

I’ll update the example to make this more obvious.

rikschennink on Apr 11, 2018

@rikschennink Just found out, sorry for asking first. If anyone else is here accidentally looking for react info, use useRef on the <FilePond> component and you can grab the processFiles off that.

const ref = useRef();

const handleUpload = () => { ref.current.processFiles(); }

return <FilePond ref={ref} … />

McGern on Aug 2, 2023

@chtsngn You need to define the server attribute. Either by setting a url or by supplying a server configuration object.

<template>
  <div id="app">

    <file-pond :server="myServer"/>

  </div>
</template>

<script>
// Import Vue FilePond and FilePond styles
import vueFilePond from 'vue-filepond';
import 'filepond/dist/filepond.min.css';

// Create component
const FilePond = vueFilePond();

export default {
    name: 'app',
    data: function() {
        return {
            myServer: {
                url: 'url-to-your-api'
            }
        };
    },
    components: {
        FilePond
    }
};
</script>

rikschennink on Oct 16, 2018

Thanks, it should be :server on vue js it works

bsor-dev on Apr 11, 2018