Outlook Web 加載項在上傳文件時經常崩潰

Question

我正在使用 ReactJs 開發 Outlook Web 插件，我在使用此文件上傳器的地方編寫了任務窗格插件。 因此，每當我嘗試上傳任何大小（小或大）的任何文件時，任務窗格都會崩潰並重新啟動加載項。 大多數情況下，第一次上傳任何文件時都會發生。 我在代碼中做錯了什么還是有任何 Outlook 問題？

我也為 dropzone 嘗試了一些 react npm 包，但也遇到了同樣的錯誤。 我附上了錯誤截圖、Outlook 警報事件和我的文件上傳器代碼。

---

Windows 10 家庭版 (19041.388) Outlook 2007 版（內部版本 13029.20344 即點即用）

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

Answer 1

我們能夠使用來自這篇文章和這篇相關文章的數據在內部重現這個問題。 我們已經修復了該錯誤，並且該修復程序應該在版本 16.0.13603.10000 或更高版本中可用。 更新版本何時可用取決於客戶所在的發布渠道。