Skip to content
Snippets Groups Projects
Commit 9b0e1980 authored by Tasso Evangelista's avatar Tasso Evangelista Committed by Guilherme Gazzo
Browse files

[FIX] Remove failed upload messages when switching rooms (#11132) 

Closes #9440
parent 3e6f24f5
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
packages/rocketchat-ui/client/lib/fileUpload.js
+ 142
− 158
View file @ 9b0e1980
/* globals fileUploadHandler, Handlebars, fileUpload, modal */
/* globals fileUploadHandler, Handlebars, fileUpload, modal, t */
/* exported fileUpload */
import _ from 'underscore';
import s from 'underscore.string';
function readAsDataURL(file, callback) {
const readAsDataURL = (file, callback) => {
const reader = new FileReader();
reader.onload = ev => callback(ev.target.result, file);
reader.onload = e => callback(e.target.result, file);
return reader.readAsDataURL(file);
}
};
function getUploadPreview(file, callback) {
const showUploadPreview = (file, callback) => {
// If greater then 10MB don't try and show a preview
if (file.file.size > (10 * 1000000)) {
return callback(file, null);
} else if (file.file.type == null) {
callback(file, null);
} else if ((file.file.type.indexOf('audio') > -1) || (file.file.type.indexOf('video') > -1) || (file.file.type.indexOf('image') > -1)) {
file.type = file.file.type.split('/')[0];
return readAsDataURL(file.file, content => callback(file, content));
} else {
return callback(file, null);
}
}
function formatBytes(bytes, decimals) {
if (bytes === 0) {
return '0 Bytes';
if (file.file.type == null) {
return callback(file, null);
}
const k = 1000;
const dm = (decimals + 1) || 3;
const sizes = [
'Bytes',
'KB',
'MB',
'GB',
'TB',
'PB'
];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return `${ parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) } ${ sizes[i] }`;
}
fileUpload = function(filesToUpload) {
const roomId = Session.get('openedRoom');
const files = [].concat(filesToUpload);
function consume() {
const file = files.pop();
if ((file == null)) {
modal.close();
return;
}
if (!RocketChat.fileUploadIsValidContentType(file.file.type)) {
modal.open({
title: t('FileUpload_MediaType_NotAccepted'),
text: file.file.type || `*.${ s.strRightBack(file.file.name, '.') }`,
type: 'error',
timer: 3000
});
return;
}
if ((file.file.type.indexOf('audio') > -1) || (file.file.type.indexOf('video') > -1) || (file.file.type.indexOf('image') > -1)) {
file.type = file.file.type.split('/')[0];
if (file.file.size === 0) {
modal.open({
title: t('FileUpload_File_Empty'),
type: 'error',
timer: 1000
});
return;
}
return readAsDataURL(file.file, content => callback(file, content));
}
return getUploadPreview(file, function(file, preview) {
let text = '';
return callback(file, null);
};
if (file.type === 'audio') {
text = `\
const getAudioUploadPreview = (file, preview) => `\
<div class='upload-preview'>
<audio style="width: 100%;" controls="controls">
<source src="${ preview }" type="audio/wav">
......@@ -96,8 +43,8 @@ fileUpload = function(filesToUpload) {
<input class="rc-input__element" id='file-description' style='display: inherit;' value='' placeholder='${ t('Upload_file_description') }'>
</div>
</div>`;
} else if (file.type === 'video') {
text = `\
const getVideoUploadPreview = (file, preview) => `\
<div class='upload-preview'>
<video style="width: 100%;" controls="controls">
<source src="${ preview }" type="video/webm">
......@@ -112,8 +59,8 @@ fileUpload = function(filesToUpload) {
<input class="rc-input__element" id='file-description' style='display: inherit;' value='' placeholder='${ t('Upload_file_description') }'>
</div>
</div>`;
} else if (file.type === 'image') {
text = `\
const getImageUploadPreview = (file, preview) => `\
<div class='upload-preview'>
<div class='upload-preview-file' style='background-image: url(${ preview })'></div>
</div>
......@@ -125,26 +72,93 @@ fileUpload = function(filesToUpload) {
<input class="rc-input__element" id='file-description' style='display: inherit;' value='' placeholder='${ t('Upload_file_description') }'>
</div>
</div>`;
} else {
const fileSize = formatBytes(file.file.size);
text = `\
const formatBytes = (bytes, decimals) => {
if (bytes === 0) {
return '0 Bytes';
}
const k = 1000;
const dm = (decimals + 1) || 3;
const sizes = [
'Bytes',
'KB',
'MB',
'GB',
'TB',
'PB'
];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return `${ parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) } ${ sizes[i] }`;
};
const getGenericUploadPreview = (file) => `\
<div class='upload-preview'>
<div>${ Handlebars._escape(file.name) } - ${ fileSize }</div>
<div>${ Handlebars._escape(file.name) } - ${ formatBytes(file.file.size) }</div>
</div>
<div class='upload-preview-title'>
<div class="rc-input__wrapper">
<input class="rc-input__element" id='file-name' style='display: inherit;' value='${ Handlebars._escape(file.name) }' placeholder='${ t('Upload_file_name') }'>
</div>
<div class="rc-input__wrapper">
<input class="rc-input__element" id='file-description' style='display: inherit;' value='' placeholder='${ t('Upload_file_description') }'>
</div>
<div class="rc-input__wrapper">
<input class="rc-input__element" id='file-name' style='display: inherit;' value='${ Handlebars._escape(file.name) }' placeholder='${ t('Upload_file_name') }'>
</div>
<div class="rc-input__wrapper">
<input class="rc-input__element" id='file-description' style='display: inherit;' value='' placeholder='${ t('Upload_file_description') }'>
</div>
</div>`;
}
const getUploadPreview = (file, preview) => {
if (file.type === 'audio') {
return getAudioUploadPreview(file, preview);
}
if (file.type === 'video') {
return getVideoUploadPreview(file, preview);
}
if (file.type === 'image') {
return getImageUploadPreview(file, preview);
}
return getGenericUploadPreview(file, preview);
};
fileUpload = (files) => {
files = [].concat(files);
const roomId = Session.get('openedRoom');
const uploadNextFile = () => {
const file = files.pop();
if (!file) {
modal.close();
return;
}
if (!RocketChat.fileUploadIsValidContentType(file.file.type)) {
modal.open({
title: t('FileUpload_MediaType_NotAccepted'),
text: file.file.type || `*.${ s.strRightBack(file.file.name, '.') }`,
type: 'error',
timer: 3000
});
return;
}
if (file.file.size === 0) {
modal.open({
title: t('FileUpload_File_Empty'),
type: 'error',
timer: 1000
});
return;
}
showUploadPreview(file, (file, preview) => {
return modal.open({
title: t('Upload_file_question'),
text,
text: getUploadPreview(file, preview),
showCancelButton: true,
closeOnConfirm: false,
closeOnCancel: false,
......@@ -152,7 +166,10 @@ fileUpload = function(filesToUpload) {
cancelButtonText: t('Cancel'),
html: true,
onRendered: () => $('#file-name').focus()
}, function(isConfirm) {
}, (isConfirm) => {
if (!isConfirm) {
return;
}
const record = {
name: document.getElementById('file-name').value || file.name || file.file.name,
......@@ -162,98 +179,65 @@ fileUpload = function(filesToUpload) {
description: document.getElementById('file-description').value
};
consume();
if (!isConfirm) {
return;
}
const upload = fileUploadHandler('Uploads', record, file.file);
let uploading = Session.get('uploading') || [];
uploading.push({
uploadNextFile();
const uploads = Session.get('uploading') || [];
uploads.push({
id: upload.id,
name: upload.getFileName(),
percentage: 0
});
Session.set('uploading', uploading);
upload.onProgress = function(progress) {
uploading = Session.get('uploading');
const item = _.findWhere(uploading, {id: upload.id});
if (item != null) {
item.percentage = Math.round(progress * 100) || 0;
return Session.set('uploading', uploading);
}
Session.set('uploading', uploads);
upload.onProgress = (progress) => {
const uploads = Session.get('uploading') || [];
uploads.filter(u => u.id === upload.id).forEach(u => {
u.percentage = Math.round(progress * 100) || 0;
});
Session.set('uploading', uploads);
};
upload.start(function(error, file, storage) {
upload.start((error, file, storage) => {
if (error) {
let uploading = Session.get('uploading');
if (!Array.isArray(uploading)) {
uploading = [];
}
const item = _.findWhere(uploading, { id: upload.id });
if (_.isObject(item)) {
item.error = error.message;
item.percentage = 0;
} else {
uploading.push({
error: error.error,
percentage: 0
});
}
Session.set('uploading', uploading);
const uploads = Session.get('uploading') || [];
uploads.filter(u => u.id === upload.id).forEach(u => {
u.error = error.message;
u.percentage = 0;
});
Session.set('uploading', uploads);
return;
}
if (file) {
Meteor.call('sendFileMessage', roomId, storage, file, () => {
Meteor.setTimeout(() => {
const uploading = Session.get('uploading');
if (uploading !== null) {
const item = _.findWhere(uploading, {
id: upload.id
});
return Session.set('uploading', _.without(uploading, item));
}
}, 2000);
});
if (!file) {
return;
}
Meteor.call('sendFileMessage', roomId, storage, file, () => {
Meteor.setTimeout(() => {
const uploads = Session.get('uploading') || [];
Session.set('uploading', uploads.filter(u => u.id !== upload.id));
}, 2000);
});
});
Tracker.autorun(function(c) {
const cancel = Session.get(`uploading-cancel-${ upload.id }`);
if (cancel) {
let item;
upload.stop();
c.stop();
uploading = Session.get('uploading');
if (uploading != null) {
item = _.findWhere(uploading, {id: upload.id});
if (item != null) {
item.percentage = 0;
}
Session.set('uploading', uploading);
}
return Meteor.setTimeout(function() {
uploading = Session.get('uploading');
if (uploading != null) {
item = _.findWhere(uploading, {id: upload.id});
return Session.set('uploading', _.without(uploading, item));
}
}, 1000);
Tracker.autorun((computation) => {
const isCanceling = Session.get(`uploading-cancel-${ upload.id }`);
if (!isCanceling) {
return;
}
computation.stop();
upload.stop();
const uploads = Session.get('uploading') || {};
Session.set('uploading', uploads.filter(u => u.id !== upload.id));
});
});
});
}
};
consume();
uploadNextFile();
};
packages/rocketchat-ui/client/views/app/room.js
+ 16
− 1
View file @ 9b0e1980
......@@ -122,6 +122,16 @@ const mountPopover = (e, i, outerContext) => {
popover.open(config);
};
const wipeFailedUploads = () => {
const uploads = Session.get('uploading');
if (uploads) {
Session.set('uploading', uploads.filter(upload => !upload.error));
}
};
RocketChat.callbacks.add('enter-room', wipeFailedUploads);
Template.room.helpers({
isTranslated() {
const sub = ChatSubscription.findOne({ rid: this._id }, { fields: { autoTranslate: 1, autoTranslateLanguage: 1 } });
......@@ -283,7 +293,12 @@ Template.room.helpers({
},
containerBarsShow(unreadData, uploading) {
if ((((unreadData != null ? unreadData.count : undefined) > 0) && (unreadData.since != null)) || ((uploading != null ? uploading.length : undefined) > 0)) { return 'show'; }
const hasUnreadData = unreadData && (unreadData.count && unreadData.since);
const isUploading = uploading && uploading.length;
if (hasUnreadData || isUploading) {
return 'show';
}
},
formatUnreadSince() {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment