feat: validate nft cover images are larger than 25kb (#584)
This commit is contained in:
parent
7277979546
commit
f13b1403be
|
@ -122,7 +122,7 @@ export const ArtCreateView = () => {
|
||||||
);
|
);
|
||||||
|
|
||||||
if (_nft) setNft(_nft);
|
if (_nft) setNft(_nft);
|
||||||
} catch(e: any) {
|
} catch (e: any) {
|
||||||
setAlertMessage(e.message)
|
setAlertMessage(e.message)
|
||||||
} finally {
|
} finally {
|
||||||
setMinting(false);
|
setMinting(false);
|
||||||
|
@ -314,6 +314,7 @@ const UploadStep = (props: {
|
||||||
props.files?.[0],
|
props.files?.[0],
|
||||||
);
|
);
|
||||||
const [mainFile, setMainFile] = useState<File | undefined>(props.files?.[1]);
|
const [mainFile, setMainFile] = useState<File | undefined>(props.files?.[1]);
|
||||||
|
const [coverArtError, setCoverArtError] = useState<string>();
|
||||||
|
|
||||||
const [customURL, setCustomURL] = useState<string>('');
|
const [customURL, setCustomURL] = useState<string>('');
|
||||||
const [customURLErr, setCustomURLErr] = useState<string>('');
|
const [customURLErr, setCustomURLErr] = useState<string>('');
|
||||||
|
@ -388,7 +389,20 @@ const UploadStep = (props: {
|
||||||
fileList={coverFile ? [coverFile as any] : []}
|
fileList={coverFile ? [coverFile as any] : []}
|
||||||
onChange={async info => {
|
onChange={async info => {
|
||||||
const file = info.file.originFileObj;
|
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">
|
<div className="ant-upload-drag-icon">
|
||||||
|
@ -396,8 +410,14 @@ const UploadStep = (props: {
|
||||||
Upload your cover image (PNG, JPG, GIF, SVG)
|
Upload your cover image (PNG, JPG, GIF, SVG)
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</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>
|
</Dragger>
|
||||||
|
|
||||||
</Row>
|
</Row>
|
||||||
{props.attributes.properties?.category !== MetadataCategory.Image && (
|
{props.attributes.properties?.category !== MetadataCategory.Image && (
|
||||||
<Row
|
<Row
|
||||||
|
@ -499,7 +519,9 @@ const UploadStep = (props: {
|
||||||
image: coverFile?.name || '',
|
image: coverFile?.name || '',
|
||||||
animation_url: (props.attributes.properties?.category !== MetadataCategory.Image && customURL) ? customURL : mainFile && mainFile.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();
|
props.confirm();
|
||||||
}}
|
}}
|
||||||
style={{ marginTop: 24 }}
|
style={{ marginTop: 24 }}
|
||||||
|
@ -1155,8 +1177,7 @@ const Congrats = (props: {
|
||||||
const newTweetURL = () => {
|
const newTweetURL = () => {
|
||||||
const params = {
|
const params = {
|
||||||
text: "I've created a new NFT artwork on Metaplex, check it out!",
|
text: "I've created a new NFT artwork on Metaplex, check it out!",
|
||||||
url: `${
|
url: `${window.location.origin
|
||||||
window.location.origin
|
|
||||||
}/#/art/${props.nft?.metadataAccount.toString()}`,
|
}/#/art/${props.nft?.metadataAccount.toString()}`,
|
||||||
hashtags: 'NFT,Crypto,Metaplex',
|
hashtags: 'NFT,Crypto,Metaplex',
|
||||||
// via: "Metaplex",
|
// via: "Metaplex",
|
||||||
|
|
Loading…
Reference in New Issue