Uploading Files using reactjs with Filepond and Php Backend

Question

After doing some research on file uploads in reactjs, I have come across Filepond which seems to be a great solution and can actually handle all I need when it comes to file uploading in my application using Yii2( php) framework.

I have installed FillPond and follow the basic tutorials shown https://itnext.io/uploading-files-with-react-and-filepond-f8a798308557 and it works great for me.

I can actually upload files from here into my Yii2 framework and save them successfully.

Now, I want to be able to upload and submit the files in a form alongside other form data. I do not know whether this is possible ?? if yes, please how do I do this ??

I have also seen the option of cropping and resizing which I am very interested in using them . How do I use this plugins as I can't see how to install or integrate them . ( I have successfully installed the preview ).

Note: I have read the whole https://pqina.nl/filepond/docs/patterns/api/filepond-instance and I see properties like instantUpload , functions like processFile. but when I try to integret them, they don't just turn out well nor work like what I want

Here is my render Code

 render() {
    const {user} = this.props;
    return (
        <Container fluid className="music-background card">
            <Row >
                <Col md="10">
                    <br/>
                    <form onSubmit={this.handleSubmit} >
                        <Row >
                            <Col md="12">
                                <Input label="New Username"  name="username" value={info.username} onChange={this.handleChange} icon="user" group type="text" validate error="wrong" success="right"/>
                                {submitted && !info.username &&
                                    <div className="help-block">New Username is required</div>
                                }
                            </Col>
                            <Col md="12" className="music-text-center text-center">
                              <FilePond 
                                        required={true} 
                                        name={'upfile'+user.username} 
                                        instantUpload={this.state.sumitted} 
                                        allowMultiple={false} 
                                        processFile={this.state.sumitted} 
                                        //server={apiConstants.API_GENERAL_URL+'changeprofilepic?access-token='+user.auth_key}

                               />
                            </Col>
                            <Col md="12">
                                <div className="text-center">
                                    <Button type="submit" onClick={this.handleSubmit} className=" btn-primary pull-right">Submit</Button>
                                </div>
                            </Col>
                        </Row>
                    </form> 
                </Col>
            </Row>
        </Container>
    ); 
}

My submit function

handleSubmit(event) {
    event.preventDefault();
    this.setState({
        sumitted:true
    });
    const { dispatch } = this.props;
    //expecting to process files here
    dispatch(userActions.username(info))
}

My Yii2 API looks like this

public function actionUsename(){
    $post = \yii::$app->request->post();
    $user = \Yii::$app->user->identity;
    $uploads = UploadedFile::getInstancesByName("upfile".$user->username);
    if($uploads and isset($post['username'])){

        $path = 'profile_pictures'. '/';
        $savedfiles = [];
         //FileHelper::createDirectory($path, $mode = 0775, $recursive = true);
        //remove the old profile picture
        if($user->profile_pic != NULL){
             unlink($path.$user->profile_pic);
        }
        // $uploads now contains 1 or more UploadedFile instances
        foreach ($uploads as $file){
            $file->saveAs($path.$user->username.'.'.$file->extension);
            $user->profile_pic = $user->username.'.'.$file->extension;
             chmod($path.$user->username.'.'.$file->extension, 0777);
            if($user->save()){
                $response['isCode'] = 201;
                $response['message'] = 'profile picture successfully updated';
                $response['user'] = $user;
                return $response; 

            }
            $response['isCode'] = 100;
            $response['message'] = 'No Success';
            return $response;
        }
        $response['isCode'] = 100;
        $response['message'] = 'Failed';
        return $response;
    }

}

Please any ideas on this will be highly appreciated.