render upload error

net/web/src/context/useUploadContext.hook.js

@@ -111,6 +111,19 @@ export function useUploadContext() {
     cancelContactTopic: (cardId, channelId, topicId) => {
       abort(`${cardId}:${channelId}`, topicId);
     },
+    clearErrors: (cardId, channelId) => {
+      const key = cardId ? `${cardId}:${channelId}` : `:${channelId}`;
+      const topics = channels.current.get(key);
+      if (topics) {
+        topics.forEach((topic, topicId) => {
+          if (topic.error) {
+            topic.cancel.abort();
+            topics.delete(topicId);
+            updateProgress();
+          }
+        });
+      }
+    },
     clear: () => {
       channels.current.forEach((topics, channelId) => {
         topics.forEach((assets, topicId) => {

net/web/src/session/conversation/Conversation.jsx

@@ -58,7 +58,10 @@ export function Conversation({ closeConversation, openDetails, cardId, channelId
       </div>
       <div class="divider">
         <div class="line" />
-        { state.upload && (
+        { state.uploadError && (
+          <div class="progress-error" />
+        )}
+        { state.upload && !state.uploadError && (
           <div class="progress-active" style={{ width: state.uploadPercent + '%' }} />
         )}
         { !state.upload && (
@@ -67,6 +70,17 @@ export function Conversation({ closeConversation, openDetails, cardId, channelId
       </div>
       <div class="topic">
         <AddTopic cardId={cardId} channelId={channelId} />
+        { state.uploadError && (
+          <div class="upload-error">
+            <Tooltip placement="bottom" title="upload error">
+              <StatusError>
+                <div onClick={() => actions.clearUploadErrors(cardId, channelId)}>
+                  <ExclamationCircleOutlined />
+                </div>
+              </StatusError>
+            </Tooltip>
+          </div>
+        )}
       </div>
     </ConversationWrapper>
   );

net/web/src/session/conversation/Conversation.styled.js

@@ -77,15 +77,34 @@ export const ConversationWrapper = styled.div`
 
     .progress-idle {
       border-top: 1px solid ${Colors.divider};
+      height: 1px;
     }
 
     .progress-active {
       border-top: 1px solid ${Colors.primary};
+      height: 1px;
+    }
+
+    .progress-error {
+      border-top: 1px solid ${Colors.alert};
+      width: 100%;
+      height: 1px;
+      display: flex;
+      justify-content: flex-end;
     }
   }
 
   .topic {
     flex-shrink: 0;
+    position: relative;
+
+    .upload-error {
+      position: absolute;
+      top: 0;
+      right: 0;
+      margin-right: 16px;
+      cursor-pointer;
+    }
   }
 `
 

net/web/src/session/conversation/useConversation.hook.js

@@ -133,7 +133,8 @@ export function useConversation(cardId, channelId) {
     resync: () => {
       conversation.actions.resync();
     },
-    clearUploadError: () => {
+    clearUploadErrors: (cardId, channelId) => {
+      upload.actions.clearErrors(cardId, channelId);
     },
     cancelUpload: () => {
     },