Use unique random indexes for temporary messages

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue

@@ -97,13 +97,6 @@ export default {
 			type: Number,
 			default: null,
 		},
-		// In case this component is used to display a file that is being uploaded
-		// this parameter is used to access the file upload status in the store
-		index: {
-			type: String,
-			default: '',
-		},
-
 		// True if this component is used in the upload editor
 		isUploadEditor: {
 			type: Boolean,
@@ -115,6 +108,11 @@ export default {
 			type: String,
 			default: '',
 		},
+
+		index: {
+			type: String,
+			default: '',
+		},
 	},
 	data() {
 		return {
@@ -211,6 +209,7 @@ export default {
 			return this.mimetype.startsWith('image/') && this.localUrl
 		},
 	},
+
 	mounted() {
 		const img = new Image()
 		img.onerror = () => {

src/store/fileUploadStore.js

@@ -94,26 +94,25 @@ const getters = {
 }
 
 const mutations = {
-	/**
-	 * Adds a "file to be shared to the store"
-	 * @param {object} state the state object
-	 * @param {object} file the file to be added to the store
-	 * @param {number} uploadId The unique identifier of the upload operation
-	 * @param {string} token the conversation's token
-	 */
-	addFileToBeUploaded(state, { uploadId, token, file }) {
+
+	// Adds a "file to be shared to the store"
+	addFileToBeUploaded(state, { file, temporaryMessage }) {
+		const uploadId = temporaryMessage.messageParameters.file.uploadId
+		const token = temporaryMessage.messageParameters.file.token
+		const index = temporaryMessage.messageParameters.file.index
 		// Create upload id if not present
 		if (!state.uploads[uploadId]) {
 			Vue.set(state.uploads, uploadId, {
 				token,
 				files: {},
 			})
 		}
-		Vue.set(state.uploads[uploadId].files, Object.keys(state.uploads[uploadId].files).length, {
+		Vue.set(state.uploads[uploadId].files, index, {
 			file,
-			status: 'toBeUploaded',
+			status: 'initialised',
 			totalSize: file.size,
 			uploadedSize: 0,
+			temporaryMessage,
 		 })
 	},
 
@@ -128,11 +127,6 @@ const mutations = {
 		Vue.set(state.uploads[uploadId].files[index], 'sharePath', sharePath)
 	},
 
-	// Marks a given file as initialised
-	markFileAsInitialised(state, { uploadId, index }) {
-		state.uploads[uploadId].files[index].status = 'initialised'
-	},
-
 	// Marks a given file as uploading
 	markFileAsUploading(state, { uploadId, index }) {
 		state.uploads[uploadId].files[index].status = 'uploading'
@@ -196,25 +190,19 @@ const actions = {
 		commit('setCurrentUploadId', uploadId)
 		// Show upload editor
 		commit('showUploadEditor', true)
-		files.forEach(file => {
-			commit('addFileToBeUploaded', { uploadId, token, file })
-		})
 
-		// Add temporary messages
-		for (const index in state.uploads[uploadId].files) {
-			// Mark file as initialised
-			commit('markFileAsInitialised', { uploadId, index })
-			// currentFile to be uploaded
-			const currentFile = state.uploads[uploadId].files[index].file
+		files.forEach(file => {
 			// Get localurl for previews
-			const localUrl = URL.createObjectURL(currentFile)
+			const localUrl = URL.createObjectURL(file)
+			// Create a unique index for each file
+			const date = new Date()
+			const index = 'temp_' + date.getTime() + Math.random()
 			// Create temporary message for the file and add it to the message list
-			const temporaryMessage = createTemporaryMessage('{file}', token, uploadId, index, currentFile, localUrl)
-			// Add the temporary messages to the store
-			commit('setTemporaryMessageForFile', { uploadId, index, temporaryMessage })
-		}
+			const temporaryMessage = createTemporaryMessage('{file}', token, uploadId, index, file, localUrl)
+			console.debug('temporarymessage: ', temporaryMessage, 'uploadId', uploadId)
+			commit('addFileToBeUploaded', { file, temporaryMessage })
+		})
 	},
-
 	/**
 	 * Uploads the files to the root directory of the user
 	 * @param {object} param0 Commit, state and getters
@@ -266,7 +254,6 @@ const actions = {
 			const shareableFiles = getters.getShareableFiles(uploadId)
 			// Share each of those files to the conversation
 			for (const index in shareableFiles) {
-				console.debug('i run')
 				const path = shareableFiles[index].sharePath
 				try {
 					const temporaryMessage = shareableFiles[index].temporaryMessage

src/utils/temporaryMessage.js

@@ -30,16 +30,17 @@ const createTemporaryMessage = (text, token, uploadId, index, file, localUrl) =>
 	let tempId = 'temp-' + date.getTime()
 	const messageParameters = {}
 	if (file) {
-		tempId += '-' + uploadId + '-' + index
+		tempId += '-' + uploadId + '-' + Math.random()
 		messageParameters.file = {
 			'type': 'file',
 			'file': file,
 			'mimetype': file.type,
 			'id': tempId,
 			'name': file.name,
-			index,
+			// index, will be the id from now on
 			uploadId,
 			localUrl,
+			index,
 		}
 	}
 	const message = Object.assign({}, {