From f13b1403be95c3800bc240420200f7bbc2d29142 Mon Sep 17 00:00:00 2001
From: Kyle Espinola <kyle.s.espinola@gmail.com>
Date: Mon, 4 Oct 2021 13:44:22 -0700
Subject: [PATCH] feat: validate nft cover images are larger than 25kb (#584)

---
 js/packages/web/src/views/artCreate/index.tsx | 33 +++++++++++++++----
 1 file changed, 27 insertions(+), 6 deletions(-)

diff --git a/js/packages/web/src/views/artCreate/index.tsx b/js/packages/web/src/views/artCreate/index.tsx
index ff5469a..07e9ceb 100644
--- a/js/packages/web/src/views/artCreate/index.tsx
+++ b/js/packages/web/src/views/artCreate/index.tsx
@@ -122,7 +122,7 @@ export const ArtCreateView = () => {
       );
 
       if (_nft) setNft(_nft);
-    } catch(e: any) {
+    } catch (e: any) {
       setAlertMessage(e.message)
     } finally {
       setMinting(false);
@@ -314,6 +314,7 @@ const UploadStep = (props: {
     props.files?.[0],
   );
   const [mainFile, setMainFile] = useState<File | undefined>(props.files?.[1]);
+  const [coverArtError, setCoverArtError] = useState<string>();
 
   const [customURL, setCustomURL] = useState<string>('');
   const [customURLErr, setCustomURLErr] = useState<string>('');
@@ -388,7 +389,20 @@ const UploadStep = (props: {
           fileList={coverFile ? [coverFile as any] : []}
           onChange={async info => {
             const file = info.file.originFileObj;
-            if (file) setCoverFile(file);
+
+            if (!file) {
+              return;
+            }
+
+            const sizeKB = file.size / 1024;
+
+            if (sizeKB < 25) {
+              setCoverArtError(`The file ${file.name} is too small. It is ${Math.round(10 * sizeKB) / 10}KB but should be at least 25KB.`);
+              return;
+            }
+
+            setCoverFile(file);
+            setCoverArtError(undefined);
           }}
         >
           <div className="ant-upload-drag-icon">
@@ -396,8 +410,14 @@ const UploadStep = (props: {
               Upload your cover image (PNG, JPG, GIF, SVG)
             </h3>
           </div>
-          <p className="ant-upload-text">Drag and drop, or click to browse</p>
+          {coverArtError ? (
+            <Text type="danger">{coverArtError}</Text>
+          ) : (
+            <p className="ant-upload-text">Drag and drop, or click to browse</p>
+          )}
+
         </Dragger>
+
       </Row>
       {props.attributes.properties?.category !== MetadataCategory.Image && (
         <Row
@@ -499,7 +519,9 @@ const UploadStep = (props: {
               image: coverFile?.name || '',
               animation_url: (props.attributes.properties?.category !== MetadataCategory.Image && customURL) ? customURL : mainFile && mainFile.name,
             });
-            props.setFiles([coverFile, mainFile].filter(f => f) as File[]);
+            const files = [coverFile, mainFile].filter(f => f) as File[];
+
+            props.setFiles(files);
             props.confirm();
           }}
           style={{ marginTop: 24 }}
@@ -1155,8 +1177,7 @@ const Congrats = (props: {
   const newTweetURL = () => {
     const params = {
       text: "I've created a new NFT artwork on Metaplex, check it out!",
-      url: `${
-        window.location.origin
+      url: `${window.location.origin
         }/#/art/${props.nft?.metadataAccount.toString()}`,
       hashtags: 'NFT,Crypto,Metaplex',
       // via: "Metaplex",