Add demo for FileAttachmentForm & WebDav public components (#41)

- File attachment upload example that uses FileAttachmentForm & WebDav's uploadWebDavFile api.
- Panel to view uploaded attachments that uses WebDav's getWebDavFiles api.

Author: labkey-bpatel

demo/README.md

@@ -7,10 +7,11 @@ including keeping the standard LabKey header and header menus.
 Clone the tutorialModules repo into `/server/modules` directory and add the directory in `settings.gradle`.  You can then build this module 
 using the [LabKey Gradle build]. This will install necessary packages, generate resources and put resources in correct LabKey module's directories.
 
-There are three example React pages:
+The demo module includes the following example React pages:
 - http://localhost:8080/labkey/home/demo-helloWorld.view?
 - http://localhost:8080/labkey/home/demo-queryModel.view?
 - http://localhost:8080/labkey/home/demo-todoList.view?
+- http://localhost:8080/labkey/home/demo-fileAttachmentForm.view?
 
 Also, this module has an example of using the todoList page in a LabKey webpart.
 
@@ -42,6 +43,7 @@ pages (note the "Dev" added to the end of the action name).
 - http://localhost:8080/labkey/home/demo-helloWorldDev.view?
 - http://localhost:8080/labkey/home/demo-queryModelDev.view?
 - http://localhost:8080/labkey/home/demo-todoListDev.view?
+- http://localhost:8080/labkey/home/demo-fileAttachmentFormDev.view?
 
 <a name="jest"></a>
 ## Jest Tests

demo/src/client/FileAttachmentPage/FileAttachmentForm.tsx

@@ -0,0 +1,58 @@
+/*
+ * Copyright (c) 2020 LabKey Corporation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React, { FC, memo, useCallback, useState } from 'react'
+import { Alert } from "@labkey/components";
+
+import { FileAttachmentPanel } from "./FileAttachmentPanel";
+import { FileDisplayPanel } from './FileDisplayPanel';
+import { FileAttachmentModel } from "./models";
+import { uploadMyAttachmentsToServer } from "./actions";
+
+import './fileAttachment.scss';
+
+export const App : FC = memo(() => {
+    const [fileAttachmentModel, setFileAttachmentModel] = useState<FileAttachmentModel>(new FileAttachmentModel());
+
+    const fileAttachmentChange = useCallback((model:FileAttachmentModel)=> {
+        setFileAttachmentModel(model);
+    }, [setFileAttachmentModel]);
+
+    const onSaveBtnHandler = useCallback(() => {
+        uploadMyAttachmentsToServer(fileAttachmentModel)
+            .then(r => {
+                if (r) {
+                    window.location.reload();
+                }
+            })
+            .catch(reject => {
+                alert(reject);
+            });
+    }, [fileAttachmentModel]);
+
+    return (
+        <>
+            <Alert bsStyle="info">Note: saving uploaded files will place them in the LabKey filesystem for this container.</Alert>
+
+            <FileAttachmentPanel
+                model={fileAttachmentModel}
+                onInputChange={fileAttachmentChange}
+                onSaveBtnHandler={onSaveBtnHandler}
+            />
+
+            <FileDisplayPanel />
+        </>
+    )
+})

demo/src/client/FileAttachmentPage/FileAttachmentPanel.tsx

@@ -0,0 +1,43 @@
+import React, { FC, memo, useCallback } from 'react';
+import { FileAttachmentForm } from '@labkey/components';
+import { Map } from 'immutable';
+import { Draft, produce } from 'immer';
+import { FileAttachmentModel } from "./models";
+import { Panel } from 'react-bootstrap';
+
+interface Props {
+    model: FileAttachmentModel;
+    onInputChange: (model: FileAttachmentModel) => void;
+    onSaveBtnHandler: () => void;
+}
+
+// Functional component which would be rendered as part of the parent component
+export const FileAttachmentPanel: FC<Props> = memo((props) => {
+    const { model, onInputChange, onSaveBtnHandler } = props;
+
+    const onFileChange = useCallback((files: Map<string, File>) => {
+        const updatedModel = produce(model, (draft: Draft<FileAttachmentModel>) => {
+            draft['filesToUpload'] = files;
+        });
+        onInputChange(updatedModel);
+    }, [model, onInputChange]);
+
+    return (
+            <div className='panel panel-default'>
+                <div className='panel-heading'>
+                    My File Attachments
+                </div>
+                <div className='panel-body'>
+                    <FileAttachmentForm
+                        acceptedFormats=".pdf, .jpg"
+                        allowDirectories={false}
+                        allowMultiple={true}
+                        showLabel={false}
+                        showButtons={true}
+                        onSubmit={onSaveBtnHandler}
+                        onFileChange={onFileChange}
+                    />
+                </div>
+            </div>
+    );
+})

demo/src/client/FileAttachmentPage/FileDisplayPanel.tsx

@@ -0,0 +1,71 @@
+import React, { FC, memo, useEffect, useState } from 'react';
+import { Draft, produce } from "immer";
+import { ActionURL } from "@labkey/api";
+import { LoadingSpinner } from '@labkey/components';
+
+import { MY_ATTACHMENTS_DIR } from "./constants";
+import { FileAttachmentModel, SavedFileModel } from "./models";
+import { getUploadedFiles } from "./actions";
+
+export const FileDisplayPanel : FC = memo(() => {
+    const [loading, setLoading] = useState<boolean>(true);
+    const [fileAttachmentModel, setFileAttachmentModel] = useState<FileAttachmentModel>(new FileAttachmentModel());
+
+    //equivalent to componentDidMount and componentDidUpdate
+    useEffect(() => {
+        getUploadedFiles(ActionURL.getContainer(), MY_ATTACHMENTS_DIR, false)
+            .then((files:Array<SavedFileModel>) => {
+                if (files?.length > 0) {
+                    const updatedModel = produce(fileAttachmentModel, (draft: Draft<FileAttachmentModel>) => {
+                        draft['savedFiles'] = files;
+                    });
+                    setFileAttachmentModel(updatedModel);
+                }
+                else {
+                    setFileAttachmentModel(new FileAttachmentModel());
+                }
+
+                setLoading(false);
+            });
+    }, []);
+
+    return (
+        <div className='panel panel-default'>
+            <div className='panel-heading'>
+                My Uploaded Attachments
+            </div>
+            <div className='panel-body'>
+                {loading && <LoadingSpinner />}
+                {
+                    !loading && fileAttachmentModel.savedFiles?.length > 0 && (
+                        <ul>
+                            {
+                                fileAttachmentModel?.savedFiles?.map((savedFile) => (
+                                    <li key={savedFile.fileName}>
+                                        <a href={savedFile.href} target='_blank'>{savedFile.fileName}</a>
+                                    </li>
+                                ))
+                            }
+                        </ul>
+                    )
+                }
+                {
+                    !loading && !fileAttachmentModel.savedFiles && (
+                        <p>
+                            No files to display. Use the panel above to upload files to this location.
+                        </p>
+                    )
+                }
+                {!loading && (
+                    <p>
+                        <a className='labkey-text-link' href={ActionURL.buildURL('filecontent', 'begin', undefined, {
+                            path: MY_ATTACHMENTS_DIR
+                        })}>
+                            Manage Files
+                        </a>
+                    </p>
+                )}
+            </div>
+        </div>
+    );
+})

demo/src/client/FileAttachmentPage/actions.ts

@@ -0,0 +1,58 @@
+import { ActionURL } from "@labkey/api";
+import { getWebDavFiles, uploadWebDavFile, WebDavFile } from "@labkey/components";
+
+import { MY_ATTACHMENTS_DIR } from "./constants";
+import { FileAttachmentModel, SavedFileModel } from "./models";
+
+//Uploads files to the server using WebDav api.
+export function uploadMyAttachmentsToServer(model: FileAttachmentModel): Promise<any> {
+    return new Promise((resolve, reject) => {
+
+        // Nothing to do here
+        if (model.filesToUpload?.size === 0) {
+            resolve(model.filesToUpload);
+        }
+        const uploadedFiles = Array<string>();
+
+        model.filesToUpload.map((fileToUpload) => {
+
+            if (fileToUpload) {
+                uploadWebDavFile(fileToUpload, ActionURL.getContainer(), MY_ATTACHMENTS_DIR, true)
+                    .then((name: string) => {
+                        uploadedFiles.push(name);
+                        if (uploadedFiles.length ===  model.filesToUpload.size) {
+                            resolve(uploadedFiles);
+                        }
+                    })
+                    .catch(reason => {
+                        reject(reason);
+                    });
+            }
+        }, this);
+    });
+}
+
+// Gets file(s) previously uploaded to the server using WebDav api
+export async function getUploadedFiles(container: string, directory?: string, includeSubdirectories?: boolean): Promise<Array<SavedFileModel>> {
+    return new Promise(async (resolve, reject) => {
+        try {
+            const webDavFilesResponse = await getWebDavFiles(container, directory, includeSubdirectories);
+
+            // Note: you can return other properties of the WebDavFile, below only returns file name & href
+            const displayFiles = webDavFilesResponse.get('files').valueSeq().map((file: WebDavFile) => {
+                return new SavedFileModel({fileName: file.name, href: file.href});
+            });
+            resolve(displayFiles.toArray());
+
+        } catch (response) {
+            let msg = `Unable to load files in ${(directory ? directory : 'root')}`;
+            if (response) {
+                msg += `: ${response}`;
+                reject(msg);
+            }
+            else {
+                resolve(Array<SavedFileModel>());
+            }
+        }
+    });
+}

demo/src/client/FileAttachmentPage/app.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { App } from './FileAttachmentForm';
+
+// Need to wait for container element to be available in labkey wrapper before render
+window.addEventListener('DOMContentLoaded', (event) => {
+    ReactDOM.render(<App/>, document.getElementById('app'));
+});

demo/src/client/FileAttachmentPage/constants.ts

@@ -0,0 +1 @@
+export const MY_ATTACHMENTS_DIR = 'MyAttachments';

demo/src/client/FileAttachmentPage/dev.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { AppContainer } from 'react-hot-loader';
+
+import { App } from './FileAttachmentForm';
+
+const render = () => {
+    ReactDOM.render(
+        <AppContainer>
+            <App />
+        </AppContainer>,
+        document.getElementById('app')
+    )
+};
+
+declare const module: any;
+
+if (module.hot) {
+    module.hot.accept();
+}
+
+render();

demo/src/client/FileAttachmentPage/fileAttachment.scss

@@ -0,0 +1 @@
+@import "~@labkey/components/dist/assets/scss/theme";

demo/src/client/FileAttachmentPage/models.ts

@@ -0,0 +1,32 @@
+import { immerable } from "immer";
+import { Map } from "immutable";
+
+export class FileAttachmentModel {
+    [immerable] = true;
+
+    readonly filesToUpload?: Map<string, File>; // to upload files to the server
+    readonly savedFiles?: Array<SavedFileModel>; // to get uploaded file props from the server
+
+    constructor(values?: Partial<FileAttachmentModel>) {
+        Object.assign(this, values);
+    }
+
+    static create(raw?: any): FileAttachmentModel {
+        return new FileAttachmentModel({ ...raw });
+    }
+}
+
+export class SavedFileModel {
+    [immerable] = true;
+
+    readonly href: string;
+    readonly fileName: string;
+
+    constructor(values?: Partial<SavedFileModel>) {
+        Object.assign(this, values);
+    }
+
+    static create(raw?: any): SavedFileModel {
+        return new SavedFileModel({ ...raw });
+    }
+}