Merge branch 'multiple-attachments' into 'develop'

Chats: allow uploading multiple attachments

See merge request soapbox-pub/soapbox!2268

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

@@ -44,7 +44,7 @@ interface IChatComposer extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaEl
   resetFileKey: number | null
   resetContentKey: number | null
   attachments?: Attachment[]
-  onDeleteAttachment?: () => void
+  onDeleteAttachment?: (i: number) => void
   isUploading?: boolean
   uploadProgress?: number
 }
@@ -75,13 +75,14 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
   const isBlocked = useAppSelector((state) => state.getIn(['relationships', chat?.account?.id, 'blocked_by']));
   const isBlocking = useAppSelector((state) => state.getIn(['relationships', chat?.account?.id, 'blocking']));
   const maxCharacterCount = useAppSelector((state) => state.instance.getIn(['configuration', 'chats', 'max_characters']) as number);
+  const attachmentLimit = useAppSelector(state => state.instance.configuration.getIn(['chats', 'max_media_attachments']) as number);
 
   const [suggestions, setSuggestions] = useState<Suggestion>(initialSuggestionState);
   const isSuggestionsAvailable = suggestions.list.length > 0;
 
   const hasAttachment = attachments.length > 0;
   const isOverCharacterLimit = maxCharacterCount && value?.length > maxCharacterCount;
-  const isSubmitDisabled = disabled || isOverCharacterLimit || (value.length === 0 && !hasAttachment);
+  const isSubmitDisabled = disabled || isUploading || isOverCharacterLimit || (value.length === 0 && !hasAttachment);
 
   const overLimitText = maxCharacterCount ? maxCharacterCount - value?.length : '';
 
@@ -174,6 +175,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
               resetFileKey={resetFileKey}
               iconClassName='w-5 h-5'
               className='text-primary-500'
+              disabled={isUploading || (attachments.length >= attachmentLimit)}
             />
           </Stack>
         )}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Textarea } from 'soapbox/components/ui';
+import { HStack, Textarea } from 'soapbox/components/ui';
 import { Attachment } from 'soapbox/types/entities';
 
 import ChatPendingUpload from './chat-pending-upload';
@@ -8,7 +8,7 @@ import ChatUpload from './chat-upload';
 
 interface IChatTextarea extends React.ComponentProps<typeof Textarea> {
   attachments?: Attachment[]
-  onDeleteAttachment?: () => void
+  onDeleteAttachment?: (i: number) => void
   isUploading?: boolean
   uploadProgress?: number
 }
