@modern-kit/react
Version:
1 lines • 6.33 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","sources":["../../../src/hooks/useFileReader/useFileReader.utils.ts","../../../src/hooks/useFileReader/index.ts"],"sourcesContent":["export interface FileContent {\n status: 'fulfilled' | 'rejected';\n readValue: string | ArrayBuffer;\n originFile: File | null;\n}\n\nexport function isFile(file: FileList | File): file is File {\n return file instanceof File;\n}\n\nexport function isFileList(file: FileList | File): file is FileList {\n return file instanceof FileList;\n}\n\nexport function inValidFileType(file: FileList | File) {\n return !isFile(file) && !isFileList(file);\n}\n\nexport function getFiles(file: File | FileList, accepts: string[]) {\n const files = isFile(file) ? [file] : Array.from(file);\n\n return accepts.length > 0\n ? files.filter((file) => accepts.includes(file.type))\n : files;\n}\n\nexport function getReaderPromise(reader: FileReader, file: File) {\n return new Promise<FileContent['readValue'] | null>((resolve, reject) => {\n reader.onload = () => {\n resolve(reader.result);\n };\n reader.onerror = () => {\n reject(`Failed to read file ${file.name}`);\n };\n });\n}\n","import { useState } from 'react';\nimport {\n type FileContent,\n getFiles,\n getReaderPromise,\n inValidFileType,\n} from './useFileReader.utils';\n\ntype ReadType = 'readAsText' | 'readAsDataURL' | 'readAsArrayBuffer';\n\ninterface ReadFileOptions {\n file: FileList | File;\n readType: ReadType;\n accepts?: string[];\n}\n\ninterface UseFileReaderReturnType {\n readFile: ({\n file,\n readType,\n accepts,\n }: ReadFileOptions) => Promise<FileContent[]>;\n fileContents: FileContent[];\n isLoading: boolean;\n}\n\n/**\n * @description `File` 객체를 원하는 읽기 메서드(`readAsText`,`readAsDataURL`,`readAsArrayBuffer`)로 읽고, 읽은 파일 컨텐츠를 반환하는 커스텀 훅입니다.\n *\n * @returns {UseFileReaderReturnType} - 파일 읽기 함수, 파일 내용, 로딩 상태를 포함하는 객체를 반환합니다.\n * @property {{file, readType, accepts}: ReadFileOptions} readFile - 파일을 읽는 비동기 함수입니다.\n * - `file`: 읽을 파일 또는 파일 목록입니다.\n * - `readType`: 파일을 읽는 방법을 지정합니다. ('readAsText', 'readAsDataURL', 'readAsArrayBuffer' 중 하나)\n * - `accepts`: 허용되는 파일 유형의 배열입니다.\n * @property {FileContent[]} fileContents - 읽은 파일의 내용을 저장하는 상태입니다.\n * @property {boolean} isLoading - 파일을 읽는 동안 로딩 상태를 나타내는 상태입니다.\n *\n * @example\n * ```tsx\n * const { readFile, fileContents, isLoading } = useFileReader();\n *\n * const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n * if(!e.target.files) return;\n * readFile({ file: e.target.files, readType: 'readAsText' });\n * }\n * ```\n */\nexport function useFileReader(): UseFileReaderReturnType {\n const [fileContents, setFileContents] = useState<FileContent[]>([]);\n const [isLoading, setIsLoading] = useState(false);\n\n const readFile = async ({\n file,\n readType,\n accepts = [],\n }: ReadFileOptions) => {\n if (inValidFileType(file)) {\n return [];\n }\n\n const files = getFiles(file, accepts);\n\n setIsLoading(true);\n setFileContents([]);\n\n const readerPromises = files.map((file) => {\n const reader = new FileReader();\n\n try {\n reader[readType](file);\n } catch {\n return Promise.reject(`Failed to read file ${file.name}`);\n }\n\n return getReaderPromise(reader, file);\n });\n\n const settledPromises = await Promise.allSettled(readerPromises);\n const contents: FileContent[] = settledPromises.map((el, idx) => {\n const isFulfilled = el.status === 'fulfilled';\n\n return {\n status: el.status,\n readValue: isFulfilled ? el.value : el.reason,\n originFile: isFulfilled ? files[idx] : null,\n };\n });\n\n setFileContents(contents);\n setIsLoading(false);\n\n return contents;\n };\n\n return { readFile, fileContents, isLoading };\n}\n"],"names":["file"],"mappings":"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"}