Currently, I am integrating filepond with VueJS to facilitate image uploads. To enable image cropping during upload, a specific configuration is required.
The filepond plugin has been globally registered, as shown below:
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);
Following the registration, the component is utilized in the code snippet below:
<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"
/>
The process method used for handling file processing is included as well:
process(fieldName, file, metadata, load) {
load(file);
},
handleFilePondInit() {
this.$refs.pond.getFiles();
},
Despite implementing the necessary configurations, the image cropping functionality seems non-responsive. The documentation hints at using just allowImageCrop, but its application doesn't yield desired results. For more details, refer to this documentation link: