Fluentui: Office UI Fabric - File input component

[mubash7]

I am building an upload document feature in SharePoint with some specific requirement. I need a component for file input so that user can select a document from local machine to upload in SharePoint. Is there one?

[mubash7]

I am attaching GIF of what I have build on my SharePoint online site. when I click on Up Revision, a dialog opens. and in that dialog box there is an html file input control. rest everything I have from office-ui-fabric.
For design consistency, I would like to use file input from office-ui-fabric. is there any substitute.

[mubash7]

@aditima is there a file input control in office?

[aditima]

@mubash7 - there is no File input control in Fabric. But in many scenarios, people overlay a div or a button on top of the input element to look more consistent. The 'Upload' menu items in the SP doclib is a good example.

Here's a code snippet for the 'Upload' menu item:

Notice how the file 'input' element has styling to hide it under a 'div' with nice looking text on it. There is code to relay a click on the div to the input element to make it just work.

Hopefully this answers your question and gives you a way to work around this.

[j-te]

There's another variation to @aditima's solution. Using CSS was messy so I avoided it:

• Create a dummy <input /> item next to your Upload button item and set display: "none":

    [
      {
        iconProps: {
          iconName: "Upload"
        },
        key: "upload",
        name: "Upload xml Document",
        onClick: this.clickUpload
      },
      {
        key: "upload-dummy",
        name: "Upload xml Document",
        onRender: () => <input ref={this.fileUploadRef} style={{ display: "none" }} type="file" accept="application/xml" onChange={this.uploadFile} />
      }
    ]

```typescript
// Simulates clicking
private clickUpload() {
if (this.fileUploadRef.current) {
this.fileUploadRef.current.click()
}
}

Note: create a reference in the constructor: `this.fileUploadRef = React.createRef();`

```typescript
private uploadFile(clickEvent: EventInit) {
  // Upload function. Note the clickEvent is required for FileReader() ...
}