Загрузка файлов с использованиемactjs с Filepond и Php Backend - PullRequest
Новая
       16

Загрузка файлов с использованиемactjs с Filepond и Php Backend

0 голосов
/ 25 февраля 2019

Проведя некоторые исследования по загрузке файлов вactjs, я натолкнулся на Filepond, который кажется отличным решением и на самом деле может справиться со всем, что мне нужно, когда дело доходит до загрузки файлов в моем приложении с использованием фреймворка Yii2 (php).

Я установил FillPond и следую базовым учебным пособиям, показанным https://itnext.io/uploading-files-with-react-and-filepond-f8a798308557, и он отлично работает для меня.

На самом деле я могу загружать файлы отсюда в мою среду Yii2 и успешно их сохранять.

Теперь я хочу иметь возможность загружать и отправлять файлы в форме вместе с другими данными формы.Я не знаю, возможно ли это?если да, пожалуйста, как мне это сделать ??

Я также видел вариант обрезки и изменения размера, который я очень заинтересован в их использовании.Как мне использовать эти плагины, так как я не вижу, как их установить или интегрировать.(Я успешно установил предварительный просмотр).

Примечание. Я полностью прочитал https://pqina.nl/filepond/docs/patterns/api/filepond-instance и вижу свойства, такие как InstantUpload, функции, такие как processFile.но когда я пытаюсь интегрировать их, они не просто хорошо работают и работают не так, как я хочу

Вот мой код рендеринга 

 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>
    ); 
}

Моя функция отправки 

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

Мой API Yii2 выглядит следующим образом 

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;
    }

}

Пожалуйста, любые идеи по этому поводу будут высоко оценены.

...