fix(react-native): set default content-type if no one provided

Author: nd0ut

Diff for: packages/upload-client/src/api/base.ts

@@ -14,7 +14,8 @@ import { retryIfFailed } from '../tools/retryIfFailed'
 /* Types */
 import { Uuid, ProgressCallback, Metadata } from './types'
 import { FailedResponse } from '../request/types'
-import { NodeFile, BrowserFile } from '../types'
+import { getContentType } from '../tools/getContentType'
+import { getFileName } from '../tools/getFileName'
 import { getStoreValue } from '../tools/getStoreValue'
 
 export type BaseResponse = {
@@ -82,9 +83,8 @@ export default function base(
         data: buildFormData({
           file: {
             data: file,
-            name: fileName || (file as File)?.name || defaultFilename,
-            contentType:
-              contentType || (file as File)?.type || defaultContentType
+            name: fileName || getFileName(file),
+            contentType: contentType || getContentType(file)
           },
           UPLOADCARE_PUB_KEY: publicKey,
           UPLOADCARE_STORE: getStoreValue(store),

Diff for: packages/upload-client/src/tools/getContentType.ts

@@ -0,0 +1,18 @@
+import { defaultContentType } from '../defaultSettings'
+import { SupportedFileInput } from '../types'
+import { isBlob, isFile, isReactNativeAsset } from './isFileData'
+
+export const getContentType = (file: SupportedFileInput): string => {
+  let contentType = ''
+  if (isBlob(file) || isFile(file) || isReactNativeAsset(file)) {
+    contentType = file.type
+  }
+  if (contentType) {
+    return contentType
+  }
+  console.warn(
+    `Cannot determine content type. Using default content type: ${defaultContentType}`,
+    file
+  )
+  return defaultContentType
+}

Diff for: packages/upload-client/src/tools/getFileName.ts

@@ -0,0 +1,23 @@
+import { defaultFilename } from '../defaultSettings'
+import { SupportedFileInput } from '../types'
+import { isBlob, isBuffer, isFile, isReactNativeAsset } from './isFileData'
+
+export const getFileName = (file: SupportedFileInput): string => {
+  let filename = ''
+
+  if (isFile(file) && file.name) {
+    filename = file.name
+  } else if (isBlob(file) || isBuffer(file)) {
+    filename = ''
+  } else if (isReactNativeAsset(file) && file.name) {
+    filename = file.name
+  }
+  if (filename) {
+    return filename
+  }
+  console.warn(
+    `Cannot determine filename. Using default filename: ${defaultFilename}`,
+    file
+  )
+  return defaultFilename
+}

Diff for: packages/upload-client/src/uploadFile/uploadMultipart.ts

@@ -21,7 +21,10 @@ import {
   ProgressCallback,
   UnknownProgressInfo
 } from '../api/types'
-import { NodeFile, BrowserFile } from '../types'
+import { getContentType } from '../tools/getContentType'
+import { getFileName } from '../tools/getFileName'
+import { getFileSize } from '../tools/getFileSize'
+import { SupportedFileInput } from '../types'
 
 export type MultipartOptions = {
   publicKey: string
@@ -125,8 +128,8 @@ const uploadMultipart = (
 
   return multipartStart(size, {
     publicKey,
-    contentType: contentType || (file as File).type || defaultContentType,
-    fileName: fileName || (file as File).name || defaultFilename,
+    contentType: contentType || getContentType(file),
+    fileName: fileName || getFileName(file),
     baseURL,
     secureSignature,
     secureExpire,

Diff for: packages/upload-client/test/tools/getContentType.test.ts

@@ -0,0 +1,32 @@
+/**
+ * @jest-environment jsdom
+ */
+import { getContentType } from '../../src/tools/getContentType'
+
+describe('getContentType', () => {
+  it('should return content type of Blob', () => {
+    const blob = new Blob([''], { type: 'text/plain' })
+    expect(getContentType(blob)).toEqual('text/plain')
+  })
+
+  it('should return content type of File', () => {
+    const file = new File([''], 'test.txt', { type: 'text/plain' })
+    expect(getContentType(file)).toEqual('text/plain')
+  })
+
+  it('should return content type of ReactNative asset', () => {
+    const asset = { uri: 'file://data', name: 'test.txt', type: 'text/plain' }
+    expect(getContentType(asset)).toEqual('text/plain')
+  })
+
+  it('should return fallback value if no type found', () => {
+    const blob = new Blob([''])
+    expect(getContentType(blob)).toEqual('application/octet-stream')
+
+    const file = new File([''], 'test.txt')
+    expect(getContentType(file)).toEqual('application/octet-stream')
+
+    const asset = { uri: 'file://data', name: 'test.txt', type: '' }
+    expect(getContentType(asset)).toEqual('application/octet-stream')
+  })
+})

Diff for: packages/upload-client/test/tools/getFileName.test.ts

@@ -0,0 +1,35 @@
+/**
+ * @jest-environment jsdom
+ */
+import { expect, jest } from '@jest/globals'
+import { getFileName } from '../../src/tools/getFileName'
+
+describe('getFileName', () => {
+  it('should return filename of File', () => {
+    const file = new File([''], 'test.txt')
+    expect(getFileName(file)).toEqual('test.txt')
+  })
+
+  it('should return filename of ReactNative asset', () => {
+    const asset = { uri: 'file://data', name: 'test.txt', type: 'text/plain' }
+    expect(getFileName(asset)).toEqual('test.txt')
+  })
+
+  it('should return fallback value if no filename found', () => {
+    const spy = jest.spyOn(console, 'warn').mockImplementation(() => ({}))
+
+    const blob = new Blob([''])
+    expect(getFileName(blob)).toEqual('original')
+
+    const file = new File([''], '')
+    expect(getFileName(file)).toEqual('original')
+
+    const buffer = Buffer.from('')
+    expect(getFileName(buffer)).toEqual('original')
+
+    const asset = { uri: 'file://data', name: '', type: 'text/plain' }
+    expect(getFileName(asset)).toEqual('original')
+
+    expect(spy).toBeCalledTimes(4)
+  })
+})