How to use Filepond in vue js and to upload files using axios?

Question

I need to use axios to send post request in order to upload files using Filepond Uploader.

How can i do it?

I'm using a custom process handler like below but it's not working.

processHandler: (fieldName, file, metadata, load, error, progress, abort) => {
        let formData = new FormData();
        let uploadPercentage = 0;
        formData.append('file', file);
        console.log(formData);

        HTTP.post('v1/upload', formData,
          {
            headers: {
              'Content-Type': 'multipart/form-data'
            },
            onUploadProgress: function (progressEvent) {
              uploadPercentage = parseInt(Math.round((progressEvent.loaded * 100) / progressEvent.total));
              console.log(uploadPercentage);
            }.bind(this)
          })
          .then((response) => {
            console.log(response);
            // Should call the load method when done and pass the returned server file id
            // the load method accepts either a string (id) or an object
            // the unique server file id is used by revert and restore functions
            load(response.data.data.id);
          })
          .catch((error) => {
            console.error(error);
            error("Has error");
          });

        // Should call the progress method to update the progress to 100% before calling load
        // Setting computable to false switches the loading indicator to infinite mode
        // (computable, processedSize, totalSize)
        progress(true, 0, 1024);

        // Should expose an abort method so the request can be cancelled
        return {
          abort: () => {
            // User tapped abort, cancel our ongoing actions here

            // Let FilePond know the request has been cancelled
            abort();
          }
        };
      }

I'm using this guide but it's not clear for me to understand how can i create upload and load process to handle my server response and request.

Thanks.

Answer 1

FilePond author here.

I'm not entirely sure I understand the problem description but I'm going to try my best to help out. I've taken a quick peek at the Axios docs (https://github.com/axios/axios) and set up the following snippet.

{
    processHandler: (fieldName, file, metadata, load, error, progress, abort) => {

        // set data
        const formData = new FormData();
        formData.append('file', file, file.name);

        // related to aborting the request
        const CancelToken = axios.CancelToken;
        const source = CancelToken.source();

        // the request itself
        axios({
            method: 'post',
            url: 'v1/upload',
            data: formData,
            cancelToken: source.token,
            onUploadProgress: (e) => {
                // updating progress indicator
                progress(e.lengthComputable, e.loaded, e.total);
            }
        }).then(response => {
            // passing the file id to FilePond
            load(response.data.data.id)
        }).catch((thrown) => {
            if (axios.isCancel(thrown)) {
                console.log('Request canceled', thrown.message);
            } else {
                // handle error
            }
        });

        // Setup abort interface
        return {
            abort: () => {
                source.cancel('Operation canceled by the user.');
            }
        };
    };
}