Cover file for audio category (#60)

* MainAuctionCard

* trending auctions

* fix scroll, reduce padding

* fixing errors/warnings and formatting

* formatting & sold auctions

* artists cards

* initial presale banner. move sample data to own file

* new home layout

* presale banner image fix

* countdown implementation

* initial artwork implementation

* getCountdown

* presale card

* fix presale banner image

* fix width. show preview. load only 1 file

* remove preview/keep filename. url id for steps

* slider > input number

* upload step for every category

* fix file handling

* hashrouter

Co-authored-by: B <264380+bartosz-lipinski@users.noreply.github.com>

packages/metavinci/src/views/artCreate/index.tsx

@@ -12,7 +12,6 @@ import {
   Spin,
   InputNumber,
 } from 'antd';
-import { InboxOutlined } from '@ant-design/icons';
 import { ArtCard } from './../../components/ArtCard';
 import './styles.less';
 import { mintNFT } from '../../models';
@@ -197,13 +196,35 @@ const UploadStep = (props: {
   setAttributes: (attr: IMetadataExtension) => void;
   confirm: () => void;
 }) => {
-  const [fileList, setFileList] = useState<any[]>(props.attributes.files ?? [])
+  const [mainFile, setMainFile] = useState<any>()
+  const [coverFile, setCoverFile] = useState<any>()
+  const [image, setImage] = useState<string>("")
+
+  useEffect(() => {
+    props.setAttributes({
+      ...props.attributes,
+      files: []
+    })
+  }, [])
+
+  const uploadMsg = (category: MetadataCategory) => {
+    switch (category) {
+      case MetadataCategory.Audio:
+        return "Upload your audio creation (MP3, FLAC, WAV)"
+      case MetadataCategory.Image:
+        return "Upload your image creation (PNG, JPG, GIF)"
+      case MetadataCategory.Video:
+        return "Upload your video creation (MP4)"
+      default:
+        return "Please go back and choose a category"
+    }
+  }
 
   return (
     <>
       <Row className="call-to-action">
         <h2>Now, let's upload your creation</h2>
-        <p>
+        <p style={{ fontSize: '1.2rem' }}>
           Your file will be uploaded to the decentralized web via Arweave.
           Depending on file type, can take up to 1 minute. Arweave is a new type
           of storage that backs data with sustainable and perpetual endowments,
@@ -212,41 +233,79 @@ const UploadStep = (props: {
         </p>
       </Row>
       <Row className="content-action">
+        <h3>{uploadMsg(props.attributes.category)}</h3>
         <Dragger
           style={{ padding: 20 }}
           multiple={false}
           customRequest={info => {
             // dont upload files here, handled outside of the control
-            info?.onSuccess?.({}, null as any);
+            info?.onSuccess?.({}, null as any)
           }}
-          fileList={fileList}
+          fileList={mainFile ? [mainFile] : []}
           onChange={async info => {
             const file = info.file.originFileObj;
-            const reader = new FileReader();
-            reader.onload = function (event) {
-              props.setAttributes({
-                ...props.attributes,
-                files: [file],
-                image: (event.target?.result as string) || '',
-              })
-            };
-            if (file) reader.readAsDataURL(file);
-            setFileList(info.fileList?.slice(-1) ?? []) // Keep only the last dropped file
+            if (file) setMainFile(file)
+            if (props.attributes.category != MetadataCategory.Audio) {
+              const reader = new FileReader();
+              reader.onload = function (event) {
+                setImage((event.target?.result as string) || '')
+              }
+              if (file) reader.readAsDataURL(file)
+            }
           }}
         >
-          <p className="ant-upload-drag-icon">
-            <InboxOutlined />
-          </p>
+          <div className="ant-upload-drag-icon">
+            <h3 style={{fontWeight: 700}}>Upload your creation</h3>
+          </div>
           <p className="ant-upload-text">
-            Click or drag file to this area to upload
+            Drag and drop, or click to browse
           </p>
         </Dragger>
       </Row>
+      {props.attributes.category == MetadataCategory.Audio &&
+        <Row className="content-action">
+          <h3>Optionally, you can upload a cover image or video (PNG, JPG, GIF, MP4)</h3>
+          <Dragger
+            style={{ padding: 20 }}
+            multiple={false}
+            customRequest={info => {
+              // dont upload files here, handled outside of the control
+              info?.onSuccess?.({}, null as any)
+            }}
+            fileList={coverFile ? [coverFile] : []}
+            onChange={async info => {
+              const file = info.file.originFileObj;
+              if (file) setCoverFile(file)
+              if (props.attributes.category == MetadataCategory.Audio) {
+                const reader = new FileReader();
+                reader.onload = function (event) {
+                  setImage((event.target?.result as string) || '')
+                }
+                if (file) reader.readAsDataURL(file)
+              }
+            }}
+          >
+            <div className="ant-upload-drag-icon">
+              <h3 style={{fontWeight: 700}}>Upload your cover image or video</h3>
+            </div>
+            <p className="ant-upload-text">
+              Drag and drop, or click to browse
+            </p>
+          </Dragger>
+        </Row>
+      }
       <Row>
         <Button
           type="primary"
           size="large"
-          onClick={props.confirm}
+          onClick={() => {
+            props.setAttributes({
+              ...props.attributes,
+              files: [mainFile, coverFile].filter(f => f),
+              image,
+            })
+            props.confirm()
+          }}
           className="action-btn"
         >
           Continue to Mint
@@ -411,7 +470,7 @@ const LaunchStep = (props: {
   const files = props.attributes.files || [];
   const metadata = {
     ...(props.attributes as any),
-    files: files.map(f => f.name),
+    files: files.map(f => f?.name),
   };
   const [cost, setCost] = useState(0);
   useEffect(() => {