filepond загрузчик файлов перезагружает веб-приложение, когда файл все еще загружается, и обновляет текущую страницу - PullRequest
Новая
       42

filepond загрузчик файлов перезагружает веб-приложение, когда файл все еще загружается, и обновляет текущую страницу

0 голосов
/ 30 марта 2020

Я использую reactjs для создания веб-приложения на компоненте загрузки файлов, я использую filepond, он работает хорошо, за исключением случаев, когда я пытаюсь загрузить файл, пока его прогресс не превысит 30 или 40 процентов, перезагружается вся страница и весь процесс загрузки файла отменяется. Можно ли как-то остановить загрузку страницы? Мой базовый c компонент filepond выглядит так: 

    import React from 'react';
    import "./ImageUploader.css";
    import { FilePond, registerPlugin } from 'react-filepond/dist/react-filepond';

    // Import FilePond styles
    import 'filepond/dist/filepond.min.css';

    // Import the Image EXIF Orientation and Image Preview plugins
    // Note: These need to be installed separately
    import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation';
    import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
    import FilePondPluginFilePoster from "filepond-plugin-file-poster";
    import FilePondPluginFileEncode from 'filepond-plugin-file-encode';
    import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';

    // // Register the plugins
    registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview,FilePondPluginFilePoster,FilePondPluginFileEncode);

    // Our app
    const api_url = require("../../../../constants/api");

    export default class ImageUploader extends React.Component {
        constructor(props) {
            super(props);

            this.state = {
                // Set initial files, type 'local' means this is a file
                // that has already been uploaded to the server (see docs)
                files: [
                    {
                        // the server file reference
                        source: '12345',

                        // set type to local to indicate an already uploaded file
                        options: {
                            type: 'local',
                            // pass poster property
                            metadata: {
                                poster: '../images/file.png'
                            }
                        }
                    }]
            };
        }

        handleInit() {
            console.log('FilePond instance has initialised', this.pond);
        }
        onProcessFiles() {
            let { onProcessFiles } = this.props;
            let pondFiles = this.pond.getFiles();
            if (onProcessFiles) onProcessFiles(pondFiles);
        }



        render() {
            return (
                    <FilePond ref={ref => this.pond = ref}
                            onaddfilestart={(file) => this.onProcessFiles()}
                            onprocessfile={(error, file) => this.onProcessFiles()}
                            allowFilePoster = {true}
                            allowFileEncode = {true}
                            files={this.state.files}
                            allowMultiple={true}
                            maxFiles={3}
                            server={api_url+'/uploads'}
                            onprocessfileabort = {()=>{ console.log("error!!!!")}}
                            oninit={() => this.handleInit() }
                            onupdatefiles={(fileItems) => {
                                // Set current file objects to this.state
                                this.setState({
                                    files: fileItems.map(fileItem => fileItem.file)
                                });
                            }}>
                    </FilePond>

            );
        }
    }
...