How to Set a Custom File Name in React Image Editor Save Dialog?

To customize the default file name shown in the save dialog of the Syncfusion React Image Editor, you can use the toolbarItemClicked event. This allows you to programmatically set a custom file name before the dialog appears.

To achieve this, trigger the toolbarItemClicked event of the Image Editor component when you click the save button. Within the event handler, check if the clicked toolbar item is the save button using the args.item. Once confirmed, access the file name input field inside the save dialog using a DOM query. Then, set your custom file name programmatically before the dialog is shown.

Code Example

const toolbarItemClicked = async (args) => {
   if (args.item.id.includes('_save')) {
     var saveDialog = document.querySelector(
       '#' + imageEditorRef.current.id + '_imgNametext'
     );
     saveDialog.value = 'YourCustomFileName'; // Set custom file name
   }
 };

 return (
   <div className="e-img-editor-sample">
     <ImageEditorComponent
       ref={imageEditorRef}
       toolbarItemClicked={toolbarItemClicked}
     ></ImageEditorComponent>
   </div>
 );

Live Demo

Try it out on StackBlitz Live Demo

Conclusion

I hope you enjoyed learning about how to set a custom file name in React Image Editor save dialog.

You can refer to our React Image Editor’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our React Image Editor Documentation to understand how to present and manipulate data.

For current customers, you can check out our React components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our React Image Editor and other React components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!