[Bug] vue-filepond image resize not working.

[Alter808]

Is there an existing issue for this?

• [X] I have searched the existing issues

Have you updated Vue FilePond, FilePond, and all plugins?

• [X] I have updated FilePond and its plugins

Describe the bug

hi, thanks for this wonderful library, i am currently using vue-filepond, trying to use the image resizer plugin to upload images to a server, but i have not managed to get it to work, images keep their original size when uploaded to the server, this is my code, maybe i am doing something wrong.

<template>
  <div>
    <FilePond
      name="test"
      ref="pond"
      required="false"
      allow-multiple="true"
      :max-files="maxFiles"
      class-name="my-pond"
      :label-idle="label"
      :capture-method="null"
      aallowImageTransform="true"
      imageTransformOutputQuality="30"
      imageTransformOutputMimeType="image/png"
      allowImageResize="true"
      imageResizeTargetWidth="150"
      imageResizeTargetHeight="88"
      imageResizeMode="cover"
      accepted-file-types="image/jpeg, image/png"
      v-on:init="handleFilePondInit"
    />
  </div>
</template>
<script>
// Import FilePond
import vueFilePond from 'vue-filepond'

// Import plugins
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.esm.js'
import FilePondPluginImagePreview from 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.esm.js'
import FilePondPluginImageTransform from 'filepond-plugin-image-transform/dist/filepond-plugin-image-transform.esm.js'
import FilePondPluginImageResize from 'filepond-plugin-image-resize/dist/filepond-plugin-image-resize.esm.js'

// Import styles
import 'filepond/dist/filepond.min.css'
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css'

// Create FilePond component
const FilePond = vueFilePond(
  FilePondPluginFileValidateType,
  FilePondPluginImagePreview,
  FilePondPluginImageTransform,
  FilePondPluginImageResize
)

export default {
  props: {
    maxFiles: { type: Number, default: 1 },
    label: { type: String, required: true },
  },

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

      // example of instance method call on pond reference
      this.$refs.pond.getFiles()
    },
    getPondFiles() {
      return this.$refs.pond.getFiles()
    },
    addFiles(blob) {
     //parent component sends blob as argument
      this.$refs.pond.addFile(blob)
    },
  },
  components: {
    FilePond,
  },
}
</script>

Reproduction

the only thing that doesn't work is the image resize plugin

Environment

- Device:
- OS: Win10
- Broser: Chrome
- Vue version: 3.0.0

[Alter808]

I forgot to say, I use the getPondFiles() method to get the returned files then upload then with other data to my firebase server, maybe the issue is there for me. Is there a way to execute the getFiles method and recieve back the resized images?

[rikschennink]

Hi Please post questions on stack overflow.

[SimonOrdo6]

@Alter808 Did you ever get this sorted? I'm running into the same issue and couldn't find any questions posted on SO.