[FIX] Can't upload the same file on two rooms at the same time (#4528)

* update style to match other spaces

* fix sending the same file in different rooms and add the limit for sending the same file

* remove when error happens and cant finish the upload

* use the same variable as rocket.chat

* minor tweak upload path and removed _raw

* change from 2 to 4

Co-authored-by: Reinaldo Neto <reinaldonetof@hotmail.com>
Co-authored-by: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com>

app/i18n/locales/en.json

@@ -565,6 +565,8 @@
   "Unsupported_system_message": "Unsupported system message",
   "Updating": "Updating...",
   "Uploading": "Uploading",
+  "FileUpload_Error": "File Upload Error",
+  "Upload_in_progress": "Upload in progress",
   "Upload_file_question_mark": "Upload file?",
   "User": "User",
   "Users": "Users",

app/i18n/locales/pt-BR.json

@@ -513,6 +513,8 @@
   "Unsupported_system_message": "Mensagem de sistema não suportada",
   "Updating": "Atualizando...",
   "Uploading": "Subindo arquivo",
+  "FileUpload_Error": "Erro de upload de arquivo",
+  "Upload_in_progress": "Carregamento em andamento",
   "Upload_file_question_mark": "Enviar arquivo?",
   "User": "Usuário",
   "Users": "Usuários",

app/lib/methods/sendFileMessage.ts

@@ -1,27 +1,35 @@
 import { sanitizedRaw } from '@nozbe/watermelondb/RawRecord';
 import { settings as RocketChatSettings } from '@rocket.chat/sdk';
-import { FetchBlobResponse, StatefulPromise } from 'rn-fetch-blob';
 import isEmpty from 'lodash/isEmpty';
+import { FetchBlobResponse, StatefulPromise } from 'rn-fetch-blob';
+import { Alert } from 'react-native';
 
-import FileUpload from './helpers/fileUpload';
-import database from '../database';
-import log from './helpers/log';
 import { IUpload, IUser, TUploadModel } from '../../definitions';
+import i18n from '../../i18n';
+import database from '../database';
+import FileUpload from './helpers/fileUpload';
 import { IFileUpload } from './helpers/fileUpload/interfaces';
+import log from './helpers/log';
 
 const uploadQueue: { [index: string]: StatefulPromise<FetchBlobResponse> } = {};
 
-export function isUploadActive(path: string): boolean {
-	return !!uploadQueue[path];
+const getUploadPath = (path: string, rid: string) => `${path}-${rid}`;
+
+export function isUploadActive(path: string, rid: string): boolean {
+	return !!uploadQueue[getUploadPath(path, rid)];
 }
 
-export async function cancelUpload(item: TUploadModel): Promise<void> {
-	if (!isEmpty(uploadQueue[item.path])) {
+export async function cancelUpload(item: TUploadModel, rid: string): Promise<void> {
+	const uploadPath = getUploadPath(item.path, rid);
+	if (!isEmpty(uploadQueue[uploadPath])) {
 		try {
-			await uploadQueue[item.path].cancel();
+			await uploadQueue[uploadPath].cancel();
 		} catch {
 			// Do nothing
 		}
+		delete uploadQueue[uploadPath];
+	}
+	if (item.id) {
 		try {
 			const db = database.active;
 			await db.write(async () => {
@@ -30,7 +38,6 @@ export async function cancelUpload(item: TUploadModel): Promise<void> {
 		} catch (e) {
 			log(e);
 		}
-		delete uploadQueue[item.path];
 	}
 }
 
@@ -51,14 +58,18 @@ export function sendFileMessage(
 
 			const db = database.active;
 			const uploadsCollection = db.get('uploads');
+			const uploadPath = getUploadPath(fileInfo.path, rid);
 			let uploadRecord: TUploadModel;
 			try {
-				uploadRecord = await uploadsCollection.find(fileInfo.path);
+				uploadRecord = await uploadsCollection.find(uploadPath);
+				if (uploadRecord.id) {
+					return Alert.alert(i18n.t('FileUpload_Error'), i18n.t('Upload_in_progress'));
+				}
 			} catch (error) {
 				try {
 					await db.write(async () => {
 						uploadRecord = await uploadsCollection.create(u => {
-							u._raw = sanitizedRaw({ id: fileInfo.path }, uploadsCollection.schema);
+							u._raw = sanitizedRaw({ id: uploadPath }, uploadsCollection.schema);
 							Object.assign(u, fileInfo);
 							if (u.subscription) {
 								u.subscription.id = rid;
@@ -99,9 +110,9 @@ export function sendFileMessage(
 				'X-User-Id': id
 			};
 
-			uploadQueue[fileInfo.path] = FileUpload.fetch('POST', uploadUrl, headers, formData);
+			uploadQueue[uploadPath] = FileUpload.fetch('POST', uploadUrl, headers, formData);
 
-			uploadQueue[fileInfo.path].uploadProgress(async (loaded: number, total: number) => {
+			uploadQueue[uploadPath].uploadProgress(async (loaded: number, total: number) => {
 				try {
 					await db.write(async () => {
 						await uploadRecord.update(u => {
@@ -113,7 +124,7 @@ export function sendFileMessage(
 				}
 			});
 
-			uploadQueue[fileInfo.path].then(async response => {
+			uploadQueue[uploadPath].then(async response => {
 				if (response.respInfo.status >= 200 && response.respInfo.status < 400) {
 					// If response is all good...
 					try {
@@ -142,7 +153,7 @@ export function sendFileMessage(
 				}
 			});
 
-			uploadQueue[fileInfo.path].catch(async error => {
+			uploadQueue[uploadPath].catch(async error => {
 				try {
 					await db.write(async () => {
 						await uploadRecord.update(u => {

app/views/RoomView/UploadProgress.tsx

@@ -112,9 +112,10 @@ class UploadProgress extends Component<IUploadProgressProps, IUploadProgressStat
 
 	uploadCheck = () => {
 		this.ranInitialUploadCheck = true;
+		const { rid } = this.props;
 		const { uploads } = this.state;
 		uploads.forEach(async u => {
-			if (!isUploadActive(u.path)) {
+			if (!isUploadActive(u.path, rid)) {
 				try {
 					const db = database.active;
 					await db.write(async () => {
@@ -141,8 +142,9 @@ class UploadProgress extends Component<IUploadProgressProps, IUploadProgressStat
 	};
 
 	handleCancelUpload = async (item: TUploadModel) => {
+		const { rid } = this.props;
 		try {
-			await cancelUpload(item);
+			await cancelUpload(item, rid);
 		} catch (e) {
 			log(e);
 		}
@@ -210,7 +212,7 @@ class UploadProgress extends Component<IUploadProgressProps, IUploadProgressStat
 				key={item.path}
 				style={[
 					styles.item,
-					index !== 0 ? { marginTop: 10 } : {},
+					index !== 0 ? { marginTop: 4 } : {},
 					{
 						backgroundColor: themes[theme!].chatComponentBackground,
 						borderColor: themes[theme!].borderColor