Is there any way to change the title and save type of file dialog on electron?

user_5832644 0
Viewed 353

I've created a button for downloading and saving a file returned from an api endpoint.

In common browser, after clicking the button, a save file dialog appears with title Save As and Save as type displayed by file's extension. But in electron, the title seems to be a file url (in my case it shows blob://https:... cause mine is created with URL.createObjectURl).

So is that any options I need to set to a tag to make the dialog title is Save As and correct the save type of file (without using native dialog of electron)?

...
<a hidden href='/' ref={downloadRef}>download</a>
<button onClick={handleSaveFile}>download</button>
...

const handleSaveFiles = (file: Blob, fileName: string): void => {
  const fileDownloadUrl = window.URL.createObjectURL(file);
  if (downloadRef.current) {
    downloadRef.current.href = fileDownloadUrl;
    downloadRef.current.download = fileName;
    downloadRef.current.click();
  }
};
electron reactjs html javascript
1 Answers

Actually, the dialog opened when clicking that button already is electron's dialog, then I could edit the title and filters by will-download event.

...
this.browserWindow = new BrowserWindow(option);
...
this.browserWindow.webContents.session.on('will-download', (event, item) => {
 let filters = [];
 switch (item.getMimeType()) {
  case 'text/csv':
   filters = [{ name: 'Microsoft Excel Comma Separated Values File', extensions: ['csv'] }];
   break;
  case 'application/octet-stream':
   filters = [{ name: 'Zip archive', extensions: ['zip'] }];
   break;
  default:
   break;
 }

 item.setSaveDialogOptions({
   title: 'Save As',
   filters: [...filters, { name: 'All Files', extensions: ['*'] }],
 });
});

Refer to https://www.electronjs.org/docs/latest/api/download-item#downloaditemsetsavedialogoptionsoptions

user_58326440
Related