')
.addClass('attachment-preview')
.addClass(className)
.append(
this.getDetailPreview(name, type, id)
);
let containerClassName = 'attachment-block-container';
if (this.previewSize === 'large') {
containerClassName += ' attachment-block-container-large';
}
if (this.previewSize === 'small') {
containerClassName += ' attachment-block-container-small';
}
return $('
')
.addClass(containerClassName)
.append(
$('
')
.addClass('attachment-block attachment-block-preview')
.append($item)
)
.get(0).outerHTML;
}
const container = document.createElement('div');
container.classList.add('attachment-block');
container.append(
(() => {
const span = document.createElement('span');
span.classList.add('fas', 'fa-paperclip', 'text-soft', 'small');
return span;
})(),
(() => {
const a = document.createElement('a');
a.target = '_blank';
a.textContent = name;
a.href = this.getDownloadUrl(id);
return a;
})(),
);
return container.outerHTML;
}
getImageUrl(id, size) {
let url = this.getBasePath() + '?entryPoint=image&id=' + id;
if (size) {
url += '&size=' + size;
}
if (this.getUser().get('portalId')) {
url += '&portalId=' + this.getUser().get('portalId');
}
return url;
}
getDownloadUrl(id) {
let url = this.getBasePath() + '?entryPoint=download&id=' + id;
if (this.getUser().get('portalId')) {
url += '&portalId=' + this.getUser().get('portalId');
}
return url;
}
deleteAttachment() {
const id = this.model.get(this.idName);
const o = {};
o[this.idName] = null;
o[this.nameName] = null;
this.model.set(o);
this.$attachment.empty();
if (id) {
if (this.model.isNew()) {
this.getModelFactory().create('Attachment', (attachment) => {
attachment.id = id;
attachment.destroy();
});
}
}
}
setAttachment(attachment, ui) {
const o = {};
o[this.idName] = attachment.id;
o[this.nameName] = attachment.get('name');
this.model.set(o, {ui: ui});
}
getMaxFileSize() {
let maxFileSize = this.params.maxFileSize || 0;
const noChunk = !this.getConfig().get('attachmentUploadChunkSize');
const attachmentUploadMaxSize = this.getConfig().get('attachmentUploadMaxSize') || 0;
const appMaxUploadSize = this.getHelper().getAppParam('maxUploadSize') || 0;
if (!maxFileSize || maxFileSize > attachmentUploadMaxSize) {
maxFileSize = attachmentUploadMaxSize;
}
if (noChunk && maxFileSize > appMaxUploadSize) {
maxFileSize = appMaxUploadSize;
}
return maxFileSize;
}
/**
* @param {File} file
*/
uploadFile(file) {
let isCanceled = false;
let exceedsMaxFileSize = false;
const maxFileSize = this.getMaxFileSize();
if (maxFileSize && file.size > maxFileSize * 1024 * 1024) {
exceedsMaxFileSize = true;
}
if (exceedsMaxFileSize) {
const msg = this.translate('fieldMaxFileSizeError', 'messages')
.replace('{field}', this.getLabelText())
.replace('{max}', maxFileSize);
this.showValidationMessage(msg, '.attachment-button label');
return;
}
this.isUploading = true;
const uploadHelper = new FileUpload();
this.getModelFactory().create('Attachment', attachment => {
const $attachmentBox = this.addAttachmentBox(file.name, file.type);
const $uploadingMsg = $attachmentBox.parent().find('.uploading-message');
this.$el.find('.attachment-button').addClass('hidden');
const mediator = {};
$attachmentBox.find('.remove-attachment').on('click.uploading', () => {
isCanceled = true;
this.isUploading = false;
this.$el.find('.attachment-button').removeClass('hidden');
this.$el.find('input.file').val(null);
mediator.isCanceled = true;
});
attachment.set('role', 'Attachment');
attachment.set('relatedType', this.model.entityType);
attachment.set('field', this.name);
this.handleUploadingFile(file).then(file => {
uploadHelper
.upload(file, attachment, {
afterChunkUpload: (size) => {
const msg = Math.floor((size / file.size) * 100) + '%';
$uploadingMsg.html(msg);
},
afterAttachmentSave: (attachment) => {
$attachmentBox.attr('data-id', attachment.id);
},
mediator: mediator,
})
.then(() => {
if (isCanceled) {
return;
}
if (!this.isUploading) {
return;
}
this.setAttachment(attachment, true);
$attachmentBox.trigger('ready');
this.isUploading = false;
setTimeout(() => {
if (
document.activeElement &&
document.activeElement.tagName !== 'BODY'
) {
return;
}
const $a = this.$el.find('.preview a');
$a.focus();
}, 50);
})
.catch(() => {
if (mediator.isCanceled) {
return;
}
$attachmentBox.remove();
this.$el.find('.uploading-message').remove();
this.$el.find('.attachment-button').removeClass('hidden');
this.isUploading = false;
});
});
});
}
/**
* @protected
* @param {File} file
* @return {Promise}
*/
handleUploadingFile(file) {
return new Promise(resolve => resolve(file));
}
getBoxPreviewHtml(name, type, id) {
const $text = $('').text(name);
if (!id) {
return $text.get(0).outerHTML;
}
if (this.showPreview) {
const html = this.getEditPreview(name, type, id);
if (html) {
return html;
}
}
const url = this.getBasePath() + '?entryPoint=download&id=' + id;
return $('')
.attr('href', url)
.attr('target', '_BLANK')
.text(name)
.get(0).outerHTML;
}
addAttachmentBox(name, type, id) {
this.$attachment.empty();
const $remove = $('')
.attr('role', 'button')
.attr('tabindex', '0')
.addClass('remove-attachment pull-right')
.append(
$('').addClass('fas fa-times')
);
const previewHtml = this.getBoxPreviewHtml(name, type, id);
const $att = $('
')
.addClass('gray-box')
.append($remove)
.append(
$('')
.addClass('preview')
.append($(previewHtml))
);
const $container = $('
').append($att);
this.$attachment.append($container);
if (id) {
return $att;
}
const $loading = $('')
.addClass('small uploading-message')
.text(this.translate('Uploading...'));
$container.append($loading);
$att.on('ready', () => {
const id = this.model.get(this.idName);
const previewHtml = this.getBoxPreviewHtml(name, type, id);
$att.find('.preview').html(previewHtml);
$loading.html(this.translate('Ready'));
if ($att.find('.preview').find('img').length) {
$loading.remove();
}
});
return $att;
}
/**
* @private
* @param {string} source
*/
insertFromSource(source) {
const helper = new AttachmentInsertSourceFromHelper(this);
helper.insert({
source: source,
onInsert: models => {
models.forEach(model => this.setAttachment(model));
},
});
}
fetch() {
const data = {};
data[this.idName] = this.model.get(this.idName);
return data;
}
}
export default FileFieldView;