FineUploader не работает после первой загрузки - PullRequest
Новая
       31

FineUploader не работает после первой загрузки

0 голосов
/ 04 октября 2018

Я реализовал FineUploader в своем приложении React для загрузки файлов в хранилище BLOB-объектов Azure, и он работает нормально, за исключением одной проблемы.

После успешной загрузки файла, если я пытаюсь загрузить другой, FineUploaderне позволяет мне выбрать новый файл.Нажатие на кнопку выбора открывает диалоговое окно, позволяющее мне выбрать файл, но нажатие на файл, чтобы выбрать его, просто ничего не делает.Я также не вижу никаких ошибок.

Есть идеи, что может быть причиной этой проблемы?

Вот моя реализация FineUploader в моем приложении: 

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import FineUploaderAzure from 'fine-uploader-wrappers/azure'

// Components
import Gallery from './gallery/index';

// Actions
import * as fileActions from '../../../../actions/file-actions';

// Instanciate FineUploader
const uploader = new FineUploaderAzure({
    options: {
        cors: {
            expected: true,
            sendCredentials: false
        },
        signature: {
            endpoint: 'https://api.myapp.com/files/get/sas'
        },
        request: {
            endpoint: 'https://myaccount.blob.core.windows.net/my-container'
        },
        validation: {
            itemLimit: 1
        }
    }
})

class FileUploader extends Component {

    constructor(props) {

        super(props);
        this.saveFileInfo = this.saveFileInfo.bind(this);
    }

    componentDidMount() {

        uploader.on('complete', (id, name, responseJSON, xhr) => {

            const originalName = uploader.methods.getName(id);
            const blobName = uploader.methods.getBlobName(id);
            const fileSize = uploader.methods.getSize(id);

            this.saveFileInfo(originalName, blobName, fileSize);
        })
    }

    saveFileInfo(fileName, blobName, fileSize) {

        // Gather necessary information
        const accountId = this.props.accountId;
        const id = this.props.id;
        const folderId = this.props.activeFolder.id;
        const files = [
            {
                fileName: blobName,
                displayName: fileName,
                fileSize: fileSize
            }
        ];

        // Call backend API to save file info in database
        this.props.actions.createFileRecords(accountId, bizObject, id, privilegeLevel, folderId, files);

        // Close modal
        const modalId = this.props.modalId;
        return this.props.handleClose(modalId, false);
    }

    render() {

        return (
            <div style={{ position: 'fixed', zIndex: 250000990 }}>
                <div className="modal-wrapper">
                    <div className="height-100 width-100" style={{ background: 'transparent', position: 'absolute', left: '0', top: '0' }}></div>
                    <div className="modal-window vertical-center">
                        <div className="modal-controls padding-right-20 padding-top-10" style={{ height: '50px', position: 'absolute', right: '0', top: '0', lineHeight: '40px', borderColor: 'transparent !important' }}>
                            <a className="modal-control mc-help"></a>
                            <a className="modal-control mc-close" onClick={e => this.props.handleClose(this.props.modalId, false)}></a>
                        </div>
                        <div className="width-100 height-100 border-radius border-black-w1-1" style={{ overflow: 'hidden', background: 'black !important', borderColor: 'black' }}>
                            <Gallery uploader={uploader} onComplete={this.handleFileUpload} />
                        </div>
                        <div style={{ position: 'absolute', bottom: '17px', left: '17px' }}>

                            {/* Privilege Level Selector */}
                            {this.renderPrivilegeLevels()}
                            <span className="app-btn app-btn-lg margin-left-20">Uploading into Folder: <strong>{this.props.activeFolder.name}</strong></span>

                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

function mapStateToProps(state, ownProps) {

    return {
        modalId: ownProps.modalId,
        accountId: ownProps.accountId,
        id: ownProps.id,
        folders: ownProps.folders,
        activeFolder: ownProps.activeFolder,
        fileUpload: state.files.fileUpload,
        errors: state.files.errors,
        handleClose: ownProps.handleClose
    }
}

function mapDispatchToProps(dispatch, ownProps) {

    return {
        actions: bindActionCreators(fileActions, dispatch)
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(FileUploader)

1 Ответ

0 голосов
/ 09 октября 2018

Как объяснено в комментарии, опция itemLimit: 1 ограничивает общее количество загрузок для этого Uploader до 1.

Поскольку то, что вы пытаетесь достичь, фактически позволяет избежать одновременной загрузки нескольких файлов, вы можетеиспользуйте опцию multiple: false, чтобы заблокировать выбор нескольких файлов.

Кроме того, чтобы пользователи не добавляли больше файлов, в то время как другие все еще загружали, вы можете использовать пользовательскую проверку, где вы проверяете, есть ли некоторые из них.другие файлы находятся в progress , например: 

   options: {
      ..., //other options
      callbacks: {
         onValidate: function (file) {
           if(getInProgress() > 0){
              return false;
           }        
           return true;        
      }
   }

Обратите внимание, что события onValidate вызываются до стандартных валидаторов Fine Uploader

...