feat(@tinacms/fields): clicking on ImageField opens the media picker ui

tinacms · Sep 11, 2020 · 7bb8fdb · 7bb8fdb
1 parent 94ee917
commit 7bb8fdb
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/packages/@tinacms/fields/src/components/ImageUpload/ImageUpload.tsx b/packages/@tinacms/fields/src/components/ImageUpload/ImageUpload.tsx
@@ -26,6 +26,7 @@ import { LoadingDots } from '@tinacms/react-forms'
 interface ImageUploadProps {
   onDrop: (acceptedFiles: any[]) => void
   onClear?: () => void
+  onClick?: () => void
   value?: string
   previewSrc?: string
   loading?: boolean
@@ -103,17 +104,19 @@ const StyledImageContainer = styled.div`
 export const ImageUpload = ({
   onDrop,
   onClear,
+  onClick,
   value,
   previewSrc,
   loading,
 }: ImageUploadProps) => {
   const { getRootProps, getInputProps } = useDropzone({
     accept: 'image/*',
     onDrop,
+    noClick: !!onClick,
   })
 
   return (
-    <DropArea {...getRootProps()}>
+    <DropArea {...getRootProps()} onClick={onClick}>
       <input {...getInputProps()} />
       {value ? (
         <StyledImageContainer>

diff --git a/packages/@tinacms/fields/src/plugins/ImageFieldPlugin.tsx b/packages/@tinacms/fields/src/plugins/ImageFieldPlugin.tsx
@@ -75,6 +75,17 @@ export const ImageField = wrapFieldsWithMeta<InputProps, ImageProps>(props => {
       value={props.input.value}
       previewSrc={src}
       loading={srcIsLoading}
+      onClick={() => {
+        cms.events.dispatch({
+          type: 'media:open',
+          onSelect(media: any) {
+            if (media.filename == props.input.value) {
+              props.input.onChange('') // trigger rerender
+            }
+            props.input.onChange(media)
+          },
+        })
+      }}
       onDrop={async ([file]: File[]) => {
         const directory = props.field.uploadDir(props.form.getState().values)
         // @ts-ignore cms.media