aboutsummaryrefslogtreecommitdiff
path: root/src/mobile/ImageUpload.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/mobile/ImageUpload.tsx')
-rw-r--r--src/mobile/ImageUpload.tsx61
1 files changed, 21 insertions, 40 deletions
diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index 6a5a2dd5b..5ea626d52 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -1,4 +1,3 @@
-import * as ReactDOM from 'react-dom';
import * as rp from 'request-promise';
import { Docs } from '../client/documents/Documents';
import "./ImageUpload.scss";
@@ -12,49 +11,38 @@ import { Doc, Opt } from '../fields/Doc';
import { Cast } from '../fields/Types';
import { listSpec } from '../fields/Schema';
import { List } from '../fields/List';
-import { Scripting } from '../client/util/Scripting';
import MainViewModal from '../client/views/MainViewModal';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { MobileInterface } from './MobileInterface';
-import { CurrentUserUtils } from '../client/util/CurrentUserUtils';
export interface ImageUploadProps {
- Document: Doc;
+ Document: Doc; // Target document for upload (upload location)
}
-// const onPointerDown = (e: React.TouchEvent) => {
-// let imgInput = document.getElementById("input_image_file");
-// if (imgInput) {
-// imgInput.click();
-// }
-// }
const inputRef = React.createRef<HTMLInputElement>();
@observer
export class Uploader extends React.Component<ImageUploadProps> {
@observable error: string = "";
- @observable status: string = "";
- @observable nm: string = "Choose files";
- @observable process: string = "";
+ @observable nm: string = "Choose files"; // Text of 'Choose Files' button
+ @observable process: string = ""; // Current status of upload
onClick = async () => {
try {
const col = this.props.Document;
await Docs.Prototypes.initialize();
const imgPrev = document.getElementById("img_preview");
- // Slab 1
- this.setOpacity(1, "1");
+ this.setOpacity(1, "1"); // Slab 1
if (imgPrev) {
const files: FileList | null = inputRef.current!.files;
- // Slab 2
- this.setOpacity(2, "1");
+ this.setOpacity(2, "1"); // Slab 2
if (files && files.length !== 0) {
this.process = "Uploading Files";
for (let index = 0; index < files.length; ++index) {
const file = files[index];
const res = await Networking.UploadFilesToServer(file);
- // Slab 3
- this.setOpacity(3, "1");
+ this.setOpacity(3, "1"); // Slab 3
+ // For each item that the user has selected
res.map(async ({ result }) => {
const name = file.name;
if (result instanceof Error) {
@@ -62,16 +50,17 @@ export class Uploader extends React.Component<ImageUploadProps> {
}
const path = Utils.prepend(result.accessPaths.agnostic.client);
let doc = null;
- console.log("type: " + file.type);
+ // Case 1: File is a video
if (file.type === "video/mp4") {
doc = Docs.Create.VideoDocument(path, { _nativeWidth: 400, _width: 400, title: name });
+ // Case 2: File is a PDF document
} else if (file.type === "application/pdf") {
doc = Docs.Create.PdfDocument(path, { _nativeWidth: 400, _width: 400, title: name });
+ // Case 3: File is another document type (most likely Image)
} else {
doc = Docs.Create.ImageDocument(path, { _nativeWidth: 400, _width: 400, title: name });
}
- // Slab 4
- this.setOpacity(4, "1");
+ this.setOpacity(4, "1"); // Slab 4
const res = await rp.get(Utils.prepend("/getUserDocumentId"));
if (!res) {
throw new Error("No user id returned");
@@ -79,32 +68,27 @@ export class Uploader extends React.Component<ImageUploadProps> {
const field = await DocServer.GetRefField(res);
let pending: Opt<Doc>;
if (field instanceof Doc) {
- // if (col === Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc) {
- // pending = await Cast(field.rightSidebarCollection, Doc);
- // }
pending = col;
- //pending = await Cast(field.col, Doc);
}
if (pending) {
const data = await Cast(pending.data, listSpec(Doc));
if (data) data.push(doc);
else pending.data = new List([doc]);
- this.status = "finished";
this.setOpacity(5, "1"); // Slab 5
this.process = "File " + (index + 1).toString() + " Uploaded";
this.setOpacity(6, "1"); // Slab 6
- this.setOpacity(7, "1"); // Slab 7
}
- console.log("i: " + index + 1);
- console.log("l: " + files.length);
if ((index + 1) === files.length) {
this.process = "Uploads Completed";
+ this.setOpacity(7, "1"); // Slab 7
}
});
}
+ // Case in which the user pressed upload and no files were selected
} else {
this.process = "No file selected";
}
+ // Three seconds after upload the menu will reset
setTimeout(this.clearUpload, 3000);
}
} catch (error) {
@@ -117,14 +101,13 @@ export class Uploader extends React.Component<ImageUploadProps> {
const files: FileList | null = inputRef.current!.files;
await files;
if (files && files.length === 1) {
- console.log(files);
this.nm = files[0].name;
} else if (files && files.length > 1) {
- console.log(files.length);
this.nm = files.length.toString() + " files selected";
}
}
+ // Loops through load icons, and resets buttons
@action
clearUpload = () => {
for (let i = 1; i < 8; i++) {
@@ -136,23 +119,21 @@ export class Uploader extends React.Component<ImageUploadProps> {
inputRef.current.value = "";
}
this.process = "";
- console.log(inputRef.current!.files);
}
+ // Clears the upload and closes the upload menu
closeUpload = () => {
this.clearUpload();
MobileInterface.Instance.toggleUpload();
}
- setOpacity = (i: number, o: string) => {
- const slab = document.getElementById("slab" + i);
- if (slab) {
- console.log(slab?.id);
- slab.style.opacity = o;
- }
+ // Handles the setting of the loading bar
+ setOpacity = (index: number, opacity: string) => {
+ const slab = document.getElementById("slab" + index);
+ if (slab) slab.style.opacity = opacity;
}
-
+ // Returns the upload interface for mobile
private get uploadInterface() {
return (
<div className="imgupload_cont">
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 21:46:40 +0000