Ufdjrw

I am trying to implement the plugins for the Filepond library for React.js using Firebase on the backend. The documentation is thin in regards to implementing the cropping plugin. All I want to do is force a 1:1 crop ratio on every image added as a profile picture, but with the current code, it is hanging at Waiting for size - Loading...

Mentioned in the docs here there is a hint at using transform plugin in conjunction to get the crop functionality, but not sure how to use the create() function to get this.

Is there any examples of implementing the crop to work as I intend? Or can someone show me how they got it to work? Thanks!

Code:

import React, useState, Component from "react";

// Filepond / Upload
import * as upload from "../../utils/upload";
import FilePond, registerPlugin from "react-filepond";
import "filepond/dist/filepond.min.css";
import FilePondPluginImagePreview from "filepond-plugin-image-preview";
import FilePondPluginImageResize from "filepond-plugin-image-resize";
import FilePondPluginImageValidateSize from "filepond-plugin-image-validate-size";
import FilePondPluginFileValidateSize from "filepond-plugin-file-validate-size";
import "filepond/dist/filepond.min.css";
import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css";
import FilePondPluginImageTransform from "filepond-plugin-image-transform";
import FilePondPluginImageEdit from "filepond-plugin-image-edit";
registerPlugin(
 FilePondPluginImageResize,
 FilePondPluginImagePreview,
 FilePondPluginImageValidateSize,
 FilePondPluginFileValidateSize,
 FilePondPluginImageTransform,
 FilePondPluginImageEdit
);

export class Personal extends Component 
 constructor(props) 
 super(props);
 this.handleChange = this.handleChange.bind(this);
 this.updateProfPicUrl = this.updateProfPicUrl.bind(this);

 this.user = this.props.user;
 this.files = [];
 this.pathToUrl = ;
 this.basePath = `/users/$this.props.user.id/images/profPic`;
 this.process = upload.process(
 this.basePath,
 this.pond,
 this.pathToUrl,
 this.files
 );
 this.revert = upload.revert(this.pathToUrl, this.files);
 


 updateProfPicUrl() 
 if (this.files > 0) 
 this.props.updateProfPicUrl(this.files, this.pathToUrl);
 this.props.handleCloseModal();
 else 
 alert("Please choose a file from your computer to upload first!");
 
 this.files = [];
 this.pathToUrl = ;
 

 handleChange(e) 
 this.setState( [e.target.name]: e.target.value );
 

 render() 
 return (
 <div>
 <FilePond
 ref=ref => (this.pond = ref)
 files=this.files
 allowMultiple=false
 imageEditInstantEdit=true
 imageCropAspectRatio=1
 onupdatefiles=fileItems => 
 // Set current file objects to this.state
 this.files = fileItems.map(function(fileItem) 
 let file = fileItem;
 file.uuid = uuid().toString();
 return file;
 );
 
 server=
 process: this.process,
 revert: this.revert
 
 />
 <button
 onClick=() => 
 this.props.updateProfPicUrl(
 this.files,
 this.pathToUrl
 );
 
 className="s-btn"
 >
 Update
 </button>

 </div>
 );
 

Was finally able to revisit this, and I was able to easily do it. I did not need all the plugins, but just needed the ImageTransform and ImageCrop plugins. I just passed the properties:

allowImageCrop=true
allowImageTransform=true
imageCropAspectRatio='1:1'

to my <FilePond /> component. And imported:

import FilePond, registerPlugin from "react-filepond";
import "filepond/dist/filepond.min.css";
import FilePondPluginImagePreview from "filepond-plugin-image-preview";
import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css";
import FilePondPluginImageCrop from 'filepond-plugin-image-crop'; // Crops image
import FilePondPluginImageTransform from 'filepond-plugin-image-transform'; // Changes image to match crop
registerPlugin(FilePondPluginImagePreview, FilePondPluginImageCrop, FilePondPluginImageTransform);