Reversibly extracts files from an object tree.

Files are extracted along with their object path to allow reassembly. Extracted files are removed from the tree. Array item files are removed without reindexing the array to simplify reassembly.

Files may be File and ReactNativeFile instances. FileList instances are converted to arrays and the items are extracted as File instances.

Install with npm:

npm install extract-files

extractFiles accepts an object tree to extract files from, along with an optional tree path to prefix file paths:

import { extractFiles } from 'extract-files'
import tree from './tree'

const files = extractFiles(tree, 'tree')

Extracted files are an array:

[{
  path: 'tree.foo',
  file: /* File instance */
}, {
  path: 'tree.bar.0',
  file: /* File instance */
}, {
  path: 'tree.bar.1',
  file: /* File instance */
}]

extractFiles will return an empty array if the object tree is null or not an object. The top tree node must not be a file.

React Native polyfills FormData under the hood and objects with the properties uri, type and name substitute window.File. It would be risky to assume all objects with those properties in a tree are files. Use ReactNativeFile instances within a tree to explicitly mark files:

import { extractFiles, ReactNativeFile } from 'extract-files'

const tree = {
  singleFile: new ReactNativeFile({
    uri: uriFromCameraRoll,
    type: 'image/jpeg',
    name: 'photo.jpg'
  }),
  multipleFiles: ReactNativeFile.list([{
    uri: uriFromCameraRoll1,
    type: 'image/jpeg',
    name: 'photo-1.jpg'
  }, {
    uri: uriFromCameraRoll2,
    type: 'image/jpeg',
    name: 'photo-2.jpg'
  }])
}

const files = extractFiles(tree, 'tree')

object-path can be used to loop and reinsert the extracted files:

import { extractFiles } from 'extract-files'
import objectPath from 'object-path'
import tree from './tree'

const files = extractFiles(tree, 'tree')
const treePath = objectPath(tree)

files.forEach(({path, file}) => treePath.set(path, file))

FileList instances in an original tree become arrays when reassembled.

• > 2% market share browsers.
• React Native.