From 55502b8d24dbbad87af5b9059cc3a746e4db91d9 Mon Sep 17 00:00:00 2001 From: James Hu <51237606+jameshu111@users.noreply.github.com> Date: Wed, 7 Jun 2023 11:45:20 -0400 Subject: logging --- src/client/Network.ts | 20 ++++++++++++-------- src/client/documents/Documents.ts | 8 +++++--- src/client/views/nodes/LoadingBox.tsx | 4 +++- 3 files changed, 20 insertions(+), 12 deletions(-) (limited to 'src/client') diff --git a/src/client/Network.ts b/src/client/Network.ts index 19eff3b3b..28825823d 100644 --- a/src/client/Network.ts +++ b/src/client/Network.ts @@ -17,21 +17,25 @@ export namespace Networking { return requestPromise.post(options); } + export interface FileGuidPair { + file: File; + guid?: string; + } /** * Handles uploading basic file types to server and makes the API call to "/uploadFormData" endpoint * with the mapping of GUID to filem as parameters. * - * @param files the files to be uploaded to the server + * @param fileguidpairs the files to be uploaded to the server * @returns the response as a json from the server */ - export async function UploadFilesToServer(files: File | File[]): Promise[]> { - const formData = new FormData(); - if (Array.isArray(files)) { - if (!files.length) { + export async function UploadFilesToServer(fileguidpairs: FileGuidPair | FileGuidPair[]): Promise[]> { + const formData = new FormData(); + if (Array.isArray(fileguidpairs)) { + if (!fileguidpairs.length) { return []; } const maxFileSize = 50000000; - if (files.some(f => f.size > maxFileSize)) { + if (fileguidpairs.some(f => f.file.size > maxFileSize)) { return new Promise(res => res([ { @@ -41,9 +45,9 @@ export namespace Networking { ]) ); } - files.forEach(file => formData.append(Utils.GenerateGuid(), file)); + fileguidpairs.forEach(fileguidpair => formData.append(fileguidpair.guid ?? Utils.GenerateGuid(), fileguidpair.file)); } else { - formData.append(Utils.GenerateGuid(), files); + formData.append(fileguidpairs.guid ?? Utils.GenerateGuid(), fileguidpairs.file); } const parameters = { method: 'POST', diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 515a870b5..75998ac40 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -2,7 +2,7 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { action, runInAction } from 'mobx'; import { basename } from 'path'; import { DateField } from '../../fields/DateField'; -import { Doc, DocListCast, Field, Initializing, Opt, updateCachedAcls } from '../../fields/Doc'; +import { DataSym, Doc, DocListCast, Field, FieldsSym, Initializing, Opt, updateCachedAcls } from '../../fields/Doc'; import { Id } from '../../fields/FieldSymbols'; import { HtmlField } from '../../fields/HtmlField'; import { InkField, PointData } from '../../fields/InkField'; @@ -1843,7 +1843,9 @@ export namespace DocUtils { export async function uploadFilesToDocs(files: File[], options: DocumentOptions) { const generatedDocuments: Doc[] = []; - const upfiles = await Networking.UploadFilesToServer(files); + const fileNoGuidPairs: Networking.FileGuidPair[] = []; + files.map(file => fileNoGuidPairs.push({file : file})); + const upfiles = await Networking.UploadFilesToServer(fileNoGuidPairs); for (const { source: { name, type }, result, @@ -1855,7 +1857,7 @@ export namespace DocUtils { export function uploadFileToDoc(file: File, options: DocumentOptions, overwriteDoc: Doc) { const generatedDocuments: Doc[] = []; - Networking.UploadFilesToServer([file]).then(upfiles => { + Networking.UploadFilesToServer([{file: file, guid: overwriteDoc[Id]}]).then(upfiles => { const { source: { name, type }, result, diff --git a/src/client/views/nodes/LoadingBox.tsx b/src/client/views/nodes/LoadingBox.tsx index 8c5255f80..843da69b3 100644 --- a/src/client/views/nodes/LoadingBox.tsx +++ b/src/client/views/nodes/LoadingBox.tsx @@ -8,6 +8,7 @@ import { Networking } from '../../Network'; import { ViewBoxAnnotatableComponent } from '../DocComponent'; import { FieldView, FieldViewProps } from './FieldView'; import './LoadingBox.scss'; +import { Id } from '../../../fields/FieldSymbols'; /** * LoadingBox Class represents a placeholder doc for documents that are currently @@ -39,11 +40,12 @@ export class LoadingBox extends ViewBoxAnnotatableComponent() { _timer: any; @observable progress = ''; componentDidMount() { + console.log(StrCast(this.rootDoc[Id])); if (!Doc.CurrentlyLoading?.includes(this.rootDoc)) { this.rootDoc.loadingError = 'Upload interrupted, please try again'; } else { const updateFunc = async () => { - const result = await Networking.QueryYoutubeProgress(StrCast(this.rootDoc.title)); + const result = await Networking.QueryYoutubeProgress(StrCast(this.rootDoc[Id])); runInAction(() => (this.progress = result.progress)); this._timer = setTimeout(updateFunc, 1000); }; -- cgit v1.2.3-70-g09d2 From 27f518632c24f69fff360bef36eb0e5426167b83 Mon Sep 17 00:00:00 2001 From: James Hu <51237606+jameshu111@users.noreply.github.com> Date: Wed, 7 Jun 2023 12:30:53 -0400 Subject: Update other uses --- src/client/documents/Documents.ts | 4 ++-- src/client/util/Import & Export/DirectoryImportBox.tsx | 2 +- src/client/util/ReportManager.tsx | 2 +- src/client/views/nodes/AudioBox.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 2 +- src/client/views/nodes/RecordingBox/RecordingView.tsx | 2 +- src/client/views/nodes/ScreenshotBox.tsx | 4 ++-- src/mobile/ImageUpload.tsx | 2 +- src/server/ApiManagers/UploadManager.ts | 2 +- 9 files changed, 11 insertions(+), 11 deletions(-) (limited to 'src/client') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 77f0e1e5e..0030af982 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -1844,7 +1844,7 @@ export namespace DocUtils { export async function uploadFilesToDocs(files: File[], options: DocumentOptions) { const generatedDocuments: Doc[] = []; const fileNoGuidPairs: Networking.FileGuidPair[] = []; - files.map(file => fileNoGuidPairs.push({file : file})); + files.map(file => fileNoGuidPairs.push({file})); const upfiles = await Networking.UploadFilesToServer(fileNoGuidPairs); for (const { source: { name, type }, @@ -1857,7 +1857,7 @@ export namespace DocUtils { export function uploadFileToDoc(file: File, options: DocumentOptions, overwriteDoc: Doc) { const generatedDocuments: Doc[] = []; - Networking.UploadFilesToServer([{file: file, guid: overwriteDoc[Id]}]).then(upfiles => { + Networking.UploadFilesToServer([{file, guid: overwriteDoc[Id]}]).then(upfiles => { const { source: { name, type }, result, diff --git a/src/client/util/Import & Export/DirectoryImportBox.tsx b/src/client/util/Import & Export/DirectoryImportBox.tsx index b9bb22564..1a4c2450e 100644 --- a/src/client/util/Import & Export/DirectoryImportBox.tsx +++ b/src/client/util/Import & Export/DirectoryImportBox.tsx @@ -112,7 +112,7 @@ export class DirectoryImportBox extends React.Component { sizes.push(file.size); modifiedDates.push(file.lastModified); }); - collector.push(...(await Networking.UploadFilesToServer(batch))); + collector.push(...(await Networking.UploadFilesToServer(batch.map(file =>({file}))))); runInAction(() => (this.completed += batch.length)); }); diff --git a/src/client/util/ReportManager.tsx b/src/client/util/ReportManager.tsx index 51742d455..4c1020455 100644 --- a/src/client/util/ReportManager.tsx +++ b/src/client/util/ReportManager.tsx @@ -173,7 +173,7 @@ export class ReportManager extends React.Component<{}> { // upload the files to the server if (input.files && input.files.length !== 0) { const fileArray: File[] = Array.from(input.files); - (Networking.UploadFilesToServer(fileArray)).then(links => { + (Networking.UploadFilesToServer(fileArray.map(file =>({file})))).then(links => { console.log('finshed uploading', links.map(this.getServerPath)); this.setFileLinks((links ?? []).map(this.getServerPath)); }) diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 0cb849923..6558d215a 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -233,7 +233,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent { - const [{ result }] = await Networking.UploadFilesToServer(e.data); + const [{ result }] = await Networking.UploadFilesToServer({file: e.data}); if (!(result instanceof Error)) { this.props.Document[this.fieldKey] = new AudioField(result.accessPaths.agnostic.client); } diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 0769e26d0..687683e6e 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1013,7 +1013,7 @@ export class DocumentViewInternal extends DocComponent { - const [{ result }] = await Networking.UploadFilesToServer(e.data); + const [{ result }] = await Networking.UploadFilesToServer({file: e.data}); if (!(result instanceof Error)) { const audioField = new AudioField(result.accessPaths.agnostic.client); const audioAnnos = Cast(dataDoc[field + '-audioAnnotations'], listSpec(AudioField), null); diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx index 424ebc384..51eb774e2 100644 --- a/src/client/views/nodes/RecordingBox/RecordingView.tsx +++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx @@ -67,7 +67,7 @@ export function RecordingView(props: IRecordingViewProps) { const videoFiles = videos.map((vid, i) => new File(vid.videoChunks, `segvideo${i}.mkv`, { type: vid.videoChunks[0].type, lastModified: Date.now() })); // upload the segments to the server and get their server access paths - const serverPaths: string[] = (await Networking.UploadFilesToServer(videoFiles)).map(res => (res.result instanceof Error ? '' : res.result.accessPaths.agnostic.server)); + const serverPaths: string[] = (await Networking.UploadFilesToServer(videoFiles.map(file => ({file})))).map(res => (res.result instanceof Error ? '' : res.result.accessPaths.agnostic.server)); // concat the segments together using post call const result: Upload.AccessPathInfo | Error = await Networking.PostToServer('/concatVideos', serverPaths); diff --git a/src/client/views/nodes/ScreenshotBox.tsx b/src/client/views/nodes/ScreenshotBox.tsx index 1e178b123..312b3c619 100644 --- a/src/client/views/nodes/ScreenshotBox.tsx +++ b/src/client/views/nodes/ScreenshotBox.tsx @@ -224,7 +224,7 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent aud_chunks.push(e.data); this._audioRec.onstop = async (e: any) => { - const [{ result }] = await Networking.UploadFilesToServer(aud_chunks); + const [{ result }] = await Networking.UploadFilesToServer(aud_chunks.map((file: any) => ({file}))); if (!(result instanceof Error)) { this.dataDoc[this.props.fieldKey + '-audio'] = new AudioField(result.accessPaths.agnostic.client); } @@ -237,7 +237,7 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent { console.log('screenshotbox: upload'); const file = new File(vid_chunks, `${this.rootDoc[Id]}.mkv`, { type: vid_chunks[0].type, lastModified: Date.now() }); - const [{ result }] = await Networking.UploadFilesToServer(file); + const [{ result }] = await Networking.UploadFilesToServer({file}); this.dataDoc[this.fieldKey + '_duration'] = (new Date().getTime() - this.recordingStart!) / 1000; if (!(result instanceof Error)) { // convert this screenshotBox into normal videoBox diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index f910d765e..da38fcaee 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -42,7 +42,7 @@ export class Uploader extends React.Component { this.process = "Uploading Files"; for (let index = 0; index < files.length; ++index) { const file = files[index]; - const res = await Networking.UploadFilesToServer(file); + const res = await Networking.UploadFilesToServer({file}); this.setOpacity(3, "1"); // Slab 3 // For each item that the user has selected res.map(async ({ result }) => { diff --git a/src/server/ApiManagers/UploadManager.ts b/src/server/ApiManagers/UploadManager.ts index 74c06b4a6..94f744848 100644 --- a/src/server/ApiManagers/UploadManager.ts +++ b/src/server/ApiManagers/UploadManager.ts @@ -75,7 +75,7 @@ export default class UploadManager extends ApiManager { for (const key in files) { const f = files[key]; if (!Array.isArray(f)) { - const result = await DashUploadUtils.upload(f); + const result = await DashUploadUtils.upload(f, key); result && !(result.result instanceof Error) && results.push(result); } } -- cgit v1.2.3-70-g09d2 From b2c0855d6d701bd80666e0693bd193dc69efb4a0 Mon Sep 17 00:00:00 2001 From: James Hu <51237606+jameshu111@users.noreply.github.com> Date: Wed, 7 Jun 2023 12:45:08 -0400 Subject: Comments --- src/client/Network.ts | 16 +++++++++++++--- src/client/documents/Documents.ts | 18 ++++++++++++++++-- src/server/ApiManagers/UploadManager.ts | 2 +- src/server/DashUploadUtils.ts | 2 +- 4 files changed, 31 insertions(+), 7 deletions(-) (limited to 'src/client') diff --git a/src/client/Network.ts b/src/client/Network.ts index 28825823d..9c293f9af 100644 --- a/src/client/Network.ts +++ b/src/client/Network.ts @@ -17,19 +17,26 @@ export namespace Networking { return requestPromise.post(options); } + /** + * FileGuidPair attaches a guid to a file that is being uploaded, + * allowing the client to track the upload progress. + * + * When files are dragged to the canvas, the overWriteDoc's ID is + * used as the guid. Otherwise, a new guid is generated. + */ export interface FileGuidPair { file: File; guid?: string; } /** * Handles uploading basic file types to server and makes the API call to "/uploadFormData" endpoint - * with the mapping of GUID to filem as parameters. + * with the mapping of guid to filem as parameters. * - * @param fileguidpairs the files to be uploaded to the server + * @param fileguidpairs the files and corresponding guids to be uploaded to the server * @returns the response as a json from the server */ export async function UploadFilesToServer(fileguidpairs: FileGuidPair | FileGuidPair[]): Promise[]> { - const formData = new FormData(); + const formData = new FormData(); if (Array.isArray(fileguidpairs)) { if (!fileguidpairs.length) { return []; @@ -45,8 +52,11 @@ export namespace Networking { ]) ); } + // If the fileguidpair has a guid to use (From the overwriteDoc) use that guid. Otherwise, + // generate a new guid. fileguidpairs.forEach(fileguidpair => formData.append(fileguidpair.guid ?? Utils.GenerateGuid(), fileguidpair.file)); } else { + // Handle the case where fileguidpairs is a single file. formData.append(fileguidpairs.guid ?? Utils.GenerateGuid(), fileguidpairs.file); } const parameters = { diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 0030af982..06b48fe96 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -1841,10 +1841,22 @@ export namespace DocUtils { }); } + /** + * uploadFilesToDocs will take in an array of Files, and creates documents for the + * new files. + * + * @param files an array of files that will be uploaded + * @param options options to use while uploading + * @returns + */ export async function uploadFilesToDocs(files: File[], options: DocumentOptions) { const generatedDocuments: Doc[] = []; - const fileNoGuidPairs: Networking.FileGuidPair[] = []; - files.map(file => fileNoGuidPairs.push({file})); + + // UploadFilesToServer takes an array of FileGuidPairs, + // but these files do not have overwriteDocs, so + // we do not set guid, allowing the client to generate one. + const fileNoGuidPairs: Networking.FileGuidPair[] = files.map(file => ({file})); + const upfiles = await Networking.UploadFilesToServer(fileNoGuidPairs); for (const { source: { name, type }, @@ -1857,6 +1869,8 @@ export namespace DocUtils { export function uploadFileToDoc(file: File, options: DocumentOptions, overwriteDoc: Doc) { const generatedDocuments: Doc[] = []; + // Since this file has an overwriteDoc, we can set the client tracking guid + // to the overwriteDoc's guid. Networking.UploadFilesToServer([{file, guid: overwriteDoc[Id]}]).then(upfiles => { const { source: { name, type }, diff --git a/src/server/ApiManagers/UploadManager.ts b/src/server/ApiManagers/UploadManager.ts index 94f744848..ba6d7acfe 100644 --- a/src/server/ApiManagers/UploadManager.ts +++ b/src/server/ApiManagers/UploadManager.ts @@ -75,7 +75,7 @@ export default class UploadManager extends ApiManager { for (const key in files) { const f = files[key]; if (!Array.isArray(f)) { - const result = await DashUploadUtils.upload(f, key); + const result = await DashUploadUtils.upload(f, key); // key is the guid used by the client to track upload progress. result && !(result.result instanceof Error) && results.push(result); } } diff --git a/src/server/DashUploadUtils.ts b/src/server/DashUploadUtils.ts index 971fefb5a..eaaac4e6d 100644 --- a/src/server/DashUploadUtils.ts +++ b/src/server/DashUploadUtils.ts @@ -184,7 +184,7 @@ export namespace DashUploadUtils { export async function upload(file: File, overwriteGuid?: string): Promise { const { type, path, name } = file; const types = type?.split('/') ?? []; - uploadProgress.set(overwriteGuid ?? name, 'uploading'); + uploadProgress.set(overwriteGuid ?? name, 'uploading'); // If the client sent a guid it uses to track upload progress, use that guid. Otherwise, use the file's name. const category = types[0]; let format = `.${types[1]}`; -- cgit v1.2.3-70-g09d2 From 09467c6c7ba208c4be22ee45bd4c94326e9c427b Mon Sep 17 00:00:00 2001 From: James Hu <51237606+jameshu111@users.noreply.github.com> Date: Wed, 7 Jun 2023 12:47:51 -0400 Subject: update comments --- src/client/Network.ts | 5 ++--- src/client/documents/Documents.ts | 7 ++----- 2 files changed, 4 insertions(+), 8 deletions(-) (limited to 'src/client') diff --git a/src/client/Network.ts b/src/client/Network.ts index 9c293f9af..1ab9c6fc5 100644 --- a/src/client/Network.ts +++ b/src/client/Network.ts @@ -30,7 +30,7 @@ export namespace Networking { } /** * Handles uploading basic file types to server and makes the API call to "/uploadFormData" endpoint - * with the mapping of guid to filem as parameters. + * with the mapping of guid to files as parameters. * * @param fileguidpairs the files and corresponding guids to be uploaded to the server * @returns the response as a json from the server @@ -52,8 +52,7 @@ export namespace Networking { ]) ); } - // If the fileguidpair has a guid to use (From the overwriteDoc) use that guid. Otherwise, - // generate a new guid. + // If the fileguidpair has a guid to use (From the overwriteDoc) use that guid. Otherwise, generate a new guid. fileguidpairs.forEach(fileguidpair => formData.append(fileguidpair.guid ?? Utils.GenerateGuid(), fileguidpair.file)); } else { // Handle the case where fileguidpairs is a single file. diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 06b48fe96..c1abd6e71 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -1852,9 +1852,7 @@ export namespace DocUtils { export async function uploadFilesToDocs(files: File[], options: DocumentOptions) { const generatedDocuments: Doc[] = []; - // UploadFilesToServer takes an array of FileGuidPairs, - // but these files do not have overwriteDocs, so - // we do not set guid, allowing the client to generate one. + // These files do not have overwriteDocs, so we do not set the guid and let the client generate one. const fileNoGuidPairs: Networking.FileGuidPair[] = files.map(file => ({file})); const upfiles = await Networking.UploadFilesToServer(fileNoGuidPairs); @@ -1869,8 +1867,7 @@ export namespace DocUtils { export function uploadFileToDoc(file: File, options: DocumentOptions, overwriteDoc: Doc) { const generatedDocuments: Doc[] = []; - // Since this file has an overwriteDoc, we can set the client tracking guid - // to the overwriteDoc's guid. + // Since this file has an overwriteDoc, we can set the client tracking guid to the overwriteDoc's guid. Networking.UploadFilesToServer([{file, guid: overwriteDoc[Id]}]).then(upfiles => { const { source: { name, type }, -- cgit v1.2.3-70-g09d2 From f5e5abfd54bae0767641dd4d3cfdfc224e690288 Mon Sep 17 00:00:00 2001 From: James Hu <51237606+jameshu111@users.noreply.github.com> Date: Wed, 7 Jun 2023 13:19:31 -0400 Subject: Clean up and comment --- src/client/views/nodes/LoadingBox.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'src/client') diff --git a/src/client/views/nodes/LoadingBox.tsx b/src/client/views/nodes/LoadingBox.tsx index 843da69b3..fcbd0128d 100644 --- a/src/client/views/nodes/LoadingBox.tsx +++ b/src/client/views/nodes/LoadingBox.tsx @@ -40,12 +40,11 @@ export class LoadingBox extends ViewBoxAnnotatableComponent() { _timer: any; @observable progress = ''; componentDidMount() { - console.log(StrCast(this.rootDoc[Id])); if (!Doc.CurrentlyLoading?.includes(this.rootDoc)) { this.rootDoc.loadingError = 'Upload interrupted, please try again'; } else { const updateFunc = async () => { - const result = await Networking.QueryYoutubeProgress(StrCast(this.rootDoc[Id])); + const result = await Networking.QueryYoutubeProgress(StrCast(this.rootDoc[Id])); // We use the guid of the overwriteDoc to track file uploads. runInAction(() => (this.progress = result.progress)); this._timer = setTimeout(updateFunc, 1000); }; -- cgit v1.2.3-70-g09d2 From 7d9a5bc08cb8c5f72a6795aef9374eef12a7cdef Mon Sep 17 00:00:00 2001 From: James Hu <51237606+jameshu111@users.noreply.github.com> Date: Thu, 8 Jun 2023 13:19:09 -0400 Subject: extra comment forgot to commit --- src/client/Network.ts | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'src/client') diff --git a/src/client/Network.ts b/src/client/Network.ts index 1ab9c6fc5..d606b9854 100644 --- a/src/client/Network.ts +++ b/src/client/Network.ts @@ -2,6 +2,11 @@ import { Utils } from '../Utils'; import requestPromise = require('request-promise'); import { Upload } from '../server/SharedMediaTypes'; +/** + * Networking is repsonsible for connecting the client to the server. Networking + * mainly provides methods that the client can use to begin the process of + * interacting with the server, such as fetching or uploading files. + */ export namespace Networking { export async function FetchFromServer(relativeRoute: string) { return (await fetch(relativeRoute)).text(); -- cgit v1.2.3-70-g09d2