Merge branch 'chat-multi-upload' into 'develop'

Chats: allow uploading multiple attachments at once (if the backend supports it)

See merge request soapbox-pub/soapbox!2313

app/soapbox/features/chats/components/chat-composer.tsx

@@ -47,7 +47,7 @@ interface IChatComposer extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaEl
   resetContentKey: number | null
   attachments?: Attachment[]
   onDeleteAttachment?: (i: number) => void
-  isUploading?: boolean
+  uploadCount?: number
   uploadProgress?: number
 }
 
@@ -65,7 +65,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
   onPaste,
   attachments = [],
   onDeleteAttachment,
-  isUploading,
+  uploadCount = 0,
   uploadProgress,
 }, ref) => {
   const intl = useIntl();
@@ -82,6 +82,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
   const [suggestions, setSuggestions] = useState<Suggestion>(initialSuggestionState);
   const isSuggestionsAvailable = suggestions.list.length > 0;
 
+  const isUploading = uploadCount > 0;
   const hasAttachment = attachments.length > 0;
   const isOverCharacterLimit = maxCharacterCount && value?.length > maxCharacterCount;
   const isSubmitDisabled = disabled || isUploading || isOverCharacterLimit || (value.length === 0 && !hasAttachment);
@@ -200,7 +201,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
               disabled={disabled}
               attachments={attachments}
               onDeleteAttachment={onDeleteAttachment}
-              isUploading={isUploading}
+              uploadCount={uploadCount}
               uploadProgress={uploadProgress}
             />
             {isSuggestionsAvailable ? (

app/soapbox/features/chats/components/chat-textarea.tsx

@@ -9,7 +9,7 @@ import ChatUpload from './chat-upload';
 interface IChatTextarea extends React.ComponentProps<typeof Textarea> {
   attachments?: Attachment[]
   onDeleteAttachment?: (i: number) => void
-  isUploading?: boolean
+  uploadCount?: number
   uploadProgress?: number
 }
 
@@ -17,10 +17,12 @@ interface IChatTextarea extends React.ComponentProps<typeof Textarea> {
 const ChatTextarea: React.FC<IChatTextarea> = ({
   attachments,
   onDeleteAttachment,
-  isUploading = false,
+  uploadCount = 0,
   uploadProgress = 0,
   ...rest
 }) => {
+  const isUploading = uploadCount > 0;
+
   const handleDeleteAttachment = (i: number) => {
     return () => {
       if (onDeleteAttachment) {
@@ -54,11 +56,11 @@ const ChatTextarea: React.FC<IChatTextarea> = ({
             </div>
           ))}
 
-          {isUploading && (
+          {Array.from(Array(uploadCount)).map(() => (
             <div className='ml-2 mt-2 flex'>
               <ChatPendingUpload progress={uploadProgress} />
             </div>
-          )}
+          ))}
         </HStack>
       )}
 

app/soapbox/features/chats/components/chat.tsx

@@ -57,7 +57,7 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
 
   const [content, setContent] = useState<string>('');
   const [attachments, setAttachments] = useState<Attachment[]>([]);
-  const [isUploading, setIsUploading] = useState(false);
+  const [uploadCount, setUploadCount] = useState(0);
   const [uploadProgress, setUploadProgress] = useState(0);
   const [resetContentKey, setResetContentKey] = useState<number>(fileKeyGen());
   const [resetFileKey, setResetFileKey] = useState<number>(fileKeyGen());
@@ -86,7 +86,7 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
     }
     setContent('');
     setAttachments([]);
-    setIsUploading(false);
+    setUploadCount(0);
     setUploadProgress(0);
     setResetFileKey(fileKeyGen());
     setResetContentKey(fileKeyGen());
@@ -151,17 +151,21 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
       return;
     }
 
-    setIsUploading(true);
+    setUploadCount(files.length);
 
-    const data = new FormData();
-    data.append('file', files[0]);
-
-    dispatch(uploadMedia(data, onUploadProgress)).then((response: any) => {
-      setAttachments([...attachments, normalizeAttachment(response.data)]);
-      setIsUploading(false);
-    }).catch(() => {
-      setIsUploading(false);
+    const promises = Array.from(files).map(async(file) => {
+      const data = new FormData();
+      data.append('file', file);
+      const response = await dispatch(uploadMedia(data, onUploadProgress));
+      return normalizeAttachment(response.data);
     });
+
+    return Promise.all(promises)
+      .then((newAttachments) => {
+        setAttachments([...attachments, ...newAttachments]);
+        setUploadCount(0);
+      })
+      .catch(() => setUploadCount(0));
   };
 
   useEffect(() => {
@@ -189,7 +193,7 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
         onPaste={handlePaste}
         attachments={attachments}
         onDeleteAttachment={handleRemoveFile}
-        isUploading={isUploading}
+        uploadCount={uploadCount}
         uploadProgress={uploadProgress}
       />
     </Stack>

app/soapbox/utils/features.ts

@@ -284,7 +284,7 @@ const getInstanceFeatures = (instance: Instance) => {
      * Whether chat messages can accept a `media_id` attachment.
      * @see POST /api/v1/pleroma/chats/:id/messages
      */
-    chatsMedia: v.software !== TRUTHSOCIAL,
+    chatsMedia: v.software !== TRUTHSOCIAL || v.build === UNRELEASED,
 
     /**
      * Whether chat messages have read receipts.