Search code examples
javascriptreactjsmobxmobx-state-tree

How can we maintain the file type "File" in mobx-state-tree


From the docs I have understood that the supported complex types for mobx-state-tree are

  • types.model(properties, actions) Defines a "class like" type, with properties and actions to operate on the object.
  • types.array(type) Declares an array of the specified type.
  • types.map(type) Declares a map of the specified type.

However I want to load a type of "File" from the element using the HTML element <input type="file" /> and maintain it in my state tree. Is this possible ?


Solution

  • MST is made for working (mostly) with serializable data. If your file isn't big, you can base64 it and save as types.string. Otherwise, types.volatile is the best way to treat non serializable blobs. Here are the relevant docs: https://mobx-state-tree.js.org/concepts/volatiles