You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
10 KiB
1 line
10 KiB
2 years ago
|
{"version":3,"file":"use-handlers.mjs","sources":["../../../../../../packages/components/upload/src/use-handlers.ts"],"sourcesContent":["import { watch } from 'vue'\nimport { isNil } from 'lodash-unified'\nimport { useVModel } from '@vueuse/core'\nimport { debugWarn, throwError } from '@element-plus/utils'\nimport { genFileId } from './upload'\nimport type { ShallowRef } from 'vue'\nimport type {\n UploadContentInstance,\n UploadContentProps,\n} from './upload-content'\nimport type {\n UploadFile,\n UploadFiles,\n UploadProps,\n UploadRawFile,\n UploadStatus,\n} from './upload'\n\nconst SCOPE = 'ElUpload'\n\nconst revokeObjectURL = (file: UploadFile) => {\n if (file.url?.startsWith('blob:')) {\n URL.revokeObjectURL(file.url)\n }\n}\n\nexport const useHandlers = (\n props: UploadProps,\n uploadRef: ShallowRef<UploadContentInstance | undefined>\n) => {\n const uploadFiles = useVModel(\n props as Omit<UploadProps, 'fileList'> & { fileList: UploadFiles },\n 'fileList',\n undefined,\n { passive: true }\n )\n\n const getFile = (rawFile: UploadRawFile) =>\n uploadFiles.value.find((file) => file.uid === rawFile.uid)\n\n function abort(file: UploadFile) {\n uploadRef.value?.abort(file)\n }\n\n function clearFiles(\n /** @default ['ready', 'uploading', 'success', 'fail'] */\n states: UploadStatus[] = ['ready', 'uploading', 'success', 'fail']\n ) {\n uploadFiles.value = uploadFiles.value.filter(\n (row) => !states.includes(row.status)\n )\n }\n\n const handleError: UploadContentProps['onError'] = (err, rawFile) => {\n const file = getFile(rawFile)\n if (!file) return\n\n console.error(err)\n file.status = 'fail'\n uploadFiles.value.splice(uploadFiles.value.indexOf(file), 1)\n props.onError(err, file, uploadFiles.value)\n props.onChange(file, uploadFiles.value)\n }\n\n const handleProgress: UploadContentProps['onProgress'] = (evt, rawFile) => {\n const file = getFile(rawFile)\n if (!file) return\n\n props.onProgress(evt, file, uploadFiles.value)\n file.status = 'uploading'\n file.percentage = Math.round(evt.percent)\n }\n\n const handleSuccess: UploadContentProps['onSuccess'] = (\n response,\n rawFile\n ) => {\n const file = getFile(rawFile)\n if (!file) return\n\n file.status = 'success'\n file.response = response\n props.onSuccess(response, file, uploadFiles.value)\n props.onChange(file, uploadFiles.value)\n }\n\n const handleStart: UploadContentProps['onStart'] = (file) => {\n if (isNil(file.uid)) file.uid = genFileId()\n const uploadFile: UploadFile = {\n name: file.name,\n percentage: 0,\n status: 'ready',\n size: file.size,\n raw: file,\n uid: file.uid,\n }\n if (props.listType === 'picture-card' || props.listType === 'picture') {\n try {\n uploadFile.url = URL.createObjectURL(file)\n } catch (err: unknown) {\n debugWarn(SCOPE, (err as Error).message)\n props.onError(err as Error, uploadFile, uploadFiles.value)\n }\n }\n uploadFiles.value = [...uploadFiles.value, uploadFile]\n props.onChange(uploadFile, uploadFiles.value)\n }\n\n const handleRemove: UploadContentProps['onRemove'] = async (\n file\n ): Promise<void> => {\n const uploadFile = file instanceof File ? getFile(file) : file\n if (!uploadFile) throwError(SCOPE, 'file to be removed not found')\n\n const doRemove = (file: UploadFile) => {\n abort(file)\n const fileList = uploadFiles.value\n fileList.splice(fileList.indexOf(file), 1)\n props.onRemove(file, fileList)\n revokeObjectURL(file)\n }\n\n if (props.beforeRemove) {\n const before = await props.beforeRemove(uploadFile, uploadFiles.value)\n if (before !== false) doRemove(uploadFile)\n } else {\n doRemove(uploadFile)\n }\n }\n\n function submit() {\n uploadFiles.value\n .filter(({ status }) => status === 'ready')\n .forEach(({ raw }) => raw && uploadRef.value?.upload(raw))\n }\n\n watch(\n () => props.listType,\n (val)
|