How to customize the upload popup in the React File Manager component?
Step 1: Implement File Manager component using our getting started documentation.
[index.js]
const beforeSend = (args) => {if (args.action == 'Upload') {
var element = fileInstance.current.element.getElementsByClassName('e-dlg-container')[0];
let contentElement = element.querySelector('.e-upload-files')
if (element != null) {
//Remove the upload dialog popup.
element.remove();
}
setIsVisibleDialog(true);
dialogInstance.current.element.querySelector('.e-dlg-content').append(contentElement);
}
}
…
…
<DialogComponent
ref={dialogInstance}
width="250px"
target="#overview_file"
showCloseIcon={true}
header="Custom Upload"
visible={visibleDialog}
closeOnEscape={false}
close={dialogClose.bind(this)}
>
<AutoCompleteComponent ref={autocompleteInstance} id="games" dataSource={data} placeholder="e.g. Basketball"/>
<TextBoxComponent ref={textInstance} placeholder="First Name" floatLabelType="Auto"/>
</DialogComponent
Sample: https://stackblitz.com/edit/react-biueby-rajzye?file=index.js,index.html
Service provider: https://github.com/SyncfusionExamples/ej2-aspcore-file-provider
Conclusion
I hope you enjoyed learning on how to customize the upload popup in the React File Manager component.
You can refer to our React File Manager feature tour page
to know about its other groundbreaking feature representations and documentation, and
how to quickly get started for configuration specifications. You can also
explore our React File Manager Example to
understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
