start new -> upload new

lama_cleaner/app/src/components/Header/Header.tsx

@@ -1,5 +1,5 @@
-import { ArrowLeftIcon } from '@heroicons/react/outline'
-import React from 'react'
+import { ArrowLeftIcon, UploadIcon } from '@heroicons/react/outline'
+import React, { useState } from 'react'
 import { useRecoilState } from 'recoil'
 import { fileState } from '../../store/Atoms'
 import Button from '../shared/Button'
@@ -11,20 +11,30 @@ import SettingIcon from '../Settings/SettingIcon'
 const Header = () => {
   const [file, setFile] = useRecoilState(fileState)
   const resolution = useResolution()
+  const [uploadElemId] = useState(`file-upload-${Math.random().toString()}`)
 
   const renderHeader = () => {
     return (
       <header>
         <div style={{ visibility: file ? 'visible' : 'hidden' }}>
-          <Button
-            icon={<ArrowLeftIcon />}
-            onClick={() => {
-              setFile(undefined)
-            }}
-            style={{ border: 0 }}
-          >
-            {resolution === 'desktop' ? 'Start New' : undefined}
-          </Button>
+          <label htmlFor={uploadElemId}>
+            <Button icon={<UploadIcon />} style={{ border: 0 }}>
+              <input
+                style={{ display: 'none' }}
+                id={uploadElemId}
+                name={uploadElemId}
+                type="file"
+                onChange={ev => {
+                  const newFile = ev.currentTarget.files?.[0]
+                  if (newFile) {
+                    setFile(newFile)
+                  }
+                }}
+                accept="image/png, image/jpeg"
+              />
+              {resolution === 'desktop' ? 'Upload New' : undefined}
+            </Button>
+          </label>
         </div>
 
         <div className="header-icons-wrapper">