0

I'm using filepond with VueJS for uploading images. I should crop images on upload if I want.

I registered filepond plugin globally.

import Vue from 'vue';
import vueFilePond from 'vue-filepond';
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import FilePondPluginImageCrop from 'filepond-plugin-image-crop';

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

const FilePond = vueFilePond(FilePondPluginFileValidateType, FilePondPluginImagePreview, FilePondPluginImageCrop);
Vue.component('filePond', FilePond);

Then I'm using component

<file-pond
  name="image"
  ref="pond"
  :label-idle="$t('complaint_detail.label-idle')"
  :allow-multiple="false"
  accepted-file-types="image/*"
  :server="{ process }"
  :allow-image-preview="true"
  :allow-image-crop= "true"
  :allow-revert = "false"
  v-on:init="handleFilePondInit"
  v-on:addfile="handleFilePondAddFile"
/>

And here is my process method

process(fieldName, file, metadata, load) {
  load(file);
},
handleFilePondInit() {
  this.$refs.pond.getFiles();
},

But with this codes image cropping doesn't work. In documentation there is only allowImageCrop additionally but it doesn't work for me. Here is the link for documentation: https://pqina.nl/filepond/docs/patterns/plugins/image-crop/

arif
  • 441
  • 1
  • 6
  • 13

1 Answers1

0

You need to define a crop ratio using the imageCropAspectRatio property.

For square crop:

<file-pond
  image-crop-aspect-ratio="1"
  name="image"
  ref="pond"
/>
Rik
  • 3,328
  • 1
  • 20
  • 23
  • Thank you that's worked but I want to know one more thing. Can I crop image manually without using Doka – arif Feb 18 '19 at 11:17
  • 1
    @arif It's possible but you'd have to integrate the image-edit plugin with a third party image cropper. – Rik Feb 18 '19 at 11:30
  • @Rik Hi. Please look at my question: https://stackoverflow.com/q/58471218/1767712 – meph Oct 20 '19 at 09:49