913 lines
29 KiB
JavaScript
913 lines
29 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { Button } from 'primereact/button';
|
|
import { Messages } from 'primereact/messages';
|
|
import { ProgressBar } from 'primereact/progressbar';
|
|
import { DomHandler, classNames, IconUtils, ObjectUtils } from 'primereact/utils';
|
|
import { Ripple } from 'primereact/ripple';
|
|
import { localeOption } from 'primereact/api';
|
|
|
|
function _arrayLikeToArray$1(arr, len) {
|
|
if (len == null || len > arr.length) len = arr.length;
|
|
|
|
for (var i = 0, arr2 = new Array(len); i < len; i++) {
|
|
arr2[i] = arr[i];
|
|
}
|
|
|
|
return arr2;
|
|
}
|
|
|
|
function _arrayWithoutHoles(arr) {
|
|
if (Array.isArray(arr)) return _arrayLikeToArray$1(arr);
|
|
}
|
|
|
|
function _iterableToArray(iter) {
|
|
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
|
|
}
|
|
|
|
function _unsupportedIterableToArray$1(o, minLen) {
|
|
if (!o) return;
|
|
if (typeof o === "string") return _arrayLikeToArray$1(o, minLen);
|
|
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
if (n === "Map" || n === "Set") return Array.from(o);
|
|
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen);
|
|
}
|
|
|
|
function _nonIterableSpread() {
|
|
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
}
|
|
|
|
function _toConsumableArray(arr) {
|
|
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableSpread();
|
|
}
|
|
|
|
function _classCallCheck(instance, Constructor) {
|
|
if (!(instance instanceof Constructor)) {
|
|
throw new TypeError("Cannot call a class as a function");
|
|
}
|
|
}
|
|
|
|
function _defineProperties(target, props) {
|
|
for (var i = 0; i < props.length; i++) {
|
|
var descriptor = props[i];
|
|
descriptor.enumerable = descriptor.enumerable || false;
|
|
descriptor.configurable = true;
|
|
if ("value" in descriptor) descriptor.writable = true;
|
|
Object.defineProperty(target, descriptor.key, descriptor);
|
|
}
|
|
}
|
|
|
|
function _createClass(Constructor, protoProps, staticProps) {
|
|
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
|
|
if (staticProps) _defineProperties(Constructor, staticProps);
|
|
Object.defineProperty(Constructor, "prototype", {
|
|
writable: false
|
|
});
|
|
return Constructor;
|
|
}
|
|
|
|
function _assertThisInitialized(self) {
|
|
if (self === void 0) {
|
|
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
|
|
}
|
|
|
|
return self;
|
|
}
|
|
|
|
function _setPrototypeOf(o, p) {
|
|
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
|
|
o.__proto__ = p;
|
|
return o;
|
|
};
|
|
|
|
return _setPrototypeOf(o, p);
|
|
}
|
|
|
|
function _inherits(subClass, superClass) {
|
|
if (typeof superClass !== "function" && superClass !== null) {
|
|
throw new TypeError("Super expression must either be null or a function");
|
|
}
|
|
|
|
subClass.prototype = Object.create(superClass && superClass.prototype, {
|
|
constructor: {
|
|
value: subClass,
|
|
writable: true,
|
|
configurable: true
|
|
}
|
|
});
|
|
Object.defineProperty(subClass, "prototype", {
|
|
writable: false
|
|
});
|
|
if (superClass) _setPrototypeOf(subClass, superClass);
|
|
}
|
|
|
|
function _typeof(obj) {
|
|
"@babel/helpers - typeof";
|
|
|
|
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
|
|
return typeof obj;
|
|
} : function (obj) {
|
|
return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
|
}, _typeof(obj);
|
|
}
|
|
|
|
function _possibleConstructorReturn(self, call) {
|
|
if (call && (_typeof(call) === "object" || typeof call === "function")) {
|
|
return call;
|
|
} else if (call !== void 0) {
|
|
throw new TypeError("Derived constructors may only return object or undefined");
|
|
}
|
|
|
|
return _assertThisInitialized(self);
|
|
}
|
|
|
|
function _getPrototypeOf(o) {
|
|
_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
|
|
return o.__proto__ || Object.getPrototypeOf(o);
|
|
};
|
|
return _getPrototypeOf(o);
|
|
}
|
|
|
|
function _defineProperty(obj, key, value) {
|
|
if (key in obj) {
|
|
Object.defineProperty(obj, key, {
|
|
value: value,
|
|
enumerable: true,
|
|
configurable: true,
|
|
writable: true
|
|
});
|
|
} else {
|
|
obj[key] = value;
|
|
}
|
|
|
|
return obj;
|
|
}
|
|
|
|
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
|
|
|
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
|
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
|
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
|
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
var FileUpload = /*#__PURE__*/function (_Component) {
|
|
_inherits(FileUpload, _Component);
|
|
|
|
var _super = _createSuper(FileUpload);
|
|
|
|
function FileUpload(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, FileUpload);
|
|
|
|
_this = _super.call(this, props);
|
|
_this.state = {
|
|
files: [],
|
|
msgs: [],
|
|
focused: false,
|
|
progress: 0
|
|
};
|
|
_this.choose = _this.choose.bind(_assertThisInitialized(_this));
|
|
_this.upload = _this.upload.bind(_assertThisInitialized(_this));
|
|
_this.clear = _this.clear.bind(_assertThisInitialized(_this));
|
|
_this.onFileSelect = _this.onFileSelect.bind(_assertThisInitialized(_this));
|
|
_this.onDragEnter = _this.onDragEnter.bind(_assertThisInitialized(_this));
|
|
_this.onDragOver = _this.onDragOver.bind(_assertThisInitialized(_this));
|
|
_this.onDragLeave = _this.onDragLeave.bind(_assertThisInitialized(_this));
|
|
_this.onDrop = _this.onDrop.bind(_assertThisInitialized(_this));
|
|
_this.onKeyDown = _this.onKeyDown.bind(_assertThisInitialized(_this));
|
|
_this.onFocus = _this.onFocus.bind(_assertThisInitialized(_this));
|
|
_this.onBlur = _this.onBlur.bind(_assertThisInitialized(_this));
|
|
_this.onSimpleUploaderClick = _this.onSimpleUploaderClick.bind(_assertThisInitialized(_this));
|
|
_this.duplicateIEEvent = false;
|
|
return _this;
|
|
}
|
|
|
|
_createClass(FileUpload, [{
|
|
key: "hasFiles",
|
|
value: function hasFiles() {
|
|
return this.state.files && this.state.files.length > 0;
|
|
}
|
|
}, {
|
|
key: "isImage",
|
|
value: function isImage(file) {
|
|
return /^image\//.test(file.type);
|
|
}
|
|
}, {
|
|
key: "chooseDisabled",
|
|
value: function chooseDisabled() {
|
|
return this.props.disabled || this.props.fileLimit && this.props.fileLimit <= this.state.files.length + this.uploadedFileCount;
|
|
}
|
|
}, {
|
|
key: "uploadDisabled",
|
|
value: function uploadDisabled() {
|
|
return this.props.disabled || !this.hasFiles();
|
|
}
|
|
}, {
|
|
key: "cancelDisabled",
|
|
value: function cancelDisabled() {
|
|
return this.props.disabled || !this.hasFiles();
|
|
}
|
|
}, {
|
|
key: "chooseButtonLabel",
|
|
value: function chooseButtonLabel() {
|
|
return this.props.chooseLabel || this.props.chooseOptions.label || localeOption('choose');
|
|
}
|
|
}, {
|
|
key: "uploadButtonLabel",
|
|
value: function uploadButtonLabel() {
|
|
return this.props.uploadLabel || this.props.uploadOptions.label || localeOption('upload');
|
|
}
|
|
}, {
|
|
key: "cancelButtonLabel",
|
|
value: function cancelButtonLabel() {
|
|
return this.props.cancelLabel || this.props.cancelOptions.label || localeOption('cancel');
|
|
}
|
|
}, {
|
|
key: "remove",
|
|
value: function remove(event, index) {
|
|
this.clearInputElement();
|
|
|
|
var currentFiles = _toConsumableArray(this.state.files);
|
|
|
|
var removedFile = this.state.files[index];
|
|
currentFiles.splice(index, 1);
|
|
this.setState({
|
|
files: currentFiles
|
|
});
|
|
|
|
if (this.props.onRemove) {
|
|
this.props.onRemove({
|
|
originalEvent: event,
|
|
file: removedFile
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "clearInputElement",
|
|
value: function clearInputElement() {
|
|
if (this.fileInput) {
|
|
this.fileInput.value = '';
|
|
}
|
|
}
|
|
}, {
|
|
key: "clearIEInput",
|
|
value: function clearIEInput() {
|
|
if (this.fileInput) {
|
|
this.duplicateIEEvent = true; //IE11 fix to prevent onFileChange trigger again
|
|
|
|
this.fileInput.value = '';
|
|
}
|
|
}
|
|
}, {
|
|
key: "formatSize",
|
|
value: function formatSize(bytes) {
|
|
if (bytes === 0) {
|
|
return '0 B';
|
|
}
|
|
|
|
var k = 1000,
|
|
dm = 3,
|
|
sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
|
|
i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
|
|
}
|
|
}, {
|
|
key: "onFileSelect",
|
|
value: function onFileSelect(event) {
|
|
var _this2 = this;
|
|
|
|
if (event.type !== 'drop' && this.isIE11() && this.duplicateIEEvent) {
|
|
this.duplicateIEEvent = false;
|
|
return;
|
|
}
|
|
|
|
this.setState({
|
|
msgs: []
|
|
});
|
|
this.files = this.state.files ? _toConsumableArray(this.state.files) : [];
|
|
var files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
|
|
|
|
for (var i = 0; i < files.length; i++) {
|
|
var file = files[i];
|
|
|
|
if (!this.isFileSelected(file)) {
|
|
if (this.validate(file)) {
|
|
if (this.isImage(file)) {
|
|
file.objectURL = window.URL.createObjectURL(file);
|
|
}
|
|
|
|
this.files.push(file);
|
|
}
|
|
}
|
|
}
|
|
|
|
this.setState({
|
|
files: this.files
|
|
}, function () {
|
|
if (_this2.hasFiles() && _this2.props.auto) {
|
|
_this2.upload();
|
|
}
|
|
});
|
|
|
|
if (this.props.onSelect) {
|
|
this.props.onSelect({
|
|
originalEvent: event,
|
|
files: files
|
|
});
|
|
}
|
|
|
|
if (event.type !== 'drop' && this.isIE11()) {
|
|
this.clearIEInput();
|
|
} else {
|
|
this.clearInputElement();
|
|
}
|
|
|
|
if (this.props.mode === 'basic' && this.files.length > 0) {
|
|
this.fileInput.style.display = 'none';
|
|
}
|
|
}
|
|
}, {
|
|
key: "isFileSelected",
|
|
value: function isFileSelected(file) {
|
|
var _iterator = _createForOfIteratorHelper(this.state.files),
|
|
_step;
|
|
|
|
try {
|
|
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
var sFile = _step.value;
|
|
if (sFile.name + sFile.type + sFile.size === file.name + file.type + file.size) return true;
|
|
}
|
|
} catch (err) {
|
|
_iterator.e(err);
|
|
} finally {
|
|
_iterator.f();
|
|
}
|
|
|
|
return false;
|
|
}
|
|
}, {
|
|
key: "isIE11",
|
|
value: function isIE11() {
|
|
return !!window['MSInputMethodContext'] && !!document['documentMode'];
|
|
}
|
|
}, {
|
|
key: "validate",
|
|
value: function validate(file) {
|
|
if (this.props.maxFileSize && file.size > this.props.maxFileSize) {
|
|
var message = {
|
|
severity: 'error',
|
|
summary: this.props.invalidFileSizeMessageSummary.replace('{0}', file.name),
|
|
detail: this.props.invalidFileSizeMessageDetail.replace('{0}', this.formatSize(this.props.maxFileSize))
|
|
};
|
|
|
|
if (this.props.mode === 'advanced') {
|
|
this.messagesUI.show(message);
|
|
}
|
|
|
|
if (this.props.onValidationFail) {
|
|
this.props.onValidationFail(file);
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
}, {
|
|
key: "upload",
|
|
value: function upload() {
|
|
var _this3 = this;
|
|
|
|
if (this.props.customUpload) {
|
|
if (this.props.fileLimit) {
|
|
this.uploadedFileCount += this.state.files.length;
|
|
}
|
|
|
|
if (this.props.uploadHandler) {
|
|
this.props.uploadHandler({
|
|
files: this.state.files,
|
|
options: {
|
|
clear: this.clear,
|
|
props: this.props
|
|
}
|
|
});
|
|
}
|
|
} else {
|
|
this.setState({
|
|
msgs: []
|
|
});
|
|
var xhr = new XMLHttpRequest();
|
|
var formData = new FormData();
|
|
|
|
if (this.props.onBeforeUpload) {
|
|
this.props.onBeforeUpload({
|
|
'xhr': xhr,
|
|
'formData': formData
|
|
});
|
|
}
|
|
|
|
var _iterator2 = _createForOfIteratorHelper(this.state.files),
|
|
_step2;
|
|
|
|
try {
|
|
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
|
|
var file = _step2.value;
|
|
formData.append(this.props.name, file, file.name);
|
|
}
|
|
} catch (err) {
|
|
_iterator2.e(err);
|
|
} finally {
|
|
_iterator2.f();
|
|
}
|
|
|
|
xhr.upload.addEventListener('progress', function (event) {
|
|
if (event.lengthComputable) {
|
|
_this3.setState({
|
|
progress: Math.round(event.loaded * 100 / event.total)
|
|
}, function () {
|
|
if (_this3.props.onProgress) {
|
|
_this3.props.onProgress({
|
|
originalEvent: event,
|
|
progress: _this3.state.progress
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
xhr.onreadystatechange = function () {
|
|
if (xhr.readyState === 4) {
|
|
_this3.setState({
|
|
progress: 0
|
|
});
|
|
|
|
if (xhr.status >= 200 && xhr.status < 300) {
|
|
if (_this3.props.fileLimit) {
|
|
_this3.uploadedFileCount += _this3.state.files.length;
|
|
}
|
|
|
|
if (_this3.props.onUpload) {
|
|
_this3.props.onUpload({
|
|
xhr: xhr,
|
|
files: _this3.state.files
|
|
});
|
|
}
|
|
} else {
|
|
if (_this3.props.onError) {
|
|
_this3.props.onError({
|
|
xhr: xhr,
|
|
files: _this3.state.files
|
|
});
|
|
}
|
|
}
|
|
|
|
_this3.clear();
|
|
}
|
|
};
|
|
|
|
xhr.open('POST', this.props.url, true);
|
|
|
|
if (this.props.onBeforeSend) {
|
|
this.props.onBeforeSend({
|
|
'xhr': xhr,
|
|
'formData': formData
|
|
});
|
|
}
|
|
|
|
xhr.withCredentials = this.props.withCredentials;
|
|
xhr.send(formData);
|
|
}
|
|
}
|
|
}, {
|
|
key: "clear",
|
|
value: function clear() {
|
|
this.setState({
|
|
files: []
|
|
});
|
|
|
|
if (this.props.onClear) {
|
|
this.props.onClear();
|
|
}
|
|
|
|
this.clearInputElement();
|
|
}
|
|
}, {
|
|
key: "choose",
|
|
value: function choose() {
|
|
this.fileInput.click();
|
|
}
|
|
}, {
|
|
key: "onFocus",
|
|
value: function onFocus() {
|
|
this.setState({
|
|
focused: true
|
|
});
|
|
}
|
|
}, {
|
|
key: "onBlur",
|
|
value: function onBlur() {
|
|
this.setState({
|
|
focused: false
|
|
});
|
|
}
|
|
}, {
|
|
key: "onKeyDown",
|
|
value: function onKeyDown(event) {
|
|
if (event.which === 13) {
|
|
// enter
|
|
this.choose();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDragEnter",
|
|
value: function onDragEnter(event) {
|
|
if (!this.props.disabled) {
|
|
event.dataTransfer.dropEffect = "copy";
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDragOver",
|
|
value: function onDragOver(event) {
|
|
if (!this.props.disabled) {
|
|
event.dataTransfer.dropEffect = "copy";
|
|
DomHandler.addClass(this.content, 'p-fileupload-highlight');
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDragLeave",
|
|
value: function onDragLeave(event) {
|
|
if (!this.props.disabled) {
|
|
event.dataTransfer.dropEffect = "copy";
|
|
DomHandler.removeClass(this.content, 'p-fileupload-highlight');
|
|
}
|
|
}
|
|
}, {
|
|
key: "onDrop",
|
|
value: function onDrop(event) {
|
|
if (!this.props.disabled) {
|
|
DomHandler.removeClass(this.content, 'p-fileupload-highlight');
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
var files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
|
|
var allowDrop = this.props.multiple || files && files.length === 0;
|
|
|
|
if (allowDrop) {
|
|
this.onFileSelect(event);
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: "onSimpleUploaderClick",
|
|
value: function onSimpleUploaderClick() {
|
|
if (this.hasFiles()) {
|
|
this.upload();
|
|
} else {
|
|
this.fileInput.click();
|
|
}
|
|
}
|
|
}, {
|
|
key: "renderChooseButton",
|
|
value: function renderChooseButton() {
|
|
var _this4 = this;
|
|
|
|
var _this$props$chooseOpt = this.props.chooseOptions,
|
|
className = _this$props$chooseOpt.className,
|
|
style = _this$props$chooseOpt.style,
|
|
icon = _this$props$chooseOpt.icon,
|
|
iconOnly = _this$props$chooseOpt.iconOnly;
|
|
var chooseClassName = classNames('p-button p-fileupload-choose p-component', {
|
|
'p-disabled': this.props.disabled,
|
|
'p-focus': this.state.focused,
|
|
'p-button-icon-only': iconOnly
|
|
}, className);
|
|
var labelClassName = 'p-button-label p-clickable';
|
|
var label = iconOnly ? /*#__PURE__*/React.createElement("span", {
|
|
className: labelClassName,
|
|
dangerouslySetInnerHTML: {
|
|
__html: " "
|
|
}
|
|
}) : /*#__PURE__*/React.createElement("span", {
|
|
className: labelClassName
|
|
}, this.chooseButtonLabel());
|
|
return /*#__PURE__*/React.createElement("span", {
|
|
className: chooseClassName,
|
|
style: style,
|
|
onClick: this.choose,
|
|
onKeyDown: this.onKeyDown,
|
|
onFocus: this.onFocus,
|
|
onBlur: this.onBlur,
|
|
tabIndex: 0
|
|
}, /*#__PURE__*/React.createElement("input", {
|
|
ref: function ref(el) {
|
|
return _this4.fileInput = el;
|
|
},
|
|
type: "file",
|
|
onChange: this.onFileSelect,
|
|
multiple: this.props.multiple,
|
|
accept: this.props.accept,
|
|
disabled: this.chooseDisabled()
|
|
}), IconUtils.getJSXIcon(icon || 'pi pi-fw pi-plus', {
|
|
className: 'p-button-icon p-button-icon-left p-clickable'
|
|
}, {
|
|
props: this.props
|
|
}), label, /*#__PURE__*/React.createElement(Ripple, null));
|
|
}
|
|
}, {
|
|
key: "renderFile",
|
|
value: function renderFile(file, index) {
|
|
var _this5 = this;
|
|
|
|
var preview = this.isImage(file) ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
|
|
alt: file.name,
|
|
role: "presentation",
|
|
src: file.objectURL,
|
|
width: this.props.previewWidth
|
|
})) : null;
|
|
var fileName = /*#__PURE__*/React.createElement("div", {
|
|
className: "p-fileupload-filename"
|
|
}, file.name);
|
|
var size = /*#__PURE__*/React.createElement("div", null, this.formatSize(file.size));
|
|
var removeButton = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
|
|
type: "button",
|
|
icon: "pi pi-times",
|
|
onClick: function onClick(e) {
|
|
return _this5.remove(e, index);
|
|
}
|
|
}));
|
|
var content = /*#__PURE__*/React.createElement(React.Fragment, null, preview, fileName, size, removeButton);
|
|
|
|
if (this.props.itemTemplate) {
|
|
var defaultContentOptions = {
|
|
onRemove: function onRemove(event) {
|
|
return _this5.remove(event, index);
|
|
},
|
|
previewElement: preview,
|
|
fileNameElement: fileName,
|
|
sizeElement: size,
|
|
removeElement: removeButton,
|
|
formatSize: this.formatSize(file.size),
|
|
files: this.state.files,
|
|
index: index,
|
|
element: content,
|
|
props: this.props
|
|
};
|
|
content = ObjectUtils.getJSXElement(this.props.itemTemplate, file, defaultContentOptions);
|
|
}
|
|
|
|
return /*#__PURE__*/React.createElement("div", {
|
|
className: "p-fileupload-row",
|
|
key: file.name + file.type + file.size
|
|
}, content);
|
|
}
|
|
}, {
|
|
key: "renderFiles",
|
|
value: function renderFiles() {
|
|
var _this6 = this;
|
|
|
|
return /*#__PURE__*/React.createElement("div", {
|
|
className: "p-fileupload-files"
|
|
}, this.state.files.map(function (file, index) {
|
|
return _this6.renderFile(file, index);
|
|
}));
|
|
}
|
|
}, {
|
|
key: "renderEmptyContent",
|
|
value: function renderEmptyContent() {
|
|
if (this.props.emptyTemplate && !this.hasFiles()) {
|
|
return ObjectUtils.getJSXElement(this.props.emptyTemplate, this.props);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}, {
|
|
key: "renderProgressBarContent",
|
|
value: function renderProgressBarContent() {
|
|
if (this.props.progressBarTemplate) {
|
|
return ObjectUtils.getJSXElement(this.props.progressBarTemplate, this.props);
|
|
}
|
|
|
|
return /*#__PURE__*/React.createElement(ProgressBar, {
|
|
value: this.state.progress,
|
|
showValue: false
|
|
});
|
|
}
|
|
}, {
|
|
key: "renderAdvanced",
|
|
value: function renderAdvanced() {
|
|
var _this7 = this;
|
|
|
|
var className = classNames('p-fileupload p-fileupload-advanced p-component', this.props.className);
|
|
var headerClassName = classNames('p-fileupload-buttonbar', this.props.headerClassName);
|
|
var contentClassName = classNames('p-fileupload-content', this.props.contentClassName);
|
|
var uploadButton, cancelButton, filesList, progressBar;
|
|
var chooseButton = this.renderChooseButton();
|
|
var emptyContent = this.renderEmptyContent();
|
|
|
|
if (!this.props.auto) {
|
|
var uploadOptions = this.props.uploadOptions;
|
|
var cancelOptions = this.props.cancelOptions;
|
|
var uploadLabel = !uploadOptions.iconOnly ? this.uploadButtonLabel() : '';
|
|
var cancelLabel = !cancelOptions.iconOnly ? this.cancelButtonLabel() : '';
|
|
uploadButton = /*#__PURE__*/React.createElement(Button, {
|
|
type: "button",
|
|
label: uploadLabel,
|
|
icon: uploadOptions.icon || 'pi pi-upload',
|
|
onClick: this.upload,
|
|
disabled: this.uploadDisabled(),
|
|
style: uploadOptions.style,
|
|
className: uploadOptions.className
|
|
});
|
|
cancelButton = /*#__PURE__*/React.createElement(Button, {
|
|
type: "button",
|
|
label: cancelLabel,
|
|
icon: cancelOptions.icon || 'pi pi-times',
|
|
onClick: this.clear,
|
|
disabled: this.cancelDisabled(),
|
|
style: cancelOptions.style,
|
|
className: cancelOptions.className
|
|
});
|
|
}
|
|
|
|
if (this.hasFiles()) {
|
|
filesList = this.renderFiles();
|
|
progressBar = this.renderProgressBarContent();
|
|
}
|
|
|
|
var header = /*#__PURE__*/React.createElement("div", {
|
|
className: headerClassName,
|
|
style: this.props.headerStyle
|
|
}, chooseButton, uploadButton, cancelButton);
|
|
|
|
if (this.props.headerTemplate) {
|
|
var defaultContentOptions = {
|
|
className: headerClassName,
|
|
chooseButton: chooseButton,
|
|
uploadButton: uploadButton,
|
|
cancelButton: cancelButton,
|
|
element: header,
|
|
props: this.props
|
|
};
|
|
header = ObjectUtils.getJSXElement(this.props.headerTemplate, defaultContentOptions);
|
|
}
|
|
|
|
return /*#__PURE__*/React.createElement("div", {
|
|
id: this.props.id,
|
|
className: className,
|
|
style: this.props.style
|
|
}, header, /*#__PURE__*/React.createElement("div", {
|
|
ref: function ref(el) {
|
|
_this7.content = el;
|
|
},
|
|
className: contentClassName,
|
|
style: this.props.contentStyle,
|
|
onDragEnter: this.onDragEnter,
|
|
onDragOver: this.onDragOver,
|
|
onDragLeave: this.onDragLeave,
|
|
onDrop: this.onDrop
|
|
}, progressBar, /*#__PURE__*/React.createElement(Messages, {
|
|
ref: function ref(el) {
|
|
return _this7.messagesUI = el;
|
|
}
|
|
}), filesList, emptyContent));
|
|
}
|
|
}, {
|
|
key: "renderBasic",
|
|
value: function renderBasic() {
|
|
var _this8 = this;
|
|
|
|
var hasFiles = this.hasFiles();
|
|
var chooseOptions = this.props.chooseOptions;
|
|
var className = classNames('p-fileupload p-fileupload-basic p-component', this.props.className);
|
|
var buttonClassName = classNames('p-button p-component p-fileupload-choose', {
|
|
'p-fileupload-choose-selected': hasFiles,
|
|
'p-disabled': this.props.disabled,
|
|
'p-focus': this.state.focused
|
|
}, chooseOptions.className);
|
|
var chooseIcon = chooseOptions.icon || classNames({
|
|
'pi pi-plus': !chooseOptions.icon && (!hasFiles || this.props.auto),
|
|
'pi pi-upload': !chooseOptions.icon && hasFiles && !this.props.auto
|
|
});
|
|
var labelClassName = 'p-button-label p-clickable';
|
|
var chooseLabel = chooseOptions.iconOnly ? /*#__PURE__*/React.createElement("span", {
|
|
className: labelClassName,
|
|
dangerouslySetInnerHTML: {
|
|
__html: " "
|
|
}
|
|
}) : /*#__PURE__*/React.createElement("span", {
|
|
className: labelClassName
|
|
}, this.chooseButtonLabel());
|
|
var label = this.props.auto ? chooseLabel : /*#__PURE__*/React.createElement("span", {
|
|
className: labelClassName
|
|
}, hasFiles ? this.state.files[0].name : chooseLabel);
|
|
var icon = IconUtils.getJSXIcon(chooseIcon, {
|
|
className: 'p-button-icon p-button-icon-left'
|
|
}, {
|
|
props: this.props,
|
|
hasFiles: hasFiles
|
|
});
|
|
return /*#__PURE__*/React.createElement("div", {
|
|
className: className,
|
|
style: this.props.style
|
|
}, /*#__PURE__*/React.createElement(Messages, {
|
|
ref: function ref(el) {
|
|
return _this8.messagesUI = el;
|
|
}
|
|
}), /*#__PURE__*/React.createElement("span", {
|
|
className: buttonClassName,
|
|
style: chooseOptions.style,
|
|
onMouseUp: this.onSimpleUploaderClick,
|
|
onKeyDown: this.onKeyDown,
|
|
onFocus: this.onFocus,
|
|
onBlur: this.onBlur,
|
|
tabIndex: 0
|
|
}, icon, label, !hasFiles && /*#__PURE__*/React.createElement("input", {
|
|
ref: function ref(el) {
|
|
return _this8.fileInput = el;
|
|
},
|
|
type: "file",
|
|
accept: this.props.accept,
|
|
multiple: this.props.multiple,
|
|
disabled: this.props.disabled,
|
|
onChange: this.onFileSelect
|
|
}), /*#__PURE__*/React.createElement(Ripple, null)));
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
if (this.props.mode === 'advanced') return this.renderAdvanced();else if (this.props.mode === 'basic') return this.renderBasic();
|
|
}
|
|
}]);
|
|
|
|
return FileUpload;
|
|
}(Component);
|
|
|
|
_defineProperty(FileUpload, "defaultProps", {
|
|
id: null,
|
|
name: null,
|
|
url: null,
|
|
mode: 'advanced',
|
|
multiple: false,
|
|
accept: null,
|
|
disabled: false,
|
|
auto: false,
|
|
maxFileSize: null,
|
|
invalidFileSizeMessageSummary: '{0}: Invalid file size, ',
|
|
invalidFileSizeMessageDetail: 'maximum upload size is {0}.',
|
|
style: null,
|
|
className: null,
|
|
widthCredentials: false,
|
|
previewWidth: 50,
|
|
chooseLabel: null,
|
|
uploadLabel: null,
|
|
cancelLabel: null,
|
|
chooseOptions: {
|
|
label: null,
|
|
icon: null,
|
|
iconOnly: false,
|
|
className: null,
|
|
style: null
|
|
},
|
|
uploadOptions: {
|
|
label: null,
|
|
icon: null,
|
|
iconOnly: false,
|
|
className: null,
|
|
style: null
|
|
},
|
|
cancelOptions: {
|
|
label: null,
|
|
icon: null,
|
|
iconOnly: false,
|
|
className: null,
|
|
style: null
|
|
},
|
|
customUpload: false,
|
|
headerClassName: null,
|
|
headerStyle: null,
|
|
contentClassName: null,
|
|
contentStyle: null,
|
|
headerTemplate: null,
|
|
itemTemplate: null,
|
|
emptyTemplate: null,
|
|
progressBarTemplate: null,
|
|
onBeforeUpload: null,
|
|
onBeforeSend: null,
|
|
onUpload: null,
|
|
onError: null,
|
|
onClear: null,
|
|
onSelect: null,
|
|
onProgress: null,
|
|
onValidationFail: null,
|
|
uploadHandler: null,
|
|
onRemove: null
|
|
});
|
|
|
|
export { FileUpload };
|