Blockly with Electron - Button Inputs

[JBatUN]

I know this is probably a stretch question asking too much of blockly, but since the possibilities seem endless, here I go.  We are building an Electron-based desktop application that can read and write to the file system.  We use it to save and load an XML workspace but it would be ideal if it were possible to have a file select button within a data load block.  See example:

The user clicks a button, an electron file dialog is shown; user selects the file ( in this case a csv ) and the file path is populated in the input.

Does this seem possible?  If so, any suggestions on how to implement?

THANKS!

JB, United Nations

P.S.  The project will be open source in case anyone is interested.

[Sam El-Husseini]

Hey JB,

Thanks for reaching out. This is actually very much a supported scenario in Blockly. We don’t have a built-in field that does just that, but you can build a custom field to achieve your desired behavior.

You can learn more about custom fields here:
https://developers.google.com/blockly/guides/create-custom-blocks/fields/customizing-fields/creating

I would expect something like this:
- When a value is not set, the field’s render_ method would show the text “Choose file” perhaps making it look like a button, you’re limited to using SVG here. If a value is set, render a shortened version of the file path (ie: the field’s value).
- When a user clicks on the field, you would immediately create a HTML input of type=“file” in the WidgetDiv, and trigger a synthetic click on it which would bring up the browser file selector dialog. I’m not sure if there’s anything special you need to do in Electron to handle that.
- You can also set an onchange listener to input element, so that you know when a user is done selecting their file at which point you would set the field’s value with this new file name and dispose of everything.

This method of using a temporary html element is exactly how the text field (Blockly.FieldTextInput) works, so I would recommend you use that as a skeleton for your new field.

Cheers,
Sam

[JBatUN]

Thanks Sam - super useful advice.  Much appreciated.

JB