上传文件

问题描述

我正在使用ReactJs开发Outlook Web Add-in，我在使用此文件上传器的地方编写了任务窗格插件。因此，每当我尝试上传任何大小（大小）的文件时，任务窗格都会崩溃并重新启动加载项。而且大多数情况是第一次上传任何文件时都会发生。我在代码中做错了还是Outlook的问题？

我也尝试过为dropzone使用一些react npm软件包，这也得到了同样的错误。我已附上错误屏幕快照，Outlook警报事件和文件上传器的代码。

---

Windows 10 Home（19041.388） Outlook版本2007（内部版本13029.20344单击运行）

@L_404_1@

import * as React from "react";
import { MessageBar } from "office-ui-fabric-react/lib/MessageBar";

interface DocumentUploaderProps {
    handleOnDropFiles: (files: any,callback?: any) => void;
}

export default class DocumentUploader extends React.Component<DocumentUploaderProps> {
    inputFileRef;
    constructor(props) {
        super(props);
        this.inputFileRef = React.createRef();
    }
    dragOver = (e) => {
        e.preventDefault();
    }

    dragenter = (e) => {
        e.preventDefault();
    }

    dragLeave = (e) => {
        e.preventDefault();
    }

    fileDrop = (e) => {
        e.preventDefault();
        const files = e.dataTransfer.files;
        this.props.handleOnDropFiles(files,() => this.inputFileRef.current.value = "");
    }
    onClickDropzone = () => {
        this.inputFileRef.current.click();
    }
    render() {
        return (
            <div className="ms-Grid-row">
                <div className="ms-Grid-col ms-sm12">
                    <div className="dz-container">
                        <section
                            className="dropzone"
                            onDragOver={this.dragOver}
                            ondragenter={this.dragenter}
                            onDragLeave={this.dragLeave}
                            onDrop={this.fileDrop}
                            onClick={this.onClickDropzone}
                        >
                            <div>
                                <input
                                    ref={this.inputFileRef}
                                    type="file"
                                    style={{ display: "none" }}
                                    onChange={(e) => this.props.handleOnDropFiles(e.target.files,() => this.inputFileRef.current.value = "")}
                                    multiple
                                />
                                <p className="upload-icon">
                                    <i className="fas fa-file-upload" aria-hidden="true"></i>
                                </p>
                                <p className="ms-fontWeight-bold dropzone-msg">Click or drag files here</p>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        );
    }
}

解决方法

我们能够使用此帖子和this related post中的数据在内部重现此问题。我们已经修复了该错误，该修复程序应在内部版本16.0.13603.10000或更高版本中可用。是否有可用的更新版本取决于客户所在的发布渠道。