首次上传后FineUploader无法正常工作

山姆

我已经在我的React应用程序中实现了FineUploader,以将文件上传到我的Azure Blob存储,除了一个问题之外,它都工作正常。

成功上传文件后,如果我尝试上传另一个文件,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)
Zeromus

如评论中所述,该itemLimit: 1选项将上传总数限制Uploader为1。

由于您实际上要避免一次上传multiple: false多个文件,因此您可以使用该选项阻止选择多个文件。

另外,为避免用户在其他文件仍在上传时添加更多文件,可以使用自定义验证来检查是否有其他文件在进行中,例如:

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

请注意,onValidate事件在默认的Fine Uploader验证程序之前调用

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章