import { defineComponent, shallowRef, openBlock, createElementBlock, normalizeClass, unref, withKeys, withModifiers, createBlock, withCtx, renderSlot, createElementVNode } from 'vue';
|
import { isObject } from '@vue/shared';
|
import { cloneDeep, isEqual } from 'lodash-unified';
|
import '../../../hooks/index.mjs';
|
import '../../../utils/index.mjs';
|
import '../../form/index.mjs';
|
import UploadDragger from './upload-dragger2.mjs';
|
import { uploadContentProps } from './upload-content.mjs';
|
import { genFileId } from './upload.mjs';
|
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
|
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
|
import { useFormDisabled } from '../../form/src/hooks/use-form-common-props.mjs';
|
import { entriesOf } from '../../../utils/objects.mjs';
|
|
const _hoisted_1 = ["onKeydown"];
|
const _hoisted_2 = ["name", "multiple", "accept"];
|
const __default__ = defineComponent({
|
name: "ElUploadContent",
|
inheritAttrs: false
|
});
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
...__default__,
|
props: uploadContentProps,
|
setup(__props, { expose }) {
|
const props = __props;
|
const ns = useNamespace("upload");
|
const disabled = useFormDisabled();
|
const requests = shallowRef({});
|
const inputRef = shallowRef();
|
const uploadFiles = (files) => {
|
if (files.length === 0)
|
return;
|
const { autoUpload, limit, fileList, multiple, onStart, onExceed } = props;
|
if (limit && fileList.length + files.length > limit) {
|
onExceed(files, fileList);
|
return;
|
}
|
if (!multiple) {
|
files = files.slice(0, 1);
|
}
|
for (const file of files) {
|
const rawFile = file;
|
rawFile.uid = genFileId();
|
onStart(rawFile);
|
if (autoUpload)
|
upload(rawFile);
|
}
|
};
|
const upload = async (rawFile) => {
|
inputRef.value.value = "";
|
if (!props.beforeUpload) {
|
return doUpload(rawFile);
|
}
|
let hookResult;
|
let beforeData = {};
|
try {
|
const originData = props.data;
|
const beforeUploadPromise = props.beforeUpload(rawFile);
|
beforeData = isObject(props.data) ? cloneDeep(props.data) : props.data;
|
hookResult = await beforeUploadPromise;
|
if (isObject(props.data) && isEqual(originData, beforeData)) {
|
beforeData = cloneDeep(props.data);
|
}
|
} catch (e) {
|
hookResult = false;
|
}
|
if (hookResult === false) {
|
props.onRemove(rawFile);
|
return;
|
}
|
let file = rawFile;
|
if (hookResult instanceof Blob) {
|
if (hookResult instanceof File) {
|
file = hookResult;
|
} else {
|
file = new File([hookResult], rawFile.name, {
|
type: rawFile.type
|
});
|
}
|
}
|
doUpload(Object.assign(file, {
|
uid: rawFile.uid
|
}), beforeData);
|
};
|
const doUpload = (rawFile, beforeData) => {
|
const {
|
headers,
|
data,
|
method,
|
withCredentials,
|
name: filename,
|
action,
|
onProgress,
|
onSuccess,
|
onError,
|
httpRequest
|
} = props;
|
const { uid } = rawFile;
|
const options = {
|
headers: headers || {},
|
withCredentials,
|
file: rawFile,
|
data: beforeData != null ? beforeData : data,
|
method,
|
filename,
|
action,
|
onProgress: (evt) => {
|
onProgress(evt, rawFile);
|
},
|
onSuccess: (res) => {
|
onSuccess(res, rawFile);
|
delete requests.value[uid];
|
},
|
onError: (err) => {
|
onError(err, rawFile);
|
delete requests.value[uid];
|
}
|
};
|
const request = httpRequest(options);
|
requests.value[uid] = request;
|
if (request instanceof Promise) {
|
request.then(options.onSuccess, options.onError);
|
}
|
};
|
const handleChange = (e) => {
|
const files = e.target.files;
|
if (!files)
|
return;
|
uploadFiles(Array.from(files));
|
};
|
const handleClick = () => {
|
if (!disabled.value) {
|
inputRef.value.value = "";
|
inputRef.value.click();
|
}
|
};
|
const handleKeydown = () => {
|
handleClick();
|
};
|
const abort = (file) => {
|
const _reqs = entriesOf(requests.value).filter(file ? ([uid]) => String(file.uid) === uid : () => true);
|
_reqs.forEach(([uid, req]) => {
|
if (req instanceof XMLHttpRequest)
|
req.abort();
|
delete requests.value[uid];
|
});
|
};
|
expose({
|
abort,
|
upload
|
});
|
return (_ctx, _cache) => {
|
return openBlock(), createElementBlock("div", {
|
class: normalizeClass([unref(ns).b(), unref(ns).m(_ctx.listType), unref(ns).is("drag", _ctx.drag)]),
|
tabindex: "0",
|
onClick: handleClick,
|
onKeydown: withKeys(withModifiers(handleKeydown, ["self"]), ["enter", "space"])
|
}, [
|
_ctx.drag ? (openBlock(), createBlock(UploadDragger, {
|
key: 0,
|
disabled: unref(disabled),
|
onFile: uploadFiles
|
}, {
|
default: withCtx(() => [
|
renderSlot(_ctx.$slots, "default")
|
]),
|
_: 3
|
}, 8, ["disabled"])) : renderSlot(_ctx.$slots, "default", { key: 1 }),
|
createElementVNode("input", {
|
ref_key: "inputRef",
|
ref: inputRef,
|
class: normalizeClass(unref(ns).e("input")),
|
name: _ctx.name,
|
multiple: _ctx.multiple,
|
accept: _ctx.accept,
|
type: "file",
|
onChange: handleChange,
|
onClick: _cache[0] || (_cache[0] = withModifiers(() => {
|
}, ["stop"]))
|
}, null, 42, _hoisted_2)
|
], 42, _hoisted_1);
|
};
|
}
|
});
|
var UploadContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/upload/src/upload-content.vue"]]);
|
|
export { UploadContent as default };
|
//# sourceMappingURL=upload-content2.mjs.map
|
