import { watch } from 'vue';
|
import { isNil } from 'lodash-unified';
|
import { useVModel } from '@vueuse/core';
|
import '../../../utils/index.mjs';
|
import { genFileId } from './upload.mjs';
|
import { debugWarn, throwError } from '../../../utils/error.mjs';
|
|
const SCOPE = "ElUpload";
|
const revokeObjectURL = (file) => {
|
var _a;
|
if ((_a = file.url) == null ? void 0 : _a.startsWith("blob:")) {
|
URL.revokeObjectURL(file.url);
|
}
|
};
|
const useHandlers = (props, uploadRef) => {
|
const uploadFiles = useVModel(props, "fileList", void 0, { passive: true });
|
const getFile = (rawFile) => uploadFiles.value.find((file) => file.uid === rawFile.uid);
|
function abort(file) {
|
var _a;
|
(_a = uploadRef.value) == null ? void 0 : _a.abort(file);
|
}
|
function clearFiles(states = ["ready", "uploading", "success", "fail"]) {
|
uploadFiles.value = uploadFiles.value.filter((row) => !states.includes(row.status));
|
}
|
const handleError = (err, rawFile) => {
|
const file = getFile(rawFile);
|
if (!file)
|
return;
|
console.error(err);
|
file.status = "fail";
|
uploadFiles.value.splice(uploadFiles.value.indexOf(file), 1);
|
props.onError(err, file, uploadFiles.value);
|
props.onChange(file, uploadFiles.value);
|
};
|
const handleProgress = (evt, rawFile) => {
|
const file = getFile(rawFile);
|
if (!file)
|
return;
|
props.onProgress(evt, file, uploadFiles.value);
|
file.status = "uploading";
|
file.percentage = Math.round(evt.percent);
|
};
|
const handleSuccess = (response, rawFile) => {
|
const file = getFile(rawFile);
|
if (!file)
|
return;
|
file.status = "success";
|
file.response = response;
|
props.onSuccess(response, file, uploadFiles.value);
|
props.onChange(file, uploadFiles.value);
|
};
|
const handleStart = (file) => {
|
if (isNil(file.uid))
|
file.uid = genFileId();
|
const uploadFile = {
|
name: file.name,
|
percentage: 0,
|
status: "ready",
|
size: file.size,
|
raw: file,
|
uid: file.uid
|
};
|
if (props.listType === "picture-card" || props.listType === "picture") {
|
try {
|
uploadFile.url = URL.createObjectURL(file);
|
} catch (err) {
|
debugWarn(SCOPE, err.message);
|
props.onError(err, uploadFile, uploadFiles.value);
|
}
|
}
|
uploadFiles.value = [...uploadFiles.value, uploadFile];
|
props.onChange(uploadFile, uploadFiles.value);
|
};
|
const handleRemove = async (file) => {
|
const uploadFile = file instanceof File ? getFile(file) : file;
|
if (!uploadFile)
|
throwError(SCOPE, "file to be removed not found");
|
const doRemove = (file2) => {
|
abort(file2);
|
const fileList = uploadFiles.value;
|
fileList.splice(fileList.indexOf(file2), 1);
|
props.onRemove(file2, fileList);
|
revokeObjectURL(file2);
|
};
|
if (props.beforeRemove) {
|
const before = await props.beforeRemove(uploadFile, uploadFiles.value);
|
if (before !== false)
|
doRemove(uploadFile);
|
} else {
|
doRemove(uploadFile);
|
}
|
};
|
function submit() {
|
uploadFiles.value.filter(({ status }) => status === "ready").forEach(({ raw }) => {
|
var _a;
|
return raw && ((_a = uploadRef.value) == null ? void 0 : _a.upload(raw));
|
});
|
}
|
watch(() => props.listType, (val) => {
|
if (val !== "picture-card" && val !== "picture") {
|
return;
|
}
|
uploadFiles.value = uploadFiles.value.map((file) => {
|
const { raw, url } = file;
|
if (!url && raw) {
|
try {
|
file.url = URL.createObjectURL(raw);
|
} catch (err) {
|
props.onError(err, file, uploadFiles.value);
|
}
|
}
|
return file;
|
});
|
});
|
watch(uploadFiles, (files) => {
|
for (const file of files) {
|
file.uid || (file.uid = genFileId());
|
file.status || (file.status = "success");
|
}
|
}, { immediate: true, deep: true });
|
return {
|
uploadFiles,
|
abort,
|
clearFiles,
|
handleError,
|
handleProgress,
|
handleStart,
|
handleSuccess,
|
handleRemove,
|
submit
|
};
|
};
|
|
export { useHandlers };
|
//# sourceMappingURL=use-handlers.mjs.map
|
