How do I put a file input element in the Firefox addon preference pane?
I want the user to upload an image (to the addon folder) in the settings window of my addon.
This is my current one prefpane
:
<prefpane id="tpt-pane" label="Settings">
<preferences>
<preference id="pref_upload" name="addonname.upload" type="file"/>
</preferences>
<hbox align="center">
<label control="upload" value="The file: "/>
<input type="file" preference="pref_upload" id="upload" />
</hbox>
</prefpane>
Can I do this (with a workaround)?
source to share
Ok, here is a complete example of an addon that shows you will do this:
GitHub :: Noitidart / PortableTester
Click on XPI and download it, then drag and drop to Firefox to install it. OR just use AMO :: GitHub Extension Installer to install the extension from the repo link above
So I created a file options.xul
. And install.rdf
make sure you haven't installed <em:optionsType>
on anything.
Then the content options.xul
is as follows:
<?xml version="1.0" ?>
<vbox xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<setting title="Image Upload" type="file" pref="extensions.PortableTester@jetpack.image_upload" oninputchanged="alert('path of image is:' + this.value + '\nyou can access this image from your addon or anywhere else by getting the pref value so like this:\n`Services.prefs.getCharPref(\'extensions.PortableTester@jetpack.image_upload\') == `' + Services.prefs.getCharPref('extensions.PortableTester@jetpack.image_upload'))">
Select image to upload
</setting>
</vbox>
So, after installing the addon, go to the addons panel. Shift Ctlr A.
then click on options. You will see the following:
Now, click View and select the file, and then it prompts you, I use the attribute oninputchanged
specified in the options.xul
above, in order to prevent the value. It saves the image path to your preferred name extensions.PortableTester@jetpack.image_upload
, you can change it to whatever name you want, but keep the prefix extensions.
.
Now you can access the value in the command oninputchanged
with this.value
or from anywhere, any addon or any other withServices.prefs.getCharPref('extensions.PortableTester@jetpack.image_upload')
source to share