Hi, I'm a newbie to React and the SharePoint framework and I'm hoping someone can help me with the same issue as this posting --> https://github.com/OfficeDev/office-ui-fabric-react/issues/4733. Basically I am creating a webpart that needs to upload a file to a document library. The office-ui-fabric-react button control does not have this capability built-in, but the HTMLInputElement does. The solution by Je-T in the above link describes using a UI fabric button to pass the event to a reference that has been created for the HTMLInput element. Makes sense to me, but it isn't working for me in practice. Basically the fileUploadRef reference is always undefined int he ClickUpload methods. can anyone help me understand the error the below code. if you have a working example of something similar then that would help as well.
import * as React from "react";
import { IPhotoUploaderProps } from "./IPhotoUploaderProps";
import styles from "./PhotoUploader.module.scss";
import { createRef, IButtonStyles, IconButton, HighContrastSelector, Label, IContextualMenuProps, IIconProps, PrimaryButton, IButtonProps } from 'office-ui-fabric-react';
import Dropzone from 'react-dropzone';
import { Modal, ILayerProps} from 'office-ui-fabric-react';
export class PhotoUploader extends React.Component<IPhotoUploaderProps> {
constructor(props: IPhotoUploaderProps) {
super(props);
}
private fileUploadRef = createRef<HTMLInputElement>();
private onDrop = (acceptedFiles) => {
console.log(acceptedFiles);
}
private layerProps: ILayerProps = {eventBubblingEnabled: true};
private clickUpload() {
if (this.fileUploadRef.current) {
this.fileUploadRef.current.click();
}
}
private uploadFile(clickEvent: EventInit) {
}
public render(): React.ReactElement<IPhotoUploaderProps> {
const cancelIcon: IIconProps = { iconName: 'Cancel'};
return (
<Modal isOpen={this.props.showModal} onDismiss={this.props.modalCancel} layerProps={this.layerProps} >
<div className={styles.photoUploaderContainer}>
<IconButton
iconProps={cancelIcon}
onClick={this.props.modalCancel}
className={styles.cancelButton}
/>
<div className={styles.heading}>Submit a Photo</div>
<p>
You can submit home page banner photos to be seen by <strong>all users company-wide.</strong> All photos are reviewed before
use. If your photo is chosen, your name will appears in the attribution on the home page.
</p>
<p>
<strong>Do not submit photos you don't want the whole company to see!</strong>
</p>
<PrimaryButton onClick={this.clickUpload} title="Upload File">Upload Image</PrimaryButton>
<input ref={this.fileUploadRef} type="file" accept="application/xml" onChange={this.uploadFile} />
</div>
</Modal>
);
}
}
