feat: add expected server response type option (#338)

* refactor(ajax): do not insert `accept` headers

* feat: add expected server response type option

* docs: add `responseType`

* chore: update examples

README.md

@@ -87,6 +87,8 @@ export class AppHomeComponent {
 
 - `endpoint` URL to create new uploads. Default value: `'/upload'`
 
+- `responseType` Expected server response type
+
 - `headers` Headers to be appended to each HTTP request
 
 - `metadata` Custom metadata to be added to the uploaded files

src/app/tus/tus.component.ts

@@ -24,7 +24,8 @@ export class TusComponent {
     metadata(file): Record<string, string> {
       return { original_name: file.name };
     },
-    retryConfig: { timeout: 60_000 }
+    retryConfig: { timeout: 60_000 },
+    responseType: 'json'
   };
   constructor(private authService: AuthService) {}
 

src/uploadx/lib/ajax.ts

@@ -2,7 +2,6 @@ import { InjectionToken } from '@angular/core';
 import { RequestOptions } from './interfaces';
 
 export interface AjaxRequestConfig extends RequestOptions {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   [x: string]: any;
 
   data?: BodyInit | null;
@@ -49,7 +48,6 @@ export class UploadxAjax {
       xhr.timeout = timeout;
       withCredentials && (xhr.withCredentials = true);
       responseType && (xhr.responseType = responseType);
-      responseType === 'json' && !headers['Accept'] && (headers['Accept'] = 'application/json');
       Object.keys(headers).forEach(key => xhr.setRequestHeader(key, String(headers[key])));
       xhr.upload.onprogress = onUploadProgress || null;
       xhr.onerror =
@@ -61,7 +59,7 @@ export class UploadxAjax {
           };
       xhr.onload = () => {
         const response = {
-          data: this.getResponseBody<T>(xhr, responseType === 'json'),
+          data: this.getResponseBody<T>(xhr),
           status: xhr.status,
           headers: this.getResponseHeaders(xhr)
         };
@@ -81,12 +79,17 @@ export class UploadxAjax {
     }, {});
   }
 
-  getResponseBody<T = string>(xhr: XMLHttpRequest, json?: boolean): T {
-    let body = 'response' in (xhr as XMLHttpRequest) ? xhr.response : xhr.responseText;
-    if (body && json && typeof body === 'string') {
-      try {
-        body = JSON.parse(body);
-      } catch {}
+  getResponseBody<T>(xhr: XMLHttpRequest): T {
+    if (xhr.responseType === 'document') {
+      return 'response' in xhr ? xhr.response : xhr.responseXML;
+    }
+    let body = 'response' in xhr ? xhr.response : xhr.responseText;
+    if (xhr.responseType === 'json') {
+      if (body && typeof body === 'string') {
+        try {
+          body = JSON.parse(body);
+        } catch {}
+      }
     }
     return body;
   }

src/uploadx/lib/interfaces.ts

@@ -117,6 +117,10 @@ export interface UploaderOptions extends UploadItem {
   /** Adaptive chunk size limit */
   maxChunkSize?: number;
   withCredentials?: boolean;
+  /**
+   * Set the expected server response type
+   */
+  responseType?: 'json' | 'text' | 'document';
   /**
    * Function called before every request
    */

src/uploadx/lib/uploader.ts

@@ -54,7 +54,7 @@ export abstract class Uploader implements UploadState {
   retry: RetryHandler;
   canceler = new Canceler();
   /** Set HttpRequest responseType */
-  responseType?: 'json' | 'text';
+  responseType?: 'json' | 'text' | 'document';
   private _progressEventCount = 0;
   private readonly _authorize: AuthorizeRequest;
   private readonly _prerequest: PreRequest;
@@ -194,7 +194,7 @@ export abstract class Uploader implements UploadState {
       headers: { ...req.headers, ...headers },
       url,
       data: body,
-      responseType: this.responseType,
+      responseType: this.options.responseType ?? this.responseType,
       withCredentials: !!this.options.withCredentials,
       canceler: this.canceler,
       validateStatus: () => true,

src/uploadx/lib/uploaderx.ts

@@ -8,7 +8,7 @@ import { resolveUrl } from './utils';
  * @see {@link https://developers.google.com/drive/api/v3/manage-uploads#resumable|Google Drive API documentation}
  */
 export class UploaderX extends Uploader {
-  responseType = 'json' as 'json';
+  responseType = 'json' as const;
 
   async getFileUrl(): Promise<string> {
     const headers = {

uploader-examples/multipart-form-data.ts

@@ -11,8 +11,6 @@ import { resolveUrl, Uploader } from 'ngx-uploadx';
  *   };
  */
 export class MultiPartFormData extends Uploader {
-  responseType = 'json' as 'json';
-
   async getFileUrl(): Promise<string> {
     this.offset = 0;
     const formData: FormData = new FormData();

uploader-examples/multipart-multer.ts

@@ -12,8 +12,6 @@ import { Uploader } from 'ngx-uploadx';
  *   };
  */
 export class Multer extends Uploader {
-  responseType = 'json' as 'json';
-
   async getFileUrl(): Promise<string> {
     this.offset = 0;
     const formData: FormData = new FormData();