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.tsx139
1 files changed, 71 insertions, 68 deletions
diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index 8f050aedd..3b4008e3f 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -14,6 +14,7 @@ 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';
export interface ImageUploadProps {
Document: Doc;
@@ -35,83 +36,80 @@ export class Uploader extends React.Component {
@observable process: string = "";
onClick = async () => {
- console.log("uploader click");
try {
- this.status = "initializing protos";
+ await Docs.Prototypes.initialize();
+ const imgPrev = document.getElementById("img_preview");
const slab1 = document.getElementById("slab1");
if (slab1) {
slab1.style.opacity = "1";
}
- await Docs.Prototypes.initialize();
- const imgPrev = document.getElementById("img_preview");
- console.log("buddy");
if (imgPrev) {
- console.log("hi");
const files: FileList | null = inputRef.current!.files;
+ const slab2 = document.getElementById("slab2");
+ if (slab2) {
+ slab2.style.opacity = "1";
+ }
if (files && files.length !== 0) {
- this.process = "Uploading Image"
- console.log(files[0]);
- const name = files[0].name;
- const res = await Networking.UploadFilesToServer(files[0]);
- this.status = "uploading image";
- const slab2 = document.getElementById("slab2");
- if (slab2) {
- slab2.style.opacity = "1";
- }
- this.status = "upload image, getting json";
- const slab3 = document.getElementById("slab3");
- if (slab3) {
- slab3.style.opacity = "1";
- }
- res.map(async ({ result }) => {
- if (result instanceof Error) {
- return;
- }
- const path = Utils.prepend(result.accessPaths.agnostic.client);
- const doc = Docs.Create.ImageDocument(path, { _nativeWidth: 200, _width: 200, title: name });
-
- this.status = "getting user document";
- const slab4 = document.getElementById("slab4");
- if (slab4) {
- slab4.style.opacity = "1";
- }
- this.status = "upload image, getting json";
- const slab5 = document.getElementById("slab5");
- if (slab5) {
- slab5.style.opacity = "1";
+ this.process = "Uploading Files";
+ for (let index = 0; index < files.length; ++index) {
+ const file = files[index];
+ const res = await Networking.UploadFilesToServer(file);
+ const slab3 = document.getElementById("slab3");
+ if (slab3) {
+ slab3.style.opacity = "1";
}
- const res = await rp.get(Utils.prepend("/getUserDocumentId"));
- if (!res) {
- throw new Error("No user id returned");
- }
- const field = await DocServer.GetRefField(res);
- let pending: Opt<Doc>;
- if (field instanceof Doc) {
- pending = await Cast(field.rightSidebarCollection, Doc);
- }
- if (pending) {
- this.status = "has pending docs";
- const slab6 = document.getElementById("slab6");
- if (slab6) {
- slab6.style.opacity = "1";
+ res.map(async ({ result }) => {
+ const name = file.name;
+ if (result instanceof Error) {
+ return;
}
- const data = await Cast(pending.data, listSpec(Doc));
- if (data) {
- data.push(doc);
+ const path = Utils.prepend(result.accessPaths.agnostic.client);
+ let doc = null;
+ if (file.type === "video/mp4") {
+ doc = Docs.Create.VideoDocument(path, { _nativeWidth: 200, _width: 200, title: name });
} else {
- pending.data = new List([doc]);
+ doc = Docs.Create.ImageDocument(path, { _nativeWidth: 200, _width: 200, title: name });
}
- this.status = "finished";
-
- console.log("hi");
- const slab7 = document.getElementById("slab7");
- if (slab7) {
- slab7.style.opacity = "1";
+ const slab4 = document.getElementById("slab4");
+ if (slab4) {
+ slab4.style.opacity = "1";
+ }
+ const res = await rp.get(Utils.prepend("/getUserDocumentId"));
+ if (!res) {
+ throw new Error("No user id returned");
+ }
+ const field = await DocServer.GetRefField(res);
+ let pending: Opt<Doc>;
+ if (field instanceof Doc) {
+ pending = await Cast(field.rightSidebarCollection, Doc);
}
- this.process = "Image Uploaded";
+ if (pending) {
+ const data = await Cast(pending.data, listSpec(Doc));
+ if (data) {
+ data.push(doc);
+ } else {
+ pending.data = new List([doc]);
+ }
+ this.status = "finished";
+ const slab5 = document.getElementById("slab5");
+ if (slab5) {
+ slab5.style.opacity = "1";
+ }
+ this.process = "File " + (index + 1).toString() + " Uploaded";
+ if (index === files.length) {
+ const slab6 = document.getElementById("slab6");
+ if (slab6) {
+ slab6.style.opacity = "1";
+ }
+ }
+ }
+ });
+ this.process = "All Files Uploaded";
+ const slab7 = document.getElementById("slab7");
+ if (slab7) {
+ slab7.style.opacity = "1";
}
-
- });
+ }
} else {
this.process = "No file selected";
}
@@ -120,16 +118,18 @@ export class Uploader extends React.Component {
} catch (error) {
this.error = JSON.stringify(error);
}
-
}
// 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;
- if (files && files.length !== 0) {
+ 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";
}
}
@@ -163,7 +163,7 @@ export class Uploader extends React.Component {
if (slab7) {
slab7.style.opacity = "0.4";
}
- this.nm = "Choose an image";
+ this.nm = "Choose files";
if (inputRef.current) {
inputRef.current.value = "";
@@ -177,9 +177,12 @@ export class Uploader extends React.Component {
private get uploadInterface() {
return (
<div className="imgupload_cont">
- <input type="file" accept="image/*" className="inputFile" id="input_image_file" ref={inputRef} onChange={this.inputLabel}></input>
+ <input type="file" accept="video/*,image/*" className="inputFile" id="input_image_file" ref={inputRef} onChange={this.inputLabel} multiple></input>
<label className="file" id="label" htmlFor="input_image_file">{this.nm}</label>
- <div className="upload_label" onClick={this.onClick}>Upload Image</div>
+ <div className="upload_label" onClick={this.onClick}>
+ <FontAwesomeIcon icon="upload" size="lg" />
+ Upload
+ </div>
{/* <div onClick={this.onClick} className="upload_button">Upload</div> */}
<img id="img_preview" src=""></img>
{/* <p>{this.status}</p>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-11 05:08:57 +0000