Issue with Integrating FilePond Library with Vue.js / Problème d'intégration de la bibliothèque FilePond avec Vue.js

[leknoppix]

ENGLISH

Hello everyone,

I am currently using the FilePond library to manage media uploads (images, videos, documents) in my Vue.js project.

When my component loads, I successfully retrieve the value as a string "this.json," which I manage to parse into JSON and store in the variable "this.jsonfile." However, despite the successful component load, the template does not seem to consider this value.

Here is an excerpt from my code:

<template>
    <div>
        <form
            id="app"
            v-on:submit.prevent="sendForm"
        >
            <file-pond
                name="test"
                ref="pond"
                :maxFiles="maxFiles"
                :label-idle="submittext"
                :accepted-file-types="acceptedfiletypes"
                v-bind:allow-multiple="allowmultiple"
                v-on:processfile="handleProcessFile"
                v-on:init="handleFilePondInit"
            />
        </form>
        <div v-if="this.visible" class="row">
            <div class="col-md-12">
                <draggable :list="this.jsonfile" ghost-class="ghost" class="list-group" @end="onEnd">
                    <transition-group type="transition" class="list-group-item" name="flip-list">
                        <div class="row pl-3 pt-3 pb-3 pr-3 multiplepicture sortable" v-for="(json, id) in this.jsonfile" :key="id">
                        <div class="col-md-2 vcenter">
                            <img :src="json.url" />
                            <input type="hidden" :name="`linked_imgs[${id}][id]`" :value="json.id" />
                        </div>
                        <div class="col-md-9 vcenter">
                            <div class="row form-group">
                            <div class="col-md-12">
                                <label for="title">Titre de l'image</label>
                            </div>
                            <div class="col-md-12">
                                <input class="form-control form-control-label" autofocus id="inputTitle" placeholder="Indiquez le titre de l'image" :name="`linked_imgs[${id}][title]`" type="text" :value="json.name" />
                            </div>
                            </div>
                            <div class="row form-group">
                            <div class="col-md-12">
                                <label for="legend">Légende de l'image</label>
                            </div>
                            <div class="col-md-12">
                                <input class="form-control form-control-label" autofocus id="inputLegend" placeholder="Indiquez la légende de l'image" :name="`linked_imgs[${id}][legend]`" type="text" :value="json.legend" />
                            </div>
                            </div>
                            <div class="row form-group">
                            <div class="col-md-12">
                                <input :name="`linked_imgs[${id}][position]`" type="hidden" :value="json.position" />
                            </div>
                            </div>
                        </div>
                        <div class="col-md-1 vcenter">
                            <a class="delete is-medium is-danger" :data-key="json.id" v-on:click="removeElement(json.id)">X</a>
                        </div>
                        </div>
                    </transition-group> 
                </draggable>
            </div>
        </div>
    </div>
</template>

<script>
import {defineAsyncComponent, ref} from "vue";
import _ from "lodash";
//import draggable from "vuedraggable";
import vueFilePond, { setOptions } from "vue-filepond";
import "filepond/dist/filepond.min.css";
import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css";
import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type";
import FilePondPluginImagePreview from "filepond-plugin-image-preview";
import axios from "axios";

const FilePond = vueFilePond(FilePondPluginFileValidateType, FilePondPluginImagePreview);

const gallery = ref([]);

export default {
    components: {
        FilePond,
        draggable: defineAsyncComponent(() => import("vuedraggable")),
    },
    data() {
        return {
            visible: false,
            jsonfile: [],
            numfile: 0,
            position: 0,
        }
    },
    props: {
        maxFiles: {
            type: Number
        },
        url: {
            type: String,
            required: true
        },
        submittext: {
            type: String,
            required: true
        },
        acceptedfiletypes: {
            type: String,
            required: false
        },
        allowmultiple: {
            type: Boolean,
            required: false
        },
        json: {
            type: String
        }
    },
    mounted() {
        this.handleFilePondInit();
        this.JsonFileInit();
    },
    methods: {
        /**
         * Initializes the JsonFileInit object.
         *
         * @param {type} paramName - description of parameter
         * @return {type} description of return value
         */
        JsonFileInit: function() {
            if(this.json != undefined) {
                this.visible = true;
            }
            this.jsonfile = JSON.parse(this.json);
        },

        /**
         * Initializes FilePond and sets the server options.
         *
         * @param {type} paramName - description of parameter
         * @return {type} description of return value
         */
        handleFilePondInit: function() {
            setOptions({
                server: {
                    url: '/filepond',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    }
                },
            });
        },

        /**
         * A callback function that handles the file processing.
         *
         * @param {Error} error - The error object, if any.
         * @param {File} file - The file object that was processed.
         * @return {void}
         */
        handleProcessFile: function(error, file) {
            if(error){
                console.log(error);
            }
            else{
                gallery.value.push(file.serverId);
                this.visible = true;
                // Dynamiser le HTML
                this.sendForm();
            }
        },

        /**
         * Sends the form data to the server using an HTTP POST request.
         *
         * @return {Promise} A promise that resolves with the server response.
         */
        sendForm: async function() {
            await axios.post(this.url, {
                gallery: gallery.value,
            })
                .then((res) => {
                    console.log(res.data);
                    console.log(this.jsonfile);
                    this.jsonfile.push(res.data);
                    console.log(this.jsonfile.value);
                })
                .catch((err) => {
                    console.log(err)
                });
        },

        /**
         * Updates the position of each element in the jsonfile array based on their order after an item is moved.
         *
         * @param {Object} evt - The event object containing information about the item that was moved.
         */
        onEnd: function(evt) {
            this.oldIndex = evt.oldIndex;
            this.newIndex = evt.newIndex;
            let position = 1;
            this.jsonfile.forEach(element => {
                element.position = position;
                position = position + 1
            });
        },
    }
}
</script>


