feat(model): add support to upload files (robsontenorio#143)

Add support to upload files by checking if data has instance of `File`. If so, it set the `Content-Type` to `multipart/form-data` and convert the data object to `FormData` using `object-to-formdata`.

Based on comment by @alvaro-canepa at robsontenorio#83

Author: JoaoPedroAS51

docs/content/en/api/crud-operations.md

@@ -10,6 +10,8 @@ category: API
 
 Save or update a model in the database, then return the instance.
 
+<alert type="info">When uploading files, the `Content-Type` will be set to `multipart/form-data`.</alert>
+
 ### create
 
 <code-group>
@@ -96,6 +98,7 @@ Alias for:
 model.config({ method: 'PATCH' }).save()
 ```
 
+<alert type="info">When uploading files, the `Content-Type` will be set to `multipart/form-data`.</alert>
 
 ## `delete`
 

docs/content/en/performing-operations.md

@@ -61,6 +61,8 @@ We can create a new **Post**:
   </code-block>
 </code-group>
 
+<alert type="info">When uploading files, the `Content-Type` will be set to `multipart/form-data`.</alert>
+
 Then we can update our newly created **Post**:
 
 <code-group>

package.json

@@ -62,6 +62,7 @@
   },
   "dependencies": {
     "dotprop": "^1.2.0",
-    "dset": "^2.0.1"
+    "dset": "^2.0.1",
+    "object-to-formdata": "^4.1.0"
   }
 }

src/Model.js

@@ -1,3 +1,4 @@
+import { serialize } from 'object-to-formdata'
 import getProp from 'dotprop'
 import setProp from 'dset'
 import Builder from './Builder'
@@ -41,6 +42,32 @@ export default class Model extends StaticModel {
     return this
   }
 
+  formData(options = {}) {
+    const defaultOptions = {
+      /**
+       * Include array indices in FormData keys
+       */
+      indices: false,
+
+      /**
+       * Treat null values like undefined values and ignore them
+       */
+      nullsAsUndefineds: false,
+
+      /**
+       * Convert true or false to 1 or 0 respectively
+       */
+      booleansAsIntegers: false,
+
+      /**
+       * Store arrays even if they're empty
+       */
+      allowEmptyArrays: false,
+    }
+
+    return { ...defaultOptions, ...options }
+  }
+
   resource() {
     return `${this.constructor.name.toLowerCase()}s`
   }
@@ -285,6 +312,7 @@ export default class Model extends StaticModel {
   _reqConfig(config, options = { forceMethod: false }) {
     const _config = { ...config, ...this._config }
 
+    // Prevent default request method from being overridden
     if (options.forceMethod) {
       _config.method = config.method
     }
@@ -296,6 +324,29 @@ export default class Model extends StaticModel {
         Object.entries(_config.data)
           .filter(([key]) => !key.startsWith('_'))
       )
+
+      const _hasFiles = Object.keys(_config.data).some(property => {
+        if (Array.isArray(_config.data[property])) {
+          return _config.data[property].some(value => value instanceof File)
+        }
+
+        return _config.data[property] instanceof File
+      })
+
+      // Check if the data has files
+      if (_hasFiles) {
+        // Check if `config` has `headers` property
+        if (!('headers' in _config)) {
+          // If not, then set an empty object
+          _config.headers = {}
+        }
+
+        // Set header Content-Type
+        _config.headers['Content-Type'] = 'multipart/form-data'
+
+        // Convert object to form data
+        _config.data = serialize(_config.data, this.formData())
+      }
     }
 
     return _config

tests/model.test.js

@@ -446,6 +446,195 @@ describe('Model methods', () => {
     })
   })
 
+  test('save() method makes a POST request when ID of object does not exists, with header "Content-Type: multipart/form-data" if the data has files', async () => {
+    let post
+    const file = new File(["foo"], "foo.txt", {
+      type: "text/plain",
+    })
+    const _postResponse = {
+      id: 1,
+      title: 'Cool!'
+    }
+
+    axiosMock.onAny().reply((config) => {
+      let _data
+
+      if (config.headers['Content-Type'] === 'multipart/form-data') {
+        _data = Object.fromEntries(config.data)
+
+        if (_data['files[]']) {
+          _data.files = [{}, {}]
+          delete _data['files[]']
+        }
+
+        _data = JSON.stringify(_data)
+      } else {
+        _data = config.data
+      }
+
+      expect(config.method).toEqual('post')
+      expect(config.headers['Content-Type']).toEqual('multipart/form-data')
+      expect(_data).toEqual(JSON.stringify(post))
+      expect(config.url).toEqual('http://localhost/posts')
+
+      return [200, _postResponse]
+    })
+
+    // Single files
+    post = new Post({ title: 'Cool!', file })
+    await post.save()
+
+    // Multiple files
+    post = new Post({ title: 'Cool!', files: [file, file] })
+    await post.save()
+  })
+
+  test('save() method makes a PUT request when ID of when ID of object exists, with header "Content-Type: multipart/form-data" if the data has files', async () => {
+    let post
+    const file = new File(["foo"], "foo.txt", {
+      type: "text/plain",
+    })
+    const _postResponse = {
+      id: 1,
+      title: 'Cool!'
+    }
+
+    axiosMock.onAny().reply((config) => {
+      let _data
+
+      if (config.headers['Content-Type'] === 'multipart/form-data') {
+        _data = Object.fromEntries(config.data)
+        _data.id = 1
+
+        if (_data['files[]']) {
+          _data.files = [{}, {}]
+          delete _data['files[]']
+        }
+
+        _data = JSON.stringify(_data)
+      } else {
+        _data = config.data
+      }
+
+      expect(config.method).toEqual('put')
+      expect(config.headers['Content-Type']).toEqual('multipart/form-data')
+      expect(_data).toEqual(JSON.stringify(post))
+      expect(config.url).toEqual('http://localhost/posts/1')
+
+      return [200, _postResponse]
+    })
+
+    // Single file
+    post = new Post({ id: 1, title: 'Cool!', file })
+    await post.save()
+
+    // Multiple files
+    post = new Post({ id: 1, title: 'Cool!', files: [file, file] })
+    await post.save()
+  })
+
+  test('patch() method makes a PATCH request when ID of when ID of object exists, with header "Content-Type: multipart/form-data" if the data has files', async () => {
+    let post
+    const file = new File(["foo"], "foo.txt", {
+      type: "text/plain",
+    })
+    const _postResponse = {
+      id: 1,
+      title: 'Cool!'
+    }
+
+    axiosMock.onAny().reply((config) => {
+      let _data
+      const _post = post
+      delete _post._config
+
+      if (config.headers['Content-Type'] === 'multipart/form-data') {
+        _data = Object.fromEntries(config.data)
+        _data.id = 1
+
+        if (_data['files[]']) {
+          _data.files = [{}, {}]
+          delete _data['files[]']
+        }
+
+        _data = JSON.stringify(_data)
+      } else {
+        _data = config.data
+      }
+
+      expect(config.method).toEqual('patch')
+      expect(config.headers['Content-Type']).toEqual('multipart/form-data')
+      expect(_data).toEqual(JSON.stringify(_post))
+      expect(config.url).toEqual('http://localhost/posts/1')
+
+      return [200, _postResponse]
+    })
+
+    // Single file
+    post = new Post({ id: 1, title: 'Cool!', file })
+    await post.patch()
+
+    // Multiple files
+    post = new Post({ id: 1, title: 'Cool!', files: [file, file] })
+    await post.patch()
+  })
+
+  test('save() method can add header "Content-Type: multipart/form-data" when "headers" object is already defined', async () => {
+    let post
+    const file = new File(["foo"], "foo.txt", {
+      type: "text/plain",
+    })
+    const _postResponse = {
+      id: 1,
+      title: 'Cool!',
+      text: 'Lorem Ipsum Dolor',
+      user: {
+        firstname: 'John',
+        lastname: 'Doe',
+        age: 25
+      },
+      relationships: {
+        tags: [
+          {
+            name: 'super'
+          },
+          {
+            name: 'awesome'
+          }
+        ]
+      }
+    }
+
+    axiosMock.onAny().reply((config) => {
+      let _data
+      const _post = post
+      delete _post._config
+
+      if (config.headers['Content-Type'] === 'multipart/form-data') {
+        _data = JSON.stringify(Object.fromEntries(config.data))
+      } else {
+        _data = config.data
+      }
+
+      expect(config.method).toEqual('post')
+      expect(config.headers['Content-Type']).toStrictEqual('multipart/form-data')
+      expect(_data).toEqual(JSON.stringify(_post))
+      expect(config.url).toEqual('http://localhost/posts')
+
+      return [200, _postResponse]
+    })
+
+    post = new Post({ title: 'Cool!', file })
+    post = await post.config({ headers: {} }).save()
+
+    expect(post).toEqual(_postResponse)
+    expect(post).toBeInstanceOf(Post)
+    expect(post.user).toBeInstanceOf(User)
+    post.relationships.tags.forEach(tag => {
+      expect(tag).toBeInstanceOf(Tag)
+    })
+  })
+
   test('save() method makes a POST request when ID of object is null', async () => {
     let post
 

yarn.lock

@@ -5729,6 +5729,11 @@ object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.1.1:
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
   integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
 
+object-to-formdata@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/object-to-formdata/-/object-to-formdata-4.1.0.tgz#0d7bdd6f9e4efa8c0075a770c11ec92b7bf6c560"
+  integrity sha512-4Ti3VLTspWOUt5QIBl5/BpvLBnr4tbFpZ/FpXKWQFqLslvGIB3ug3jurW/k8iIpoyE6HcZhhmQ6mFiOq1tKGEQ==
+
 object-visit@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"