1 line
14 KiB
Plaintext
1 line
14 KiB
Plaintext
{"version":3,"file":"AvatarForm.js","names":["React","Form","FormGroup","ActionGroup","FileUpload","Avatar","Button","Tooltip","OutlinedQuestionCircleIcon","AccountServiceContext","ContentAlert","Msg","AvatarForm","Component","constructor","props","context","imgData","callback","img","Image","src","onload","event","canvas","document","createElement","ctx","getContext","drawImage","MAX_WIDTH","MAX_HEIGHT","width","height","toBlob","preventDefault","form","target","formData","FormData","append","state","imageBlob","xhr","XMLHttpRequest","onreadystatechange","readyState","status","success","danger","response","setState","errors","avatar","filename","avatarSrc","avatarUrl","open","method","action","send","localize","currentAvatar","accountUrl","noAvatarSrc","reader","FileReader","onloadend","String","result","imageScale","blob","URL","createObjectURL","handleFileInputChange","file","readAsDataURL","render","avatarStyle","objectFit","border","boxShadow","handleSubmit","handleError"],"sources":["../../../src/app/content/d4science-page/AvatarForm.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport * as CSS from 'csstype';\r\n\r\nimport { Form, FormGroup, ActionGroup, FileUpload, Avatar, Button, Tooltip } from \"@patternfly/react-core\";\r\nimport { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';\r\nimport { AccountServiceContext } from '../../account-service/AccountServiceContext';\r\nimport { ContentAlert } from '../ContentAlert';\r\nimport { Msg } from '../../widgets/Msg';\r\n\r\n\r\ninterface AvatarFormProps {\r\n accountUrl: string;\r\n}\r\n\r\ninterface AvatarFormState {\r\n errors: any;\r\n imageBlob: any;\r\n filename: string;\r\n avatarUrl: string;\r\n avatarSrc: string;\r\n noAvatarSrc: string;\r\n}\r\n\r\nexport class AvatarForm extends React.Component<AvatarFormProps, AvatarFormState> {\r\n static contextType = AccountServiceContext;\r\n context: React.ContextType<typeof AccountServiceContext>;\r\n private handleFileInputChange: any;\r\n\r\n constructor(props: AvatarFormProps, context: React.ContextType<typeof AccountServiceContext>) {\r\n super(props);\r\n this.context = context;\r\n\r\n var currentAvatar = props.accountUrl + \"-avatar\";\r\n this.state = {\r\n errors: {avatar: ''},\r\n imageBlob: null,\r\n filename: \"\",\r\n avatarUrl: currentAvatar,\r\n avatarSrc: currentAvatar,\r\n noAvatarSrc: \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjAuMiwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAzNiAzNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzYgMzY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDojRjBGMEYwO30KCS5zdDF7ZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDojRDJEMkQyO30KCS5zdDJ7ZmlsbDojQjhCQkJFO30KCS5zdDN7ZmlsbDojRDJEMkQyO30KPC9zdHlsZT4KPHJlY3QgY2xhc3M9InN0MCIgd2lkdGg9IjM2IiBoZWlnaHQ9IjM2Ii8+CjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0xNy43LDIwLjFjLTMuNSwwLTYuNC0yLjktNi40LTYuNHMyLjktNi40LDYuNC02LjRzNi40LDIuOSw2LjQsNi40UzIxLjMsMjAuMSwxNy43LDIwLjF6Ii8+CjxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMy4zLDM2bDAtNi43Yy0yLDAuNC0yLjksMS40LTMuMSwzLjVMMTAuMSwzNkgxMy4zeiIvPgo8cGF0aCBjbGFzcz0ic3QzIiBkPSJNMTAuMSwzNmwwLjEtMy4yYzAuMi0yLjEsMS4xLTMuMSwzLjEtMy41bDAsNi43aDkuNGwwLTYuN2MyLDAuNCwyLjksMS40LDMuMSwzLjVsMC4xLDMuMmg0LjcKCWMtMC40LTMuOS0xLjMtOS0yLjktMTFjLTEuMS0xLjQtMi4zLTIuMi0zLjUtMi42cy0xLjgtMC42LTYuMy0wLjZzLTYuMSwwLjctNi4xLDAuN2MtMS4yLDAuNC0yLjQsMS4yLTMuNCwyLjYKCUM2LjcsMjcsNS44LDMyLjIsNS40LDM2SDEwLjF6Ii8+CjxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0yNS45LDM2bC0wLjEtMy4yYy0wLjItMi4xLTEuMS0zLjEtMy4xLTMuNWwwLDYuN0gyNS45eiIvPgo8L3N2Zz4=\"\r\n };\r\n\r\n var reader = new FileReader();\r\n reader.onloadend = (event: any) => {\r\n var imgData = String(event.target!.result)\r\n this.imageScale(imgData, (blob: Blob) => {\r\n this.setState({\r\n imageBlob: blob,\r\n avatarSrc: URL.createObjectURL(blob)\r\n })\r\n })\r\n };\r\n \r\n this.handleFileInputChange = (file: File, filename: string) => {\r\n if (filename != \"\") {\r\n this.setState({ filename: filename })\r\n reader.readAsDataURL(file)\r\n } else {\r\n this.setState({\r\n imageBlob: null,\r\n filename: \"\",\r\n avatarSrc: currentAvatar\r\n })\r\n }\r\n }\r\n }\r\n\r\n private imageScale = (imgData: string, callback: any) => {\r\n var img = new Image()\r\n img.src = imgData\r\n img.onload = (event: Event) => {\r\n var canvas = document.createElement(\"canvas\")\r\n var ctx = canvas.getContext(\"2d\")\r\n ctx!.drawImage(img, 0, 0)\r\n\r\n var MAX_WIDTH = 250\r\n var MAX_HEIGHT = 250\r\n var width = img.width\r\n var height = img.height\r\n\r\n if (width > height) {\r\n if (width > MAX_WIDTH) {\r\n height *= MAX_WIDTH / width\r\n width = MAX_WIDTH\r\n }\r\n } else {\r\n if (height > MAX_HEIGHT) {\r\n width *= MAX_HEIGHT / height\r\n height = MAX_HEIGHT\r\n }\r\n }\r\n canvas.width = width\r\n canvas.height = height\r\n ctx = canvas.getContext(\"2d\")\r\n ctx!.drawImage(img, 0, 0, width, height)\r\n canvas.toBlob(callback)\r\n }\r\n }\r\n\r\n private handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {\r\n event.preventDefault()\r\n const form = event.target as HTMLFormElement\r\n var formData = new FormData(form)\r\n formData.append(\"image\", this.state.imageBlob)\r\n var xhr = new XMLHttpRequest();\r\n xhr.onreadystatechange = () => {\r\n if (xhr.readyState == 4) {\r\n if (200 <= xhr.status && xhr.status <= 204) {\r\n ContentAlert.success('avatarUpdatedMessage')\r\n } else {\r\n ContentAlert.danger(xhr.response)\r\n }\r\n // force reload avatar\r\n this.setState({\r\n errors: {avatar: \"\"},\r\n imageBlob: null,\r\n filename: \"\",\r\n avatarSrc: this.state.avatarUrl\r\n })\r\n }\r\n }\r\n xhr.open(form.method, form.action, true);\r\n xhr.send(formData);\r\n }\r\n\r\n private handleError = (event: any) => {\r\n this.setState({\r\n errors: {avatar: Msg.localize('error-noAvatarFound')},\r\n avatarSrc: \"\"\r\n })\r\n }\r\n\r\n render() {\r\n const { filename, avatarUrl, avatarSrc, noAvatarSrc } = this.state\r\n const avatarStyle: CSS.Properties = {\r\n objectFit: 'cover',\r\n width: '150px', height: '150px',\r\n border: '1px solid lightgray',\r\n boxShadow: 'lightgray 6px 3px 10px 2px'\r\n }\r\n return (\r\n <Form id=\"avatarForm\" method=\"post\"\r\n action={avatarUrl} encType=\"multipart/form-data\"\r\n onSubmit={event => this.handleSubmit(event)}\r\n >\r\n <FormGroup label={Msg.localize('avatarLabel')}\r\n fieldId=\"avatar-current-or-preview\"\r\n helperTextInvalid={this.state.errors.avatar}\r\n validated={this.state.errors.avatar === '' ? 'success' : 'error'}\r\n >\r\n { avatarSrc !== \"\"\r\n ? <Avatar src={avatarSrc} style={avatarStyle} alt=\"Avatar image preview\" onError={this.handleError}/>\r\n : <Avatar src={noAvatarSrc} style={avatarStyle} alt=\"No avatar found\" />\r\n }\r\n </FormGroup>\r\n\r\n <FormGroup\r\n fieldId=\"avatar-upload\"\r\n label={<span>\r\n <Msg msgKey=\"uploadLabel\" />\r\n {' '}\r\n <Tooltip content={<Msg msgKey=\"avatarInfo\" />}>\r\n <OutlinedQuestionCircleIcon />\r\n </Tooltip> \r\n </span>}\r\n >\r\n <FileUpload\r\n id=\"simple-file\"\r\n filename={filename}\r\n filenamePlaceholder={Msg.localize('dragdropInfo')}\r\n browseButtonText={Msg.localize('browseButton')}\r\n clearButtonText={Msg.localize('clearButton')}\r\n onChange={this.handleFileInputChange}\r\n />\r\n\r\n </FormGroup>\r\n\r\n <ActionGroup>\r\n <Button\r\n id=\"save-btn\" type=\"submit\"\r\n variant=\"primary\"\r\n isDisabled={filename === \"\"}\r\n >\r\n <Msg msgKey=\"doSave\" />\r\n </Button>\r\n </ActionGroup>\r\n </Form>\r\n )\r\n }\r\n}\r\n"],"mappings":"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"} |