<style>
.filepond--drop-label {
    color: grey;
    outline: 2px dashed grey;
    outline-offset: -10px;
    font-size: 1.2rem;
    height: 120px;
    cursor: pointer;
}
.filepond--drop-label:hover{
    background-color: lightblue;
}
.filepond--label-action {
    text-decoration-color: lightcyan;
    font-size: 1.2rem;
    cursor: pointer;
}
.filepond--panel-root {
    background-color: lightcyan;
    cursor: pointer;
}
</style>

I am currently stuck at this stage, and I can't seem to understand why the template is not taking "this.jsonfile" into account. Any help or suggestions would be greatly appreciated.

You have the option to test it, if you wish, by using this link: https://stackblitz.com/edit/vitejs-vite-h2954j?file=index.html.

Thanks

###FRENCH

Bonjour à tous,

Je fais actuellement usage de la bibliothèque FilePond pour la gestion des téléchargements de médias (images, vidéos, documents) dans mon projet Vue.js.

Lorsque mon composant se charge, je récupère avec succès la valeur sous forme de chaîne de caractères "this.json", que je parviens à parser en JSON et à stocker dans la variable "this.jsonfile". Cependant, malgré le chargement réussi du composant, le template ne semble pas tenir compte de cette valeur.

Voir le code précédent!

Je suis actuellement bloqué à ce stade et je ne parviens pas à comprendre pourquoi le template ne prend pas en compte "this.jsonfile". Toute aide ou suggestion serait grandement appréciée.

Vous avez la possibilité de tester, si vous le souhaitez, en utilisant ce lien :
https://stackblitz.com/edit/vitejs-vite-h2954j?file=index.html

Merci d'avance

[leknoppix]

Hello all
I found some of my mistakes, I must not be too far from what I want! I still need the file limit system, type verification, and a couple of other things. If you want to help me or improve the code, please don't hesitate.

Bonjour à tous

J'ai trouvé quelques-unes de mes erreurs, je ne dois pas être trop loin de ce que je veux ! Il me manque le système de limitation du nombre de fichiers, la vérification du type et deux ou trois autres choses. Si vous souhaitez me donner de l'aide ou améliorer le code, n'hésitez pas.

<template>
    <div>
        <form
            id="app"
            v-on:submit.prevent="sendForm"
        >
            <file-pond
                name="test"
                ref="filePondComponent"
                :maxFiles="maxFiles"
                :label-idle="submittext"
                :accepted-file-types="acceptedfiletypes"
                v-bind:allow-multiple="allowmultiple"
                v-on:processfile="handleProcessFile"
                v-on:init="handleFilePondInit"
            />
        </form>
        <div v-if="visible" class="row">
            <div class="col-md-12">
                <VueDraggableNext v-model="jsonfile" ghost-class="ghost" class="list-group" @end="onEnd">
                    <transition-group type="transition" class="list-group-item" name="flip-list">
                        <div class="row pl-3 pt-3 pb-3 pr-3 multiplepicture sortable" v-for="(json, id) in jsonfile" :key="id">
                        <div class="col-md-2 vcenter">
                            <img :src="json.url" />
                            <input type="hidden" :name="`linked_imgs[${id}][id]`" :value="json.id" />
                        </div>
                        <div class="col-md-9 vcenter">
                            <div class="row form-group">
                            <div class="col-md-12">
                                <label for="title">Titre de l'image</label>
                            </div>
                            <div class="col-md-12">
                                <input class="form-control form-control-label" autofocus id="inputTitle" placeholder="Indiquez le titre de l'image" :name="`linked_imgs[${id}][title]`" type="text" :value="json.name" />
                            </div>
                            </div>
                            <div class="row form-group">
                            <div class="col-md-12">
                                <label for="legend">Légende de l'image</label>
                            </div>
                            <div class="col-md-12">
                                <input class="form-control form-control-label" autofocus id="inputLegend" placeholder="Indiquez la légende de l'image" :name="`linked_imgs[${id}][legend]`" type="text" :value="json.legend" />
                            </div>
                            </div>
                            <div class="row form-group">
                            <div class="col-md-12">
                                <input :name="`linked_imgs[${id}][position]`" type="hidden" :value="json.position" />
                            </div>
                            </div>
                        </div>
                        <div class="col-md-1 vcenter">
                            <a class="delete is-medium is-danger" :data-key="json.id" v-on:click="removeElement(json.id)">X</a>
                        </div>
                        </div>
                    </transition-group> 
                </VueDraggableNext>
            </div>
        </div>
    </div>
