diff options
Diffstat (limited to 'src/mobile/ImageUpload.tsx')
| -rw-r--r-- | src/mobile/ImageUpload.tsx | 77 |
1 files changed, 37 insertions, 40 deletions
diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index 4e9d85b6d..4fff2a8e7 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -27,7 +27,6 @@ const defaultNativeImageDim = Number(DFLT_IMAGE_NATIVE_DIM.replace('px', '')); @observer 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; @@ -40,8 +39,8 @@ export class Uploader extends React.Component<ImageUploadProps> { await Docs.Prototypes.initialize(); const imgPrev = document.getElementById('img_preview'); this.setOpacity(1, '1'); // Slab 1 - if (imgPrev) { - const files: FileList | null = inputRef.current!.files; + if (imgPrev && inputRef.current) { + const { files } = inputRef.current; this.setOpacity(2, '1'); // Slab 2 if (files && files.length !== 0) { this.process = 'Uploading Files'; @@ -69,11 +68,11 @@ 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(ClientUtils.prepend('/getUserDocumentIds')); - if (!res) { + const docidsRes = await rp.get(ClientUtils.prepend('/getUserDocumentIds')); + if (!docidsRes) { throw new Error('No user id returned'); } - const field = await DocServer.GetRefField(JSON.parse(res).userDocumentId); + const field = await DocServer.GetRefField(JSON.parse(docidsRes).userDocumentId); let pending: Opt<Doc>; if (field instanceof Doc) { pending = col; @@ -100,10 +99,40 @@ export class Uploader extends React.Component<ImageUploadProps> { setTimeout(this.clearUpload, 3000); } } catch (error) { - this.error = JSON.stringify(error); + console.log(JSON.stringify(error)); } }; + // Returns the upload interface for mobile + private get uploadInterface() { + return ( + <div className="imgupload_cont"> + <div className="closeUpload" onClick={() => this.closeUpload()}> + <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 /> + <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="" alt="" /> + <div className="loadingImage"> + <div className="loadingSlab" id="slab1" /> + <div className="loadingSlab" id="slab2" /> + <div className="loadingSlab" id="slab3" /> + <div className="loadingSlab" id="slab4" /> + <div className="loadingSlab" id="slab5" /> + <div className="loadingSlab" id="slab6" /> + <div className="loadingSlab" id="slab7" /> + </div> + <p className="status">{this.process}</p> + </div> + ); + } + // Updates label after a files is selected (so user knows a file is uploaded) inputLabel = async () => { const files: FileList | null = await inputRef.current!.files; @@ -112,9 +141,7 @@ export class Uploader extends React.Component<ImageUploadProps> { } else if (files && files.length > 1) { this.nm = files.length.toString() + ' files selected'; } - }; - - // Loops through load icons, and resets buttons + }; // Loops through load icons, and resets buttons @action clearUpload = () => { for (let i = 1; i < 8; i++) { @@ -139,36 +166,6 @@ export class Uploader extends React.Component<ImageUploadProps> { if (slab) slab.style.opacity = opacity; }; - // Returns the upload interface for mobile - private get uploadInterface() { - return ( - <div className="imgupload_cont"> - <div className="closeUpload" onClick={() => this.closeUpload()}> - <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 /> - <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="" alt="" /> - <div className="loadingImage"> - <div className="loadingSlab" id="slab1" /> - <div className="loadingSlab" id="slab2" /> - <div className="loadingSlab" id="slab3" /> - <div className="loadingSlab" id="slab4" /> - <div className="loadingSlab" id="slab5" /> - <div className="loadingSlab" id="slab6" /> - <div className="loadingSlab" id="slab7" /> - </div> - <p className="status">{this.process}</p> - </div> - ); - } - render() { return <MainViewModal contents={this.uploadInterface} isDisplayed interactive dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity} overlayDisplayedOpacity={this.overlayOpacity} closeOnExternalClick={this.closeUpload} />; } |