From 82c6f658e84a1198f79c3b10b945dd92b16b1f74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Tue, 12 Sep 2023 01:11:07 +0200
Subject: [PATCH] Allow to drag files to avatar/header pickers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../edit-profile/components/avatar-picker.tsx | 23 +++++++++++++++----
 .../edit-profile/components/header-picker.tsx | 22 ++++++++++++++----
 .../manage-group-modal/steps/details-step.tsx |  5 ++--
 app/soapbox/hooks/forms/useImageField.ts      |  2 +-
 4 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/app/soapbox/features/edit-profile/components/avatar-picker.tsx b/app/soapbox/features/edit-profile/components/avatar-picker.tsx
index 09a6b0d29..afbd54a71 100644
--- a/app/soapbox/features/edit-profile/components/avatar-picker.tsx
+++ b/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'
       />
diff --git a/app/soapbox/features/edit-profile/components/header-picker.tsx b/app/soapbox/features/edit-profile/components/header-picker.tsx
index 036814713..66d3c390f 100644
--- a/app/soapbox/features/edit-profile/components/header-picker.tsx
+++ b/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'
         />
diff --git a/app/soapbox/features/ui/components/modals/manage-group-modal/steps/details-step.tsx b/app/soapbox/features/ui/components/modals/manage-group-modal/steps/details-step.tsx
index 0bf6fc325..50a89b54f 100644
--- a/app/soapbox/features/ui/components/modals/manage-group-modal/steps/details-step.tsx
+++ b/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 });
 
diff --git a/app/soapbox/hooks/forms/useImageField.ts b/app/soapbox/hooks/forms/useImageField.ts
index dea5a0079..01e4227e3 100644
--- a/app/soapbox/hooks/forms/useImageField.ts
+++ b/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;