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">
    <preference id="pref_upload" name="addonname.upload" type="file"/>

  <hbox align="center">
    <label control="upload" value="The file: "/>
    <input type="file" preference="pref_upload" id="upload" />


Can I do this (with a workaround)?


source to share

1 answer

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="">
    <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


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')



All Articles