Search code examples
firefoxfirefox-addonfirefox-addon-sdk

How do I put an file input element in the preference pane of a Firefox addon?

I want to let the user upload an image (to the folder of the addon) in the preferences window of my addon.

This is my current 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>

Is there any way I can do this (with a workaround)?

Solution

  • Ok here is a complete addon example that shows you to do it:

    GitHub :: Noitidart / PortableTester

    Click on the XPI there and download it, and then drag it onto firefox to install it. OR just use AMO :: GitHub Extension Installer to install the extension from the repo link above

    So what I did was create a options.xul file. And in install.rdf make sure you haven't set <em:optionsType> to anything.

    Then the contents of options.xul is this:

    <?xml version="1.0" ?>
<vbox xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <setting title="Image Upload" type="file" pref="[email protected]_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(\'[email protected]_upload\') == `' + Services.prefs.getCharPref('[email protected]_upload'))">
        Select image to upload
    </setting>
</vbox>

    So after installing the addon go to addons panel. Ctlr shift A.

    then click on options. You will see this:

    now click browse and pick a file, and then it will prompt you, i use the oninputchanged attribute seen in options.xul above, to alert the value. It saves the path of the image to a preferenced called [email protected]_upload you can change this to whatever name you want but keep the extensions. prefix.

    You can now access the value in the oninputchanged command with this.value or from anywhere, any addon, or anyplace, with Services.prefs.getCharPref('[email protected]_upload')