diff options
Diffstat (limited to 'src/mobile/ImageUpload.tsx')
| -rw-r--r-- | src/mobile/ImageUpload.tsx | 32 |
1 files changed, 17 insertions, 15 deletions
diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index da01e099c..4e9d85b6d 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -1,9 +1,11 @@ +/* eslint-disable jsx-a11y/no-static-element-interactions */ +/* eslint-disable jsx-a11y/click-events-have-key-events */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import * as rp from 'request-promise'; -import { Utils } from '../Utils'; +import { ClientUtils } from '../ClientUtils'; import { DocServer } from '../client/DocServer'; import { Networking } from '../client/Network'; import { Docs } from '../client/documents/Documents'; @@ -13,8 +15,9 @@ import { List } from '../fields/List'; import { listSpec } from '../fields/Schema'; import { Cast } from '../fields/Types'; import './ImageUpload.scss'; -import { MobileInterface } from './MobileInterface'; + const { DFLT_IMAGE_NATIVE_DIM } = require('../client/views/global/globalCssVariables.module.scss'); // prettier-ignore + export interface ImageUploadProps { Document: Doc; // Target document for upload (upload location) } @@ -27,9 +30,12 @@ export class Uploader extends React.Component<ImageUploadProps> { @observable error: string = ''; @observable nm: string = 'Choose files'; // Text of 'Choose Files' button @observable process: string = ''; // Current status of upload + @observable private dialogueBoxOpacity = 1; + @observable private overlayOpacity = 0.4; onClick = async () => { try { + // eslint-disable-next-line react/destructuring-assignment const col = this.props.Document; await Docs.Prototypes.initialize(); const imgPrev = document.getElementById('img_preview'); @@ -41,11 +47,12 @@ export class Uploader extends React.Component<ImageUploadProps> { this.process = 'Uploading Files'; for (let index = 0; index < files.length; ++index) { const file = files[index]; + // eslint-disable-next-line no-await-in-loop const res = await Networking.UploadFilesToServer({ file }); this.setOpacity(3, '1'); // Slab 3 // For each item that the user has selected res.map(async ({ result }) => { - const name = file.name; + const { name } = file; if (result instanceof Error) { return; } @@ -62,7 +69,7 @@ export class Uploader extends React.Component<ImageUploadProps> { doc = Docs.Create.ImageDocument(path, { _nativeWidth: defaultNativeImageDim, _width: 400, title: name }); } this.setOpacity(4, '1'); // Slab 4 - const res = await rp.get(Utils.prepend('/getUserDocumentIds')); + const res = await rp.get(ClientUtils.prepend('/getUserDocumentIds')); if (!res) { throw new Error('No user id returned'); } @@ -72,7 +79,7 @@ export class Uploader extends React.Component<ImageUploadProps> { pending = col; } if (pending) { - const data = await Cast(pending.data, listSpec(Doc)); + const data = Cast(pending.data, listSpec(Doc)); if (data) data.push(doc); else pending.data = new List([doc]); this.setOpacity(5, '1'); // Slab 5 @@ -99,8 +106,7 @@ export class Uploader extends React.Component<ImageUploadProps> { // Updates label after a files is selected (so user knows a file is uploaded) inputLabel = async () => { - const files: FileList | null = inputRef.current!.files; - await files; + const files: FileList | null = await inputRef.current!.files; if (files && files.length === 1) { this.nm = files[0].name; } else if (files && files.length > 1) { @@ -125,7 +131,6 @@ export class Uploader extends React.Component<ImageUploadProps> { // Clears the upload and closes the upload menu closeUpload = () => { this.clearUpload(); - MobileInterface.Instance.toggleUpload(); }; // Handles the setting of the loading bar @@ -139,17 +144,17 @@ export class Uploader extends React.Component<ImageUploadProps> { return ( <div className="imgupload_cont"> <div className="closeUpload" onClick={() => this.closeUpload()}> - <FontAwesomeIcon icon="window-close" size={'lg'} /> + <FontAwesomeIcon icon="window-close" size="lg" /> </div> <FontAwesomeIcon icon="upload" size="lg" style={{ fontSize: '130' }} /> - <input type="file" accept="application/pdf, video/*,image/*" className={`inputFile ${this.nm !== 'Choose files' ? 'active' : ''}`} id="input_image_file" ref={inputRef} onChange={this.inputLabel} multiple></input> + <input type="file" accept="application/pdf, video/*,image/*" className={`inputFile ${this.nm !== 'Choose files' ? 'active' : ''}`} id="input_image_file" ref={inputRef} onChange={this.inputLabel} multiple /> <label className="file" id="label" htmlFor="input_image_file"> {this.nm} </label> <div className="upload_label" onClick={this.onClick}> Upload </div> - <img id="img_preview" src=""></img> + <img id="img_preview" src="" alt="" /> <div className="loadingImage"> <div className="loadingSlab" id="slab1" /> <div className="loadingSlab" id="slab2" /> @@ -164,10 +169,7 @@ export class Uploader extends React.Component<ImageUploadProps> { ); } - @observable private dialogueBoxOpacity = 1; - @observable private overlayOpacity = 0.4; - render() { - return <MainViewModal contents={this.uploadInterface} isDisplayed={true} interactive={true} dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity} overlayDisplayedOpacity={this.overlayOpacity} closeOnExternalClick={this.closeUpload} />; + return <MainViewModal contents={this.uploadInterface} isDisplayed interactive dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity} overlayDisplayedOpacity={this.overlayOpacity} closeOnExternalClick={this.closeUpload} />; } } |