Open file explorer to select image

components/form.js

@@ -25,6 +25,7 @@ import textAreaCaret from 'textarea-caret'
 import ReactDatePicker from 'react-datepicker'
 import 'react-datepicker/dist/react-datepicker.css'
 import { debounce } from './use-debounce-callback'
+import { ImageUpload } from './image'
 
 export function SubmitButton ({
   children, variant, value, onClick, disabled, cost, ...props
@@ -221,7 +222,9 @@ export function MarkdownInput ({ label, topLevel, groupClassName, onChange, setH
             <Nav.Link className={styles.previewTab} eventKey='preview' disabled={!meta.value}>preview</Nav.Link>
           </Nav.Item>
           <span className='ms-auto text-muted d-flex align-items-center'>
-            <AddImageIcon className='me-1' width={18} height={18} />
+            <ImageUpload className='d-flex align-items-center me-1'>
+              <AddImageIcon width={18} height={18} onClick={() => console.log('icon click')} />
+            </ImageUpload>
             <a
               className='d-flex align-items-center'
               href='https://guides.github.com/features/mastering-markdown/' target='_blank' rel='noreferrer'

components/image.js

@@ -1,9 +1,11 @@
 import styles from './text.module.css'
-import { useState, useEffect, useMemo, useCallback } from 'react'
+import { Fragment, useState, useEffect, useMemo, useCallback, useRef } from 'react'
 import { IMGPROXY_URL_REGEXP } from '../lib/url'
 import { useShowModal } from './modal'
 import { useMe } from './me'
 import { Dropdown } from 'react-bootstrap'
+import { UPLOAD_TYPES_ALLOW } from '../lib/constants'
+import { useToast } from './toast'
 
 export function decodeOriginalUrl (imgproxyUrl) {
   const parts = imgproxyUrl.split('/')
@@ -132,3 +134,35 @@ export default function ZoomableImage ({ src, srcSet, ...props }) {
 
   return <ImageOriginal src={originalUrl} onClick={handleClick} {...props} />
 }
+
+export function ImageUpload ({ children, className, onSelect, onSuccess }) {
+  const ref = useRef()
+  const toaster = useToast()
+
+  return (
+    <>
+      <input
+        ref={ref}
+        type='file'
+        className='d-none'
+        accept={UPLOAD_TYPES_ALLOW.join(', ')}
+        onChange={(e) => {
+          if (e.target.files.length === 0) {
+            return
+          }
+          const file = e.target.files[0]
+          if (UPLOAD_TYPES_ALLOW.indexOf(file.type) === -1) {
+            toaster.danger(`image must be ${UPLOAD_TYPES_ALLOW.map(t => t.replace('image/', '')).join(', ')}`)
+            return
+          }
+          onSelect?.(file)
+          // TODO find out if this is needed and if so, why (copied from components/upload.js)
+          e.target.value = null
+        }}
+      />
+      <div className={className} onClick={() => ref.current?.click()} style={{ cursor: 'pointer' }}>
+        {children}
+      </div>
+    </>
+  )
+}