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> );