feat: support react-native asset file input

Author: nd0ut

packages/upload-client/src/UploadClient.ts

@@ -25,7 +25,7 @@ import { UploadcareGroup } from './tools/UploadcareGroup'
 import { FileFromOptions, uploadFile } from './uploadFile'
 
 import { FileInfo, GroupId, GroupInfo, Token, Url, Uuid } from './api/types'
-import { Settings, BrowserFile, NodeFile } from './types'
+import { SupportedFileInput, BrowserFile, NodeFile, Settings } from './types'
 import uploadFileGroup, { GroupFromOptions } from './uploadFileGroup'
 
 /**
@@ -55,7 +55,7 @@ export default class UploadClient {
   }
 
   base(
-    file: NodeFile | BrowserFile,
+    file: SupportedFileInput,
     options: Partial<BaseOptions> = {}
   ): Promise<BaseResponse> {
     const settings = this.getSettings()
@@ -115,7 +115,7 @@ export default class UploadClient {
   }
 
   multipartUpload(
-    part: Buffer | Blob,
+    part: BrowserFile | NodeFile,
     url: MultipartPart,
     options: Partial<MultipartUploadOptions> = {}
   ): Promise<MultipartUploadResponse> {
@@ -141,7 +141,7 @@ export default class UploadClient {
   }
 
   uploadFile(
-    data: NodeFile | BrowserFile | Url | Uuid,
+    data: SupportedFileInput | Url | Uuid,
     options: Partial<FileFromOptions> = {}
   ): Promise<UploadcareFile> {
     const settings = this.getSettings()
@@ -150,7 +150,7 @@ export default class UploadClient {
   }
 
   uploadFileGroup(
-    data: (NodeFile | BrowserFile)[] | Url[] | Uuid[],
+    data: SupportedFileInput[] | Url[] | Uuid[],
     options: Partial<FileFromOptions & GroupFromOptions> = {}
   ): Promise<UploadcareGroup> {
     const settings = this.getSettings()

packages/upload-client/src/api/base.ts

@@ -1,22 +1,19 @@
+import { camelizeKeys, CustomUserAgent } from '@uploadcare/api-client-utils'
+import { defaultSettings } from '../defaultSettings'
 import request from '../request/request.node'
 import buildFormData from '../tools/buildFormData'
+import { UploadClientError } from '../tools/errors'
 import getUrl from '../tools/getUrl'
-import {
-  defaultSettings,
-  defaultFilename,
-  defaultContentType
-} from '../defaultSettings'
 import { getUserAgent } from '../tools/getUserAgent'
-import { camelizeKeys, CustomUserAgent } from '@uploadcare/api-client-utils'
-import { UploadClientError } from '../tools/errors'
 import { retryIfFailed } from '../tools/retryIfFailed'
 
 /* Types */
-import { Uuid, ProgressCallback, Metadata } from './types'
 import { FailedResponse } from '../request/types'
 import { getContentType } from '../tools/getContentType'
 import { getFileName } from '../tools/getFileName'
 import { getStoreValue } from '../tools/getStoreValue'
