fix(Chat): allow to re-upload failed uploads

Signed-off-by: Maksim Sukharev <[email protected]>

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

@@ -687,6 +687,7 @@ export default {
 
 		sendingErrorCanRetry() {
 			return this.sendingFailure === 'timeout' || this.sendingFailure === 'other'
+				|| this.sendingFailure === 'failed-upload'
 		},
 
 		sendingErrorIconTooltip() {
@@ -802,8 +803,14 @@ export default {
 
 		handleRetry() {
 			if (this.sendingErrorCanRetry) {
-				EventBus.$emit('retry-message', this.id)
-				EventBus.$emit('focus-chat-input')
+				if (this.sendingFailure === 'failed-upload') {
+					const caption = this.renderedMessage !== this.message ? this.message : undefined
+					this.$store.dispatch('retryUploadFiles', { uploadId: this.messageObject.uploadId, caption })
+					this.$store.dispatch('removeTemporaryMessageFromStore', this.messageObject)
+				} else {
+					EventBus.$emit('retry-message', this.id)
+					EventBus.$emit('focus-chat-input')
+				}
 			}
 		},
 

src/store/fileUploadStore.js

@@ -66,6 +66,11 @@ const getters = {
 			.filter(([_index, uploadedFile]) => uploadedFile.status === 'initialised')
 	},
 
+	getFailedUploads: (state, getters) => (uploadId) => {
+		return getters.getUploadsArray(uploadId)
+			.filter(([_index, uploadedFile]) => uploadedFile.status === 'failedUpload')
+	},
+
 	// Returns all the files that have been successfully uploaded provided an
 	// upload id
 	getShareableFiles: (state, getters) => (uploadId) => {
@@ -132,6 +137,11 @@ const mutations = {
 		Vue.set(state.localUrls, temporaryMessage.referenceId, localUrl)
 	},
 
+	// Marks a given file as initialized (for retry)
+	markFileAsInitializedUpload(state, { uploadId, index }) {
+		state.uploads[uploadId].files[index].status = 'initialised'
+	},
+
 	// Marks a given file as failed upload
 	markFileAsFailedUpload(state, { uploadId, index, status }) {
 		state.uploads[uploadId].files[index].status = 'failedUpload'
@@ -358,7 +368,7 @@ const actions = {
 
 				// Mark the upload as failed in the store
 				commit('markFileAsFailedUpload', { uploadId, index })
-				dispatch('markTemporaryMessageAsFailed', { message: uploadedFile.temporaryMessage, reason })
+				dispatch('markTemporaryMessageAsFailed', { message: uploadedFile.temporaryMessage, uploadId, reason })
 			}
 		}
 
@@ -379,7 +389,7 @@ const actions = {
 				} else {
 					showError(t('spreed', 'An error happened when trying to share your file'))
 				}
-				dispatch('markTemporaryMessageAsFailed', { message: temporaryMessage, reason: 'failed-share' })
+				dispatch('markTemporaryMessageAsFailed', { message: temporaryMessage, uploadId, reason: 'failed-share' })
 				console.error('An error happened when trying to share your file: ', error)
 			}
 		}
@@ -419,6 +429,28 @@ const actions = {
 
 		EventBus.$emit('upload-finished')
 	},
+
+	/**
+	 * Re-initialize failed uploads and open UploadEditor dialog
+	 * Insert caption if was provided
+	 *
+	 * @param {object} context default store context;
+	 * @param {object} data payload;
+	 * @param {string} data.uploadId the internal id of the upload;
+	 * @param {string} [data.caption] the message caption;
+	 */
+	retryUploadFiles(context, { uploadId, caption }) {
+		context.getters.getFailedUploads(uploadId).forEach(([index, _uploadedFile]) => {
+			context.commit('markFileAsInitializedUpload', { uploadId, index })
+		})
+
+		if (caption) {
+			context.dispatch('setCurrentMessageInput', { token: context.getters.getToken(), text: caption })
+		}
+
+		context.commit('setCurrentUploadId', uploadId)
+	},
+
 	/**
 	 * Set the folder to store new attachments in
 	 *

src/store/messagesStore.js

@@ -336,11 +336,15 @@ const mutations = {
 	 * @param {object} state current store state;
 	 * @param {object} data the wrapping object;
 	 * @param {object} data.message the temporary message;
+	 * @param {string} data.uploadId the internal id of the upload;
 	 * @param {string} data.reason the reason the temporary message failed;
 	 */
-	markTemporaryMessageAsFailed(state, { message, reason }) {
+	markTemporaryMessageAsFailed(state, { message, uploadId, reason }) {
 		if (state.messages[message.token][message.id]) {
 			Vue.set(state.messages[message.token][message.id], 'sendingFailure', reason)
+			if (uploadId) {
+				Vue.set(state.messages[message.token][message.id], 'uploadId', uploadId)
+			}
 		}
 	},
 
@@ -676,10 +680,11 @@ const actions = {
 	 * @param {object} context default store context;
 	 * @param {object} data the wrapping object;
 	 * @param {object} data.message the temporary message;
+	 * @param {string} data.uploadId the internal id of the upload;
 	 * @param {string} data.reason the reason the temporary message failed;
 	 */
-	markTemporaryMessageAsFailed(context, { message, reason }) {
-		context.commit('markTemporaryMessageAsFailed', { message, reason })
+	markTemporaryMessageAsFailed(context, { message, uploadId, reason }) {
+		context.commit('markTemporaryMessageAsFailed', { message, uploadId, reason })
 	},
 
 	/**