@@ -21,6 +21,14 @@ const ChatTextarea: React.FC<IChatTextarea> = ({
   uploadProgress = 0,
   ...rest
 }) => {
+  const handleDeleteAttachment = (i: number) => {
+    return () => {
+      if (onDeleteAttachment) {
+        onDeleteAttachment(i);
+      }
+    };
+  };
+
   return (
     <div className={`
       block
@@ -35,19 +43,23 @@ const ChatTextarea: React.FC<IChatTextarea> = ({
     `}
     >
       {(!!attachments?.length || isUploading) && (
-        <div className='flex p-3 pb-0'>
+        <HStack className='-ml-2 -mt-2 p-3 pb-0' wrap>
-          {isUploading && (
+          {attachments?.map((attachment, i) => (
-            <ChatPendingUpload progress={uploadProgress} />
+            <div className='ml-2 mt-2 flex'>
-          )}
-
-          {attachments?.map(attachment => (
               <ChatUpload
                 key={attachment.id}
                 attachment={attachment}
-              onDelete={onDeleteAttachment}
+                onDelete={handleDeleteAttachment(i)}
               />
-          ))}
             </div>
+          ))}
+
+          {isUploading && (
+            <div className='ml-2 mt-2 flex'>
+              <ChatPendingUpload progress={uploadProgress} />
+            </div>
+          )}
+        </HStack>
       )}
 
       <Textarea theme='transparent' {...rest} />

app/soapbox/features/chats/components/chat-upload-preview.tsx

@@ -21,6 +21,7 @@ const ChatUploadPreview: React.FC<IChatUploadPreview> = ({ className, attachment
 
   switch (attachment.type) {
     case 'image':
+    case 'gifv':
       return (
         <img
           className='pointer-events-none h-full w-full object-cover'

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

@@ -5,17 +5,21 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { uploadMedia } from 'soapbox/actions/media';
 import { Stack } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 import { normalizeAttachment } from 'soapbox/normalizers';
 import { IChat, useChatActions } from 'soapbox/queries/chats';
+import toast from 'soapbox/toast';
 
 import ChatComposer from './chat-composer';
 import ChatMessageList from './chat-message-list';
 
+import type { Attachment } from 'soapbox/types/entities';
+
 const fileKeyGen = (): number => Math.floor((Math.random() * 0x10000));
 
 const messages = defineMessages({
   failedToSend: { id: 'chat.failed_to_send', defaultMessage: 'Message failed to send.' },
+  uploadErrorLimit: { id: 'upload_error.limit', defaultMessage: 'File upload limit exceeded.' },
 });
 
 interface ChatInterface {
@@ -49,19 +53,20 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
   const dispatch = useAppDispatch();
 
   const { createChatMessage, acceptChat } = useChatActions(chat.id);
+  const attachmentLimit = useAppSelector(state => state.instance.configuration.getIn(['chats', 'max_media_attachments']) as number);
 
   const [content, setContent] = useState<string>('');
-  const [attachment, setAttachment] = useState<any>(undefined);
+  const [attachments, setAttachments] = useState<Attachment[]>([]);
   const [isUploading, setIsUploading] = useState(false);
   const [uploadProgress, setUploadProgress] = useState(0);
   const [resetContentKey, setResetContentKey] = useState<number>(fileKeyGen());
   const [resetFileKey, setResetFileKey] = useState<number>(fileKeyGen());
   const [errorMessage, setErrorMessage] = useState<string>();
 
-  const isSubmitDisabled = content.length === 0 && !attachment;
+  const isSubmitDisabled = content.length === 0 && attachments.length === 0;
 
   const submitMessage = () => {
-    createChatMessage.mutate({ chatId: chat.id, content, mediaId: attachment?.id }, {
+    createChatMessage.mutate({ chatId: chat.id, content, mediaIds: attachments.map(a => a.id) }, {
       onSuccess: () => {
         setErrorMessage(undefined);
       },
@@ -80,7 +85,7 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
       clearNativeInputValue(inputRef.current);
     }
     setContent('');
-    setAttachment(undefined);
+    setAttachments([]);
     setIsUploading(false);
     setUploadProgress(0);
     setResetFileKey(fileKeyGen());
@@ -128,8 +133,10 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
 
   const handleMouseOver = () => markRead();
 
-  const handleRemoveFile = () => {
+  const handleRemoveFile = (i: number) => {
-    setAttachment(undefined);
+    const newAttachments = [...attachments];
+    newAttachments.splice(i, 1);
+    setAttachments(newAttachments);
     setResetFileKey(fileKeyGen());
   };
 
@@ -139,13 +146,18 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
   };
 
   const handleFiles = (files: FileList) => {
+    if (files.length + attachments.length > attachmentLimit) {
+      toast.error(messages.uploadErrorLimit);
+      return;
+    }
+
     setIsUploading(true);
 
     const data = new FormData();
     data.append('file', files[0]);
 
     dispatch(uploadMedia(data, onUploadProgress)).then((response: any) => {
-      setAttachment(normalizeAttachment(response.data));
+      setAttachments([...attachments, normalizeAttachment(response.data)]);
       setIsUploading(false);
     }).catch(() => {
       setIsUploading(false);
@@ -175,7 +187,7 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
         resetFileKey={resetFileKey}
         resetContentKey={resetContentKey}
         onPaste={handlePaste}
-        attachments={attachment ? [attachment] : []}
+        attachments={attachments}
         onDeleteAttachment={handleRemoveFile}
         isUploading={isUploading}
         uploadProgress={uploadProgress}

app/soapbox/normalizers/__tests__/instance.test.ts

@@ -10,7 +10,8 @@ describe('normalizeInstance()', () => {
       configuration: {
         media_attachments: {},
         chats: {
-          max_characters: 500,
+          max_characters: 5000,
+          max_media_attachments: 1,
         },
         polls: {
           max_options: 4,

app/soapbox/normalizers/instance.ts

@@ -22,7 +22,8 @@ export const InstanceRecord = ImmutableRecord({
   configuration: ImmutableMap<string, any>({
     media_attachments: ImmutableMap<string, any>(),
     chats: ImmutableMap<string, number>({
-      max_characters: 500,
+      max_characters: 5000,
+      max_media_attachments: 1,
     }),
     polls: ImmutableMap<string, number>({
       max_options: 4,

app/soapbox/queries/chats.ts

@@ -231,9 +231,13 @@ const useChatActions = (chatId: string) => {
   };
 
   const createChatMessage = useMutation(
-    (
+    ({ chatId, content, mediaIds }: { chatId: string, content: string, mediaIds?: string[] }) => {
-      {  chatId, content, mediaId }: { chatId: string, content: string, mediaId?: string },
+      return api.post<ChatMessage>(`/api/v1/pleroma/chats/${chatId}/messages`, {
-    ) => api.post<ChatMessage>(`/api/v1/pleroma/chats/${chatId}/messages`, { content, media_id: mediaId, media_ids: [mediaId] }),
+        content,
+        media_id: (mediaIds && mediaIds.length === 1) ? mediaIds[0] : undefined, // Pleroma backwards-compat
+        media_ids: mediaIds,
+      });
+    },
     {
       retry: false,
       onMutate: async (variables) => {

app/soapbox/reducers/__tests__/instance.test.ts

@@ -13,7 +13,8 @@ describe('instance reducer', () => {
       description_limit: 1500,
       configuration: {
         chats: {
-          max_characters: 500,
+          max_characters: 5000,
+          max_media_attachments: 1,
         },
         statuses: {
           max_characters: 500,