Outlook web add-in crashes frequently while uploading file

Question

I am working on Outlook Web Add-in developing using ReactJs, I have compose task-pane Add-In where I'm using this file uploader. So whenever I tried to upload any file of any size (small or large) the taskpane crashes and restarting Add-In. And mostly it happens uploading first time any file. Am I doing something wrong in code or is it any Outlook issue?

I aslo tried some react npm package for dropzone which also getting this same error. I have attached screenshot of error, Event of outlook alert and code of my file uploader.

---

Windows 10 Home (19041.388) Outlook Version 2007(Build 13029.20344 Click-to-Run)

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

We were able to reproduce this issue in-house using data from this post and this related post. We have fixed the bug and the fix should be available in build 16.0.13603.10000 or later. When an updated build is available depends on the release channel a customer is on.