Allow to drag files to avatar/header pickers

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/features/edit-profile/components/avatar-picker.tsx

@@ -1,30 +1,43 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Avatar, Icon, HStack } from 'soapbox/components/ui';
+import { useDraggedFiles } from 'soapbox/hooks';
 
 interface IMediaInput {
   className?: string
   src: string | undefined
   accept: string
-  onChange: React.ChangeEventHandler<HTMLInputElement>
+  onChange: (files: FileList | null) => void
   disabled?: boolean
 }
 
 const AvatarPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ className, src, onChange, accept, disabled }, ref) => {
+  const picker = useRef<HTMLLabelElement>(null);
+
+  const { isDragging, isDraggedOver } = useDraggedFiles(picker, (files) => {
+    onChange(files);
+  });
+
   return (
     <label
+      ref={picker}
       className={clsx(
-        'absolute bottom-0 left-1/2 h-20 w-20 -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-full bg-primary-500 ring-2 ring-white dark:ring-primary-900',
+        'absolute bottom-0 left-1/2 h-20 w-20 -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-full ring-2',
+        {
+          'border-2 border-primary-600 border-dashed !z-[99] overflow-hidden': isDragging,
+          'ring-white dark:ring-primary-900': !isDraggedOver,
+          'ring-offset-2 ring-primary-600': isDraggedOver,
+        },
         className,
       )}
+      style={{ height: 80, width: 80 }}
     >
       {src && <Avatar src={src} size={80} />}
       <HStack
         alignItems='center'
         justifyContent='center'
-
         className={clsx('absolute left-0 top-0 h-full w-full rounded-full transition-opacity', {
           'opacity-0 hover:opacity-90 bg-primary-500': src,
         })}
@@ -40,7 +53,7 @@ const AvatarPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ classNam
         name='avatar'
         type='file'
         accept={accept}
-        onChange={onChange}
+        onChange={({ target }) => onChange(target.files)}
         disabled={disabled}
         className='hidden'
       />

app/soapbox/features/edit-profile/components/header-picker.tsx

@@ -1,8 +1,9 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { useRef } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { HStack, Icon, IconButton, Text } from 'soapbox/components/ui';
+import { useDraggedFiles } from 'soapbox/hooks';
 
 const messages = defineMessages({
   title: { id: 'group.upload_banner.title', defaultMessage: 'Upload background picture' },
@@ -11,7 +12,7 @@ const messages = defineMessages({
 interface IMediaInput {
   src: string | undefined
   accept: string
-  onChange: React.ChangeEventHandler<HTMLInputElement>
+  onChange: (files: FileList | null) => void
   onClear?: () => void
   disabled?: boolean
 }
@@ -19,6 +20,12 @@ interface IMediaInput {
 const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onChange, onClear, accept, disabled }, ref) => {
   const intl = useIntl();
 
+  const picker = useRef<HTMLLabelElement>(null);
+
+  const { isDragging, isDraggedOver } = useDraggedFiles(picker, (files) => {
+    onChange(files);
+  });
+
   const handleClear: React.MouseEventHandler<HTMLButtonElement> = (e) => {
     e.stopPropagation();
 
@@ -27,7 +34,14 @@ const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onC
 
   return (
     <label
-      className='dark:sm:shadow-inset relative h-24 w-full cursor-pointer overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-accent-blue sm:h-36 sm:shadow'
+      ref={picker}
+      className={clsx(
+        'dark:sm:shadow-inset relative h-24 w-full cursor-pointer overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-accent-blue sm:h-36 sm:shadow',
+        {
+          'border-2 border-primary-600 border-dashed !z-[99]': isDragging,
+          'ring-2 ring-offset-2 ring-primary-600': isDraggedOver,
+        },
+      )}
       title={intl.formatMessage(messages.title)}
       tabIndex={0}
     >
@@ -54,7 +68,7 @@ const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onC
           name='header'
           type='file'
           accept={accept}
-          onChange={onChange}
+          onChange={({ target }) => onChange(target.files)}
           disabled={disabled}
           className='hidden'
         />

app/soapbox/features/ui/components/modals/manage-group-modal/steps/details-step.tsx

@@ -53,8 +53,8 @@ const DetailsStep: React.FC<IDetailsStep> = ({ params, onChange }) => {
     };
   };
 
-  const handleImageChange = (property: keyof CreateGroupParams, maxPixels?: number): React.ChangeEventHandler<HTMLInputElement> => {
-    return async ({ target: { files } }) => {
+  const handleImageChange = (property: 'header' | 'avatar', maxPixels?: number) =>
+    async (files: FileList | null) => {
       const file = files ? files[0] : undefined;
       if (file) {
         const resized = await resizeImage(file, maxPixels);
@@ -64,7 +64,6 @@ const DetailsStep: React.FC<IDetailsStep> = ({ params, onChange }) => {
         });
       }
     };
-  };
 
   const handleImageClear = (property: keyof CreateGroupParams) => () => onChange({ [property]: undefined });
 

app/soapbox/hooks/forms/useImageField.ts

@@ -16,7 +16,7 @@ function useImageField(opts: UseImageFieldOpts = {}) {
   const [file, setFile] = useState<File | null>();
   const src = usePreview(file) || (file === null ? undefined : opts.preview);
 
-  const onChange: React.ChangeEventHandler<HTMLInputElement> = async ({ target: { files } }) => {
+  const onChange = async (files: FileList | null) => {
     const file = files?.item(0);
     if (!file) return;