</template>

<script>
import {defineAsyncComponent, ref} from "vue";
import _ from "lodash";
import { VueDraggableNext } from 'vuedraggable';
import vueFilePond, { setOptions } from "vue-filepond";
import "filepond/dist/filepond.min.css";
import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css";
import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type";
import FilePondPluginImagePreview from "filepond-plugin-image-preview";
import axios from "axios";

const FilePond = vueFilePond(FilePondPluginFileValidateType, FilePondPluginImagePreview);

export default {
    components: {
        FilePond,
        VueDraggableNext
    },
    data() {
        return {
            gallery: [],
            visible: false,
            jsonfile: [],
            numfile: 0,
            position: 0,
        }
    },
    props: {
        maxFiles: {
            type: Number
        },
        url: {
            type: String,
            required: true
        },
        submittext: {
            type: String,
            required: true
        },
        acceptedfiletypes: {
            type: String,
            required: false
        },
        allowmultiple: {
            type: Boolean,
            required: false
        },
        json: {
            type: String
        }
    },
    mounted() {
        this.handleFilePondInit();
        this.JsonFileInit();
    },
    methods: {

        JsonFileInit: function() {
          if(this.json !== undefined) {
            this.visible = true;
            if (typeof this.json === "string") {
              try {
                this.jsonfile = JSON.parse(this.json);
              } catch(error) {
                console.error("Erreur lors de la conversion de 'this.json' en tableau : ", error);
              }
            } else {
              console.log("`this.json` n'est pas une chaîne. Valeur reçue : ", this.json);
            }
          }
        },

        /**
         * Initializes FilePond and sets the server options.
         *
         * @param {type} paramName - description of parameter
         * @return {type} description of return value
         */
        handleFilePondInit: function() {
            setOptions({
                server: {
                    url: '/filepond',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    }
                },
            });
        },

        /**
         * A callback function that handles the file processing.
         *
         * @param {Error} error - The error object, if any.
         * @param {File} file - The file object that was processed.
         * @return {void}
         */
        handleProcessFile: function(error, file) {
            if(error){
                console.log(error);
            }
            else{
                this.gallery.push(file.serverId);
                this.visible = true;
                // Dynamiser le HTML
                this.sendForm();
                //this.$refs.filePondComponent.$el.style.display = 'none';
            }
        },

        /**
         * Sends the form data to the server using an HTTP POST request.
         *
         * @return {Promise} A promise that resolves with the server response.
         */
        sendForm: async function() {
            await axios.post(this.url, {
                gallery: this.gallery,
            })
                .then((res) => {
                    console.log(res.data);
                    console.log(this.jsonfile);
                    this.jsonfile.push(res.data);
                    console.log(this.jsonfile.value);
                })
                .catch((err) => {
                    console.log(err)
                });
        },

        /**
         * Updates the position of each element in the jsonfile array based on their order after an item is moved.
         *
         * @param {Object} evt - The event object containing information about the item that was moved.
         */
        onEnd: function(evt) {
            this.oldIndex = evt.oldIndex;
            this.newIndex = evt.newIndex;
            let position = 1;
            this.jsonfile.forEach(element => {
                element.position = position;
                position = position + 1
            });
        },
        async removeElement(idp){

        }
    }
}
</script>


<style>
.filepond--drop-label {
    color: grey;
    outline: 2px dashed grey;
    outline-offset: -10px;
    font-size: 1.2rem;
    height: 120px;
    cursor: pointer;
}
.filepond--drop-label:hover{
    background-color: lightblue;
}
.filepond--label-action {
    text-decoration-color: lightcyan;
    font-size: 1.2rem;
    cursor: pointer;
}
.filepond--panel-root {
    background-color: lightcyan;
    cursor: pointer;
}
</style>