@@ -41,10 +41,17 @@ export default class MultipleUploadFilePickerTab extends React.Component<IMultip
41
41
< div className = { css ( styles . tab , styles . tabOffset ) } >
42
42
< DragDropFiles
43
43
iconName = "BulkUpload"
44
- onDrop = { this . _handleFileUpload }
44
+ onDrop = { this . _handleFileUploadDragDrop }
45
45
>
46
46
< div className = { styles . localTabDragDropFile } >
47
- { strings . UploadLinkLabel + " " + strings . OneDriveRootFolderName }
47
+ < input
48
+ className = { styles . localTabInput }
49
+ type = "file" id = "fileInput"
50
+ accept = { acceptedFilesExtensions } multiple = { true } onChange = { ( event : React . ChangeEvent < HTMLInputElement > ) => this . _handleFileUploadExplorer ( event ) }
51
+ />
52
+ < label className = { styles . localTabLabel } htmlFor = "fileInput" >
53
+ { strings . UploadLinkLabel + " " + strings . OneDriveRootFolderName }
54
+ </ label >
48
55
</ div >
49
56
</ DragDropFiles >
50
57
@@ -67,9 +74,9 @@ export default class MultipleUploadFilePickerTab extends React.Component<IMultip
67
74
}
68
75
69
76
/**
70
- * Gets called when files are uploaded
77
+ * Gets called when files are uploaded via drag and drop
71
78
*/
72
- private _handleFileUpload = ( files ) => {
79
+ private _handleFileUploadDragDrop = ( files ) => {
73
80
if ( files . length < 1 ) {
74
81
return ;
75
82
} else {
@@ -79,6 +86,19 @@ export default class MultipleUploadFilePickerTab extends React.Component<IMultip
79
86
}
80
87
}
81
88
89
+ /**
90
+ * Gets called when files are uploaded via file explorer
91
+ */
92
+ private _handleFileUploadExplorer = ( event : React . ChangeEvent < HTMLInputElement > ) => {
93
+ if ( ! event || event . target . files . length < 1 ) {
94
+ return ;
95
+ } else {
96
+ this . setState ( {
97
+ filesResult : event . target . files
98
+ } ) ;
99
+ }
100
+ }
101
+
82
102
/**
83
103
* Saves base64 encoded image back to property pane file picker
84
104
*/
0 commit comments