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