vue.js - Where is the images uploaded with Filepond in Nuxt?

Question

Im trying to upload an image with vue-filepond in nuxt i setup filepond like this in my contact-form.vue :

 <file-pond
        name="file"
        ref="pond"
        class-name="my-pond"
        label-idle="Drop files here..."
        allow-multiple="true"
        instantUpload="true"
        chunkUploads="true"
        chunkSize= 2500
        accepted-file-types="image/jpeg, image/png"
        server="http://localhost/upload"
        v-bind:files="files"
        v-on:init="handleFilePondInit"/>

in the method :

 handleFilePondInit: function() {
            console.log('FilePond has initialized');

            // FilePond instance methods are available on `this.$refs.pond`
        },

Filepond is saying upload complete but i got no image in the upload folder i create in my Nuxt folder ... do i need to couple Filepond with Axios ? if someone know the best way i could do this ?

Thank you

question from:https://stackoverflow.com/questions/65831102/where-is-the-images-uploaded-with-filepond-in-nuxt

Answer 1

You cannot upload it locally aka http://localhost/upload, since there is not server waiting for an upload at this endpoint. You need a service for this one and cannot just upload a file like this (to my knowledge). And even if it somehow works, you could not have it working on production since people will not have a localhost when visiting your website.

Looking on the Vue framework documentation page, you need to pass a server prop. Then, you can pretty much configure it to your need or post it yourself when you have the files themselves thanks to this.$refs.pond.getFiles().

The API Server documentation is giving some example of configuration:

FilePond.setOptions({
  server: {
    url: 'http://192.168.0.100',
    timeout: 7000,
    process: {
      url: './process',
      method: 'POST',
      headers: {
        'x-customheader': 'Hello World'
      },
      withCredentials: false,
      onload: (response) => response.key,
      onerror: (response) => response.data,
      ondata: (formData) => {
        formData.append('Hello', 'World');
        return formData;
      }
    },
    revert: './revert',
    restore: './restore/',
    load: './load/',
      fetch: './fetch/'
  }
})

It's not directly Vue but you can pretty much map it one to one in the same way by using the server prop.

Sorry if I cannot help more but it all depends on how you plan to do it and where you plan to upload it (if it's AWS S3 or something else).
You can check this configuration to get some inspiration for your server prop.