{content}
\n\nHelpText.propTypes = {\n content: PropTypes.string.isRequired\n}\n\nexport default HelpText\n","import styled from \"styled-components\"\n\nexport const StyledField = styled.input`\n display: none;\n`\n\nexport const Div = styled.div`\n display: flex;\n align-items: center;\n`\n\nexport const Text = styled.span`\n margin-left: 1rem;\n`\n\nexport const P = styled.p`\n margin: 1rem 0 0 0;\n`\n","import React, { Fragment, useState } from \"react\"\nimport PropTypes from \"prop-types\"\nimport { StyledField, Div, Text, P } from \"./styles\"\nimport Button from \"../../button\"\n\nconst MAX_FILE_SIZE = 10 * 1024 * 1024 // 10MB in bytes\n\nconst FileField = ({ handleInputChange, ...rest }) => {\n const [error, setError] = useState(\"\")\n const { alert } = rest\n\n const onChange = (event) => {\n const { name, files } = event.target\n const file = files[0]\n let errorMessage = \"\"\n\n if (file?.size >= MAX_FILE_SIZE && alert !== undefined) {\n errorMessage = \"Chosen file is above limit.\"\n alert.error(errorMessage)\n handleInputChange(name, null)\n return\n }\n\n let reader = new FileReader()\n reader.onload = () => {\n const text = document.getElementById(`${rest[\"name\"]}SelectedText`)\n text.innerHTML = file.name\n text.setAttribute(\"data-reader-result\", reader.result)\n setError(\"\")\n handleInputChange(name, file)\n }\n if (file instanceof Blob) reader.readAsDataURL(file)\n }\n\n const triggerFileUpload = (event) => {\n event.preventDefault()\n document.getElementById(`${rest[\"name\"]}FileField`).click()\n }\n\n return (\nPlease upload a file under 10MB.
\n{error}
}\n