PMA.UI Examples 2.43.3by Pathomation

Upload a single slide/file

advancedannotationsupload
Console
PMA.UI version: 2.43.3
Upload a single slide/file to PMA.core server
upload.html
1<!doctype html>
2<html lang="en">
3
4<head>
5    <meta charset="utf-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=10">
7    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
8
9    <!-- Include PMA.UI required libraries downloaded or from CDN -->
10    <script src="./pma.ui/jquery-3.1.0.js"></script>
11    <link href="./pma.ui/font-awesome.min.css" type="text/css" rel="stylesheet">
12
13    <!-- Include optional libraries downloaded or from CDN -->
14    <link rel="stylesheet" href="./pma.ui/bootstrap.min.css">
15    <script src="./pma.ui/bootstrap.bundle.min.js"></script>
16
17    <!-- Include PMA.UI script & css -->
18    <script src="./pma.ui/pma.ui.js"></script>
19    <link href="./pma.ui/pma.ui.css" type="text/css" rel="stylesheet">
20
21    <!-- Include custom script & css -->
22    <script src="./js/upload.js"></script>
23    <link href="./css/upload.css" type="text/css" rel="stylesheet">
24
25    <title>Upload slide</title>
26</head>
27
28<body>
29    <h5 class="text-muted">Scroll to the javascript snippet below on how to upload a single slide to a PMA.core server</h5>
30</body>
31
32</html>
upload.css
1html,
2body
3{
4    height: 100%;
5    padding: 0px;
6    margin: 0px;
7}
8
9#treeview
10{
11    height: calc(100vh - 6px);
12}
upload.js
1// Initial declarations
2var serverUrl = "https://host.pathomation.com/mydevcore/";
3var serverUsername = "PMA_UI_DEMO";
4var serverPassword = "PMA_UI_DEMO";
5var treeviewElementSelector = "#treeview";
6var caller = "DemoPortal";
7var context = null;
8
9/**
10 * This calls the PMA.UI.context.uploadFile method to upload a file to PMA.core server
11 */
12function uploadFile(targetPath, file) {
13    context.uploadFile({
14        serverUrl: serverUrl, targetPath: targetPath, file: file, progress: (p) => {
15            console.log("Progress:", p);
16        }
17    }).then(function (s) {
18        console.log("Upload complete");
19    }, function (err) {
20        console.log("Upload error");
21    });
22}
23
24jQuery(function () {
25    console.log(`PMA.UI version: ${PMA.UI.getVersion()}`);
26
27    // Create a context
28    context = new PMA.UI.Components.Context({ caller: caller });
29
30    // Add an autologin authentication provider
31    new PMA.UI.Authentication.AutoLogin(context, [{ serverUrl: serverUrl, username: serverUsername, password: serverPassword }]);
32});