mirror of https://github.com/certusone/oyster.git
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>
This commit is contained in:
parent
f017bc7c4a
commit
f912149e04
|
@ -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;
|
||||
if (file) setMainFile(file)
|
||||
if (props.attributes.category != MetadataCategory.Audio) {
|
||||
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
|
||||
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(() => {
|
||||
|
|
Loading…
Reference in New Issue