# How does an extension store a file?

**URL:** <https://discourse.mozilla.org/t/how-does-an-extension-store-a-file/79341>\
**Category:** Development\
**Created:** [April 27, 2021, 1:09am UTC](https://discourse.mozilla.org/t/how-does-an-extension-store-a-file/79341 "2021-04-27T01:09:45Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ComputerWhiz](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/computerwhiz/32/20011_2.png) [@ComputerWhiz](https://discourse.mozilla.org/u/ComputerWhiz)\
**Post date:** [April 27, 2021, 1:09am UTC](https://discourse.mozilla.org/t/how-does-an-extension-store-a-file/79341/1 "2021-04-27T01:09:45Z")

</div>

For an example, if I was making an extension that played a notification noise and I wanted to let the user set an audio file to use as the notification sound, how would I save that in the add-on?

As far as I’m aware, the `<input>` element for a file passes a fake filepath to Firefox, so I couldn’t just store the file path in the Storage API (it would be weird if Firefox allowed extensions to just access files like that away).

Would I need to have JavaScript make a Blob() from the file and store that in the Storage API? Is that even allowed? Is there a better way to do it?

---

<div class="post-metadata">

**Author:** ![freaktechnik](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/freaktechnik/32/37766_2.png) [@freaktechnik](https://discourse.mozilla.org/u/freaktechnik)\
**Post date:** [April 27, 2021, 11:19am UTC](https://discourse.mozilla.org/t/how-does-an-extension-store-a-file/79341/2 "2021-04-27T11:19:48Z")

</div>

I’m not sure if the storage API by now supports all the things you can store in an indexedDB, even though it is an indexed DB these days. In short, you’d use an indexed DB.

The MDN documentation explains usage with a library:  
[https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Working\_with\_files#store\_files\_data\_locally\_using\_the\_indexeddb\_file\_storage\_library](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Working_with_files#store_files_data_locally_using_the_indexeddb_file_storage_library)

[https://github.com/freaktechnik/notification-sounds/blob/main/scripts/stored-sound.js](https://github.com/freaktechnik/notification-sounds/blob/main/scripts/stored-sound.js) is my much simplified version of such an interaction that lets you store a blob with a name as an ID and retrieve it.

---

<div class="post-metadata">

**Author:** ![juraj.masiar](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/juraj.masiar/32/30587_2.png) [@juraj.masiar](https://discourse.mozilla.org/u/juraj.masiar)\
**Post date:** [April 28, 2021, 6:55am UTC](https://discourse.mozilla.org/t/how-does-an-extension-store-a-file/79341/3 "2021-04-28T06:55:00Z")

</div>

You can also convert the Blob to `base64` string and store that in whatever storage you need (it it will fit).  
But due to the encoding overhead it will take ~30% more space. Also performance may suffer if you try to load many of these directly in the HTML (it may be better to convert them back to Blob and use `URL.createObjectURL` to get a link).