JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<link rel="stylesheet" href="https://unpkg.com/bootstrap@5/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/filepond@4/dist/filepond.min.css">
<script src="https://unpkg.com/filepond@4/dist/filepond.min.js"></script>
<script src="https://unpkg.com/filepond-plugin-file-validate-type@1/dist/filepond-plugin-file-validate-type.min.js"></script>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app" class="p-5">
    <input ref="tracks" type="file" class="filepond" accept="audio/mpeg" multiple>
    <button ref="upload" type="button" @click.prevent="upload" class="btn btn-lg btn-primary d-block w-100" :disabled="!ready">Upload</button>
</div>

JavaScript

FilePond.setOptions({
    // allowDrop: true,
    // allowBrowse: true,
    // allowReplace: true,
    allowProcess: false,
    instantUpload: false,
    credits: false,
    server: {
        // url: 'http://192.168.33.10',
        process: '/echo/json/process.php',
        revert: '/echo/json/revert.php',
        restore: '/echo/json/restore.php?id=',
        fetch: '/echo/json/fetch.php?data=',
    },
});

FilePond.registerPlugin(FilePondPluginFileValidateType);

Vue.createApp({
    data() {
        return {
        	pond: null,
            tracks: null,
            ready: false,
        }
    },
    mounted() {
    	this.tracks = this.$refs.tracks;        
        this.pond = FilePond.create(this.tracks);
        
        let tracks = this.tracks;
        
        document.addEventListener('FilePond:initfile', (e) => this.updateReadyState());        
        document.addEventListener('FilePond:removefile', (e) => this.updateReadyState());
    },
    methods: {
    	upload() {            
            this.ready = false;
            
            this.pond.processFiles().then((files) => {
                console.log(files);
            });
        },
        updateReadyState(event) {
        	this.ready = this.pond.getFiles().length;
        }
    }
}).mount('#app');