+import { SupportedFileInput } from '../types'
+import { Metadata, ProgressCallback, Uuid } from './types'
 
 export type BaseResponse = {
   file: Uuid
@@ -51,7 +48,7 @@ export type BaseOptions = {
  * Can be canceled and has progress.
  */
 export default function base(
-  file: NodeFile | BrowserFile,
+  file: SupportedFileInput,
   {
     publicKey,
     fileName,

packages/upload-client/src/api/multipartUpload.ts

@@ -2,10 +2,10 @@ import { MultipartPart } from './multipartStart'
 
 import request from '../request/request.node'
 
-import { ComputableProgressInfo, ProgressCallback } from './types'
-import { NodeFile, BrowserFile } from '../types'
-import { retryIfFailed } from '../tools/retryIfFailed'
 import defaultSettings from '../defaultSettings'
+import { retryIfFailed } from '../tools/retryIfFailed'
+import { SupportedFileInput } from '../types'
+import { ComputableProgressInfo, ProgressCallback } from './types'
 
 export type MultipartUploadOptions = {
   publicKey?: string
@@ -25,7 +25,7 @@ export type MultipartUploadResponse = {
  */
 
 export default function multipartUpload(
-  part: NodeFile | BrowserFile,
+  part: SupportedFileInput,
   url: MultipartPart,
   {
     signal,

packages/upload-client/src/index.ts

@@ -32,7 +32,7 @@ export { UploadcareFile } from './tools/UploadcareFile'
 export { UploadcareGroup } from './tools/UploadcareGroup'
 export { UploadClientError } from './tools/errors'
 export { Settings } from './types'
-export { NodeFile, BrowserFile } from './types'
+export { NodeFile, BrowserFile, ReactNativeAsset } from './types'
 export { BaseOptions, BaseResponse } from './api/base'
 export { FileInfo, GroupId, GroupInfo, Token, Url, Uuid } from './api/types'
 export { InfoOptions } from './api/info'

packages/upload-client/src/request/request.node.ts

@@ -2,12 +2,13 @@ import NodeFormData from 'form-data'
 
 import http from 'http'
 import https from 'https'
-import { parse } from 'url'
 import { Readable, Transform } from 'stream'
+import { parse } from 'url'
 
-import { onCancel, CancelError } from '@uploadcare/api-client-utils'
-import { RequestOptions, RequestResponse } from './types'
+import { CancelError, onCancel } from '@uploadcare/api-client-utils'
 import { ProgressCallback } from '../api/types'
+import { SupportedFileInput } from '../types'
+import { RequestOptions, RequestResponse } from './types'
 
 // ProgressEmitter is a simple PassThrough-style transform stream which keeps
 // track of the number of bytes which have been piped through it and will
@@ -44,7 +45,7 @@ const getLength = (formData: NodeFormData): Promise<number> =>
   })
 
 function isFormData(
-  formData?: NodeFormData | FormData | Buffer | Blob
+  formData?: NodeFormData | FormData | SupportedFileInput
 ): formData is NodeFormData {
   if (formData && formData.toString() === '[object FormData]') {
     return true
@@ -54,7 +55,7 @@ function isFormData(
 }
 
 function isReadable(
-  data?: Readable | NodeFormData | FormData | Buffer | Blob,
+  data?: Readable | NodeFormData | FormData | SupportedFileInput,
   isFormData?: boolean
 ): data is Readable {
   if (data && (data instanceof Readable || isFormData)) {

packages/upload-client/src/request/types.ts

@@ -4,7 +4,7 @@ import {
   ProgressCallback,
   UnknownProgressInfo
 } from '../api/types'
-import { BrowserFile, NodeFile } from '../types'
+import { SupportedFileInput } from '../types'
 
 export type Headers = {
   [key: string]: string | string[] | undefined
@@ -14,7 +14,7 @@ export type RequestOptions = {
   method?: string
   url: string
   query?: string
-  data?: NodeFormData | FormData | BrowserFile | NodeFile
+  data?: NodeFormData | FormData | SupportedFileInput
   headers?: Headers
   signal?: AbortSignal
   onProgress?: ProgressCallback<ComputableProgressInfo | UnknownProgressInfo>
@@ -24,7 +24,7 @@ export type ErrorRequestInfo = {
   method?: string
   url: string
   query?: string
-  data?: NodeFormData | FormData | BrowserFile | NodeFile
+  data?: NodeFormData | FormData | SupportedFileInput
   headers?: Headers
 }
 

packages/upload-client/src/tools/buildFormData.ts

@@ -1,8 +1,8 @@
 import getFormData, { getFileOptions, transformFile } from './getFormData.node'
 
 import NodeFormData from 'form-data'
-import { BrowserFile, NodeFile } from '../types'
-import { isFileData } from '../uploadFile/types'
+import { SupportedFileInput } from '../types'
+import { isFileData } from './isFileData'
 
 /**
  * Constructs FormData instance.
@@ -21,7 +21,7 @@ interface FileOptions {
 }
 
 interface FileType extends FileOptions {
-  data: BrowserFile | NodeFile
+  data: SupportedFileInput
 }
 
 type InputValue = FileType | SimpleType | ObjectType
@@ -33,7 +33,7 @@ type FormDataOptions = {
 type Params = Array<
   [
     string,
-    string | BrowserFile | NodeFile,
+    string | SupportedFileInput,
     ...(string | { [key: string]: string | undefined })[]
   ]
 >

packages/upload-client/src/tools/getBlobFromReactNativeAsset.ts

@@ -0,0 +1,14 @@
+import { ReactNativeAsset } from '../types'
+
+const memo: WeakMap<ReactNativeAsset, Blob> = new WeakMap()
+
+export const getBlobFromReactNativeAsset = async (
+  asset: ReactNativeAsset
+): Promise<Blob> => {
+  if (memo.has(asset)) {
+    return memo.get(asset) as Blob
+  }
+  const blob = await fetch(asset.uri).then((res) => res.blob())
+  memo.set(asset, blob)
+  return blob
+}

packages/upload-client/src/tools/getFileSize.ts

@@ -0,0 +1,17 @@
+import { SupportedFileInput } from '../types'
+import { getBlobFromReactNativeAsset } from './getBlobFromReactNativeAsset'
+import { isBlob, isBuffer, isFile, isReactNativeAsset } from './isFileData'
+
+export const getFileSize = async (file: SupportedFileInput) => {
+  if (isBuffer(file)) {
+    return file.length
+  }
+  if (isFile(file) || isBlob(file)) {
+    return file.size
+  }
+  if (isReactNativeAsset(file)) {
+    const blob = await getBlobFromReactNativeAsset(file)
+    return blob.size
+  }
+  throw new Error(`Unknown file type. Cannot determine file size.`)
+}

packages/upload-client/src/tools/getFormData.react-native.ts

@@ -1,19 +1,26 @@
-import { BrowserFile, NodeFile } from '../types'
-import {
-  FileTransformer,
-  GetFormDataFileAppendOptions,
-  ReactNativeAsset
-} from './types'
+import { SupportedFileInput, ReactNativeAsset } from '../types'
+import { isBlob, isReactNativeAsset } from './isFileData'
+import { FileTransformer, GetFormDataFileAppendOptions } from './types'
 
 export const getFileOptions: GetFormDataFileAppendOptions = () => []
 
 export const transformFile: FileTransformer = (
-  file: BrowserFile | NodeFile,
+  file: SupportedFileInput,
   name: string,
   contentType: string
 ): ReactNativeAsset => {
-  const uri = URL.createObjectURL(file as BrowserFile)
-  return { uri, name, type: contentType }
+  if (isReactNativeAsset(file)) {
+    return {
+      uri: file.uri,
+      name: file.name || name,
+      type: file.type || contentType
+    }
+  }
+  if (isBlob(file)) {
+    const uri = URL.createObjectURL(file)
+    return { uri, name: name, type: file.type || contentType }
+  }
+  throw new Error(`Unsupported file type.`)
 }
 
 export default (): FormData => new FormData()

packages/upload-client/src/tools/isFileData.ts

@@ -0,0 +1,29 @@
+import { SupportedFileInput, ReactNativeAsset } from '../types'
+
+export const isBlob = (data: unknown): data is Blob => {
+  return typeof Blob !== 'undefined' && data instanceof Blob
+}
+
+export const isFile = (data: unknown): data is File => {
+  return typeof File !== 'undefined' && data instanceof File
+}
+
+export const isBuffer = (data: unknown): data is Buffer => {
+  return typeof Buffer !== 'undefined' && data instanceof Buffer
+}
+
+export const isReactNativeAsset = (data: unknown): data is ReactNativeAsset => {
+  return (
+    !!data &&
+    typeof data === 'object' &&
+    !Array.isArray(data) &&
+    'uri' in data &&
+    typeof (data as Record<'uri', unknown>).uri === 'string'
+  )
+}
+
+export const isFileData = (data: unknown): data is SupportedFileInput => {
+  return (
+    isBlob(data) || isFile(data) || isBuffer(data) || isReactNativeAsset(data)
+  )
+}

packages/upload-client/src/tools/isMultipart.ts

@@ -1,15 +1,5 @@
 import defaultSettings from '../defaultSettings'
 
-/* Types */
-import { NodeFile, BrowserFile } from '../types'
-
-/**
- * Get file size.
- */
-export const getFileSize = (file: NodeFile | BrowserFile): number => {
-  return (file as Buffer).length || (file as Blob).size
-}
-
 /**
  * Check if FileData is multipart data.
  */

packages/upload-client/src/tools/types.ts

@@ -1,12 +1,10 @@
-import { BrowserFile, NodeFile } from '../types'
-
-export type ReactNativeAsset = { type: string; uri: string; name?: string }
+import { SupportedFileInput } from '../types'
 
 export type FileTransformer = (
-  file: NodeFile | BrowserFile,
+  file: SupportedFileInput,
   name: string,
   contentType: string
-) => NodeFile | BrowserFile | ReactNativeAsset
+) => SupportedFileInput
 
 export type GetFormDataFileAppendOptions = (options: {
   [key: string]: string | undefined

packages/upload-client/src/types.ts

@@ -30,4 +30,13 @@ export interface Settings extends Partial<DefaultSettings> {
 }
 
 export type BrowserFile = Blob | File
-export type NodeFile = Buffer // | NodeJS.ReadableStream
+export type NodeFile = Buffer
+export type ReactNativeAsset = {
+  type: string
+  uri: string
+  name?: string
+}
+export type ReactNativeFile = ReactNativeAsset | Blob
+
+export type SupportedFileInput = BrowserFile | NodeFile | ReactNativeFile
+export type AnySlicable = BrowserFile | NodeFile