diff --git a/docs/content/en/api/model-options.md b/docs/content/en/api/model-options.md index 4e8b7db5..989d97e5 100644 --- a/docs/content/en/api/model-options.md +++ b/docs/content/en/api/model-options.md @@ -65,6 +65,24 @@ parameterNames() { } ``` +### `formData` +- Returns: `object` + +This method can be overridden in the model to configure `object-to-formdata`. + +See [object-to-formdata](https://github.com/therealparmesh/object-to-formdata#usage) + +```js +formData() { + return { + indices: false, + nullsAsUndefineds: false, + booleansAsIntegers: false, + allowEmptyArrays: false, + } +} +``` + #### `include` - Default: `include` - Returns: `string` diff --git a/docs/content/en/configuration.md b/docs/content/en/configuration.md index eaaa41bb..2d62d10a 100644 --- a/docs/content/en/configuration.md +++ b/docs/content/en/configuration.md @@ -193,3 +193,47 @@ export default class Model extends BaseModel { } } ``` + +## Configuring FormData + +See the [API reference](/api/model-options#formdata) and [object-to-formdata](https://github.com/therealparmesh/object-to-formdata#usage) + +When uploading files, the data of our request will be automatically converted to `FormData` using `object-to-formdata`. + +If needed, we can easily configure the options by overriding the `formData` method. + +We can globally configure this in the [Base Model](/configuration#creating-a-base-model): + +```js{}[~/models/Model.js] +import { Model as BaseModel } from 'vue-api-query' + +export default class Model extends BaseModel { + + // Define a base url for a REST API + baseURL() { + return 'http://my-api.com' + } + + // Implement a default request method + request(config) { + return this.$http.request(config) + } + + // Override default query parameter names + parameterNames() { + const defaultParams = super.parameterNames() + const customParams = { + include: 'include_custom' + } + + return { ...defaultParams, ...customParams } + } + + // Configure object-to-formadata + formData() { + return { + indices: true + } + } +} +``` diff --git a/package.json b/package.json index 982fd814..237e28da 100644 --- a/package.json +++ b/package.json @@ -63,6 +63,7 @@ "dependencies": { "dotprop": "^1.2.0", "dset": "^2.0.1", - "object-to-formdata": "^4.1.0" + "object-to-formdata": "^4.1.0", + "qs": "^6.9.4" } } diff --git a/src/Model.js b/src/Model.js index 3464292d..f8647315 100644 --- a/src/Model.js +++ b/src/Model.js @@ -42,30 +42,8 @@ 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 } + formData() { + return {} } resource() { diff --git a/yarn.lock b/yarn.lock index 51f8cc5f..c132f94b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6284,6 +6284,11 @@ qrcode-terminal@^0.12.0: resolved "https://registry.yarnpkg.com/qrcode-terminal/-/qrcode-terminal-0.12.0.tgz#bb5b699ef7f9f0505092a3748be4464fe71b5819" integrity sha512-EXtzRZmC+YGmGlDFbXKxQiMZNwCLEO6BANKXG4iCtSIM0yqc/pappSx3RIKr4r0uh5JsBckOXeKrB3Iz7mdQpQ== +qs@^6.9.4: + version "6.9.4" + resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.4.tgz#9090b290d1f91728d3c22e54843ca44aea5ab687" + integrity sha512-A1kFqHekCTM7cz0udomYUoYNWjBebHm/5wzU/XqrBRBNWectVH0QIiN+NEcZ0Dte5hvzHwbr8+XQmguPhJ6WdQ== + qs@~6.5.2: version "6.5.2" resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"