feat(http): support sending files along with json (#522)

Author: brc-dd

docs/network-requests/http.md

@@ -54,6 +54,17 @@ interface HttpOptions {
    * @default undefined
    */
   lang?: 'en' | 'ja'
+  /**
+   * If you call `http.post` with a file, it will be send as `multipart/form-data`.
+   * The rest of the body will be send as JSON string. This option allows you to
+   * specify the key for the JSON part. This key should match the key in backend
+   * middleware which parses the JSON part. Don't set this option to some common
+   * key to avoid conflicts with other parts of the body. (Sending JSON part as
+   * string is needed to preserve data types.)
+   * 
+   * @default '__payload__'
+   */
+  payloadKey?: string
 }
 
 interface HttpClient {

lib/http/Http.ts

@@ -15,13 +15,15 @@ export interface HttpOptions {
   xsrfUrl?: string | false
   client?: HttpClient
   lang?: Lang
+  payloadKey?: string
 }
 
 export class Http {
   private static baseUrl: string | undefined = undefined
   private static xsrfUrl: string | false = '/api/csrf-cookie'
   private static client: HttpClient = ofetch
   private static lang: Lang | undefined = undefined
+  private static payloadKey = '__payload__'
 
   static config(options: HttpOptions) {
     if (options.baseUrl) {
@@ -36,6 +38,9 @@ export class Http {
     if (options.lang) {
       Http.lang = options.lang
     }
+    if (options.payloadKey) {
+      Http.payloadKey = options.payloadKey
+    }
   }
 
   private async ensureXsrfToken(): Promise<string | undefined> {
@@ -101,6 +106,26 @@ export class Http {
   }
 
   async post<T = any>(url: string, body?: any, options?: FetchOptions): Promise<T> {
+    if (body && !(body instanceof FormData)) {
+      let hasFile = false
+
+      const payload = JSON.stringify(body, (_, value) => {
+        if (value instanceof Blob) {
+          hasFile = true
+          return undefined
+        }
+        return value
+      })
+
+      if (hasFile) {
+        const formData = this.objectToFormData(body, undefined, undefined, true)
+        formData.append(Http.payloadKey, payload)
+        body = formData
+      } else {
+        body = payload
+      }
+    }
+
     return this.performRequest<T>(url, { method: 'POST', body, ...options })
   }
 
@@ -117,13 +142,7 @@ export class Http {
   }
 
   async upload<T = any>(url: string, body?: any, options?: FetchOptions): Promise<T> {
-    const formData = this.objectToFormData(body)
-
-    return this.performRequest<T>(url, {
-      method: 'POST',
-      body: formData,
-      ...options
-    })
+    return this.post<T>(url, this.objectToFormData(body), options)
   }
 
   async download(url: string, options?: FetchOptions): Promise<void> {
@@ -143,7 +162,7 @@ export class Http {
     FileSaver.saveAs(blob, filename as string)
   }
 
-  private objectToFormData(obj: any, form?: FormData, namespace?: string) {
+  private objectToFormData(obj: any, form?: FormData, namespace?: string, onlyFiles = false) {
     const fd = form || new FormData()
     let formKey: string
 
@@ -163,9 +182,12 @@ export class Http {
         && !(obj[property] instanceof Blob)
         && obj[property] !== null
       ) {
-        this.objectToFormData(obj[property], fd, property)
+        this.objectToFormData(obj[property], fd, property, onlyFiles)
       } else {
         const value = obj[property] === null ? '' : obj[property]
+        if (onlyFiles && !(value instanceof Blob)) {
+          return
+        }
         fd.append(formKey, value)
       }
     })