How to send images with Vue filepond via axios?

[Osman-Rafi]

while trying to upload image buy vue filepond, i found the process little confusing. The files props not saving the file after upload an image. Here is some code work:

<file-pond
    name="logo"
    allow-multiple="false"
    max-files="1"
    accepted-file-types="image/jpeg, image/png"
    v-bind:files="images"
    :label-idle="label"
    v-on:processfile="onload"
    :server="server"
  />

<script>
export default{
data() {
    return {
      images: [],
      server: {
        process: () => {
          console.log(this.myFiles);
        },
      },
    };
  },
}
</script>

I found the images array empty after upload an image. I need to send the image to server via axios. Can you help me ? Thanks in advance !

[rikschennink]

This issue tracker is intended to collect bug reports and feature requests.

For help with integrating FilePond, information on how features work, or questions about specific features of FilePond, please use Stack Overflow. Any issues open for help requests will be closed to keep from clogging up the issue tracker.

[positivedeveloper36]

@rikschennink Maybe you can help this problem : https://stackoverflow.com/questions/73671336/why-label-of-file-size-on-filepond-show-1kb-every-file-when-displaying-edit-form

[scil]

to use jquery or axios

    filepondProcess(fieldName, file, metadata, pond_load, pond_error, pond_progress, pond_abort) {

      const formData = new FormData();
      formData.append('path', this.$C.ArticleCoverDefaultDir);
      formData.append('files', file, file.name);
      // formData.append("__RequestVerificationToken",$("input[name='__RequestVerificationToken']").val());

      var xhr, controller, me = this, promise;

      if (window.jQuery) {

        promise = $.ajax(
            {
              url: this.uploadUrl,
              method: 'POST',
              data: formData,
              cache: false,
              // processData: false,
              // contentType: false,
              xhr: function () {
                xhr = $.ajaxSettings.xhr();
                if (xhr.upload) {
                  xhr.upload.onprogress = function (e) {
                    pond_progress(e.lengthComputable, e.loaded, e.total);
                  };
                }
                return xhr;
              },
            })
      } else if (this.axios) {
        controller = new AbortController();

        promise = this.axios
            .post(this.uploadUrl, formData, {
              headers: {'Content-Type': 'multipart/form-data'},
              signal: controller.signal,
              onUploadProgress: function (progressEvent) {
                // var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
                var e = progressEvent;
                pond_progress(e.lengthComputable, e.loaded, e.total);
              }
            })
            .then(function ({data}) {
              return data;
            })

      } else {
        console.error('[file-uploader] no Tool.ajax or axios for progress')
      }

      promise
          .then(function (data) {

            // write your own code to get file and filepath

            var file = data.files[0];

            if (file['error']) {
              // "Cannot create file 'ArticleCovers/0001.jpg' because it already exists."
              pond_error('error uploading:' + file['error']);
              console.error(data);
            } else if (file['mediaPath']) { 
              // the pond_load method accepts either a string (id) or an object
              // here use path with filename as uniqueFileId
              pond_load(file['mediaPath']);
            } else {
              pond_error('err uploading');
              console.error(data);
            }
          })
          .catch(function (reason) {
            pond_error('err uploading');
            console.error(reason);
          });

      //expose an abort method so the request can be cancelled
      return {
        abort: function () {
          // This function is entered if the user has tapped the cancel button
          this.axios ? controller.abort() : xhr.abort();
          // Let FilePond know the request has been cancelled
          pond_abort();
        }
      };