const uploadedFile = props.uploadedFile; const setUploadedFile = props.setUploadedFile; const type = props.type; const icon = props.icon; const text = props.text; const setError = props.setError; const uploadFileUpdateState = (body) => { setError(''); asyncFetch('https://ipfs.near.social/add', { method: 'POST', headers: { Accept: 'application/json' }, body, }).then((res) => { if (res.status === 500) { setError('Maximum file size is 10MB!'); setUploadedFile(undefined); } else { setError(''); const cid = res.body.cid; setUploadedFile({ file: { cid, name: body.name } }); } }); }; const filesOnChange = (files) => { if (files) { setUploadedFile({ file: { uploading: true, cid: null } }); uploadFileUpdateState(files[0]); } }; const ButtonUpload = styled.div` .custom-files { width: 206px; padding: 8px 16px; /* 8px top and bottom, 16px left and right */ color: #fff; /* Text color */ font-family: 'Helvetica Neue'; /* Font family */ font-size: 16px; /* Font size */ font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ cursor: pointer; border-radius: 2px; :hover { background-color: #686672; } } `; return ( <div className="d-flex justify-center align-items-center mt-2"> <ButtonUpload> <Files multiple={false} accepts={type} minFileSize={1} maxFileSize={10000000} clickable className="custom-files" onChange={filesOnChange} > {icon} {uploadedFile.file?.uploading ? 'Uploading' : text} </Files> </ButtonUpload> </div> );