Can't find uploaded files in the server

[msoutopico]

Hi there,

I need some help, hopefully somebody can point me in the right direction.

Summary

I have created a Vue.js test application with filepond, on a local server on Windows using WSL.

I have managed to make it work, with the code that you can see here: https://codesandbox.io/s/vue-filepond-live-demo-ucr0x

namely:

  import vueFilePond, { setOptions } from 'vue-filepond';
  import 'filepond/dist/filepond.min.css'
  import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type'

  const FilePond = vueFilePond(
          FilePondPluginFileValidateType
  );

  setOptions({
    server: 'api/'
  })

  export default {
    name: 'FilePondDemo',
    data: function() {
      return { myFiles: [] }
    },
    components: {
      FilePond
    }
  }

So, it seems I can successfully upload files I drop on the upload area, I get "Upload complete" in a green bar. However, I don't see where the files have been stored in the server so I don't know how to carry on.

I am not a developer, so probably I am missing something obvious or some basic knowledge.

By the way, it doesn't work in development, I need to create a production build. I suppose this is normal.

Environment	Version
OS	Windows 10 / WSL (Ubuntu)
Browser	Firefox 70

[rikschennink]

I'd open the developer tools and inspect the upload request and response to 'api/', it seems the server responds with status code 200 OK. I'd advise to set a breakpoint on the server code to see if the request is received.

[msoutopico]

Thanks, Rik. Yes, it gives me status 200 OK on localhost:5000. I'll try to figure out how to set the breakpoint in vscode to debug a file upload!

Another question. Is my assumption realistic to find the uploaded files in the "api" folder, even though my backend code in node.js isn't ready yet?

[rikschennink]

No, you have to set up something that handles the upload. It's highly likely your local server is simply serving a page + 200 OK at localhost:5000/api and that causes FilePond to think the upload was a success.

[msoutopico]

Great. Then that seems where the problem is. Thank you so much! I'll report back.

[marcoippolito]

Hi!, I'm having the same problem... where is the uploaded file located?

This is the vue file:

<template>
  <div id="component">

    <file-pond
        name="test"
        ref="pond"
        label-idle="Drop files here..."
        allow-multiple="true"
        v-bind:server="myServer"
        v-bind:files="myFiles"
        v-on:init="handleFilePondInit"/>

  </div>
</template>

<script>
// Import Vue FilePond
import vueFilePond from 'vue-filepond';

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

// Import FilePond plugins
// Please note that you need to install these plugins separately
// `npm i filepond-plugin-image-preview filepond-plugin-image-exif-orientation --save`
import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';

// Create component
const FilePond = vueFilePond(
  FilePondPluginImageExifOrientation,
  FilePondPluginImagePreview
);

export default {
    name: 'app',
    data: function() {
        return {
          // fake server to simulate loading a 'local' server file and processing a file
          myServer: {
            process: (fieldName, file, metadata, load) => {
              // simulates uploading a file
              setTimeout(() => {
                load(Date.now())
              }, 1500);
            },
            load: (source, load) => {
              // simulates loading a file from the server
              fetch(source).then(res => res.blob()).then(load);
            }
          },
          myFiles: [{
            source: 'photo.jpeg',
            options: {
              type: 'local'
            }
          }]
        };
    },
    methods: {
      handleFilePondInit: function() {

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

        /* eslint-disable */
        console.log('FilePond has initialized');
      }
    },
    components: {
      FilePond
    }
};
</script>

And this the google chrome screenshot

[rikschennink]

@marcoippolito This is a mock upload, see the myServer process method, the file is not being uploaded as long as you don't point this to your server and your server doesn't handle the upload.

[rikschennink]

closed because inactive