@saltcorn/filemanager 0.8.0-beta.1

package/rollup.config.js

@@ -0,0 +1,76 @@
+import svelte from 'rollup-plugin-svelte';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import livereload from 'rollup-plugin-livereload';
+import { terser } from 'rollup-plugin-terser';
+import css from 'rollup-plugin-css-only';
+
+const production = !process.env.ROLLUP_WATCH;
+
+function serve() {
+	let server;
+
+	function toExit() {
+		if (server) server.kill(0);
+	}
+
+	return {
+		writeBundle() {
+			if (server) return;
+			server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
+				stdio: ['ignore', 'inherit', 'inherit'],
+				shell: true
+			});
+
+			process.on('SIGTERM', toExit);
+			process.on('exit', toExit);
+		}
+	};
+}
+
+export default {
+	input: 'src/main.js',
+	output: {
+		sourcemap: true,
+		format: 'iife',
+		name: 'app',
+		file: 'public/build/bundle.js'
+	},
+	plugins: [
+		svelte({
+			compilerOptions: {
+				// enable run-time checks when not in production
+				dev: !production
+			}
+		}),
+		// we'll extract any component CSS out into
+		// a separate file - better for performance
+		css({ output: 'bundle.css' }),
+
+		// If you have external dependencies installed from
+		// npm, you'll most likely need these plugins. In
+		// some cases you'll need additional configuration -
+		// consult the documentation for details:
+		// https://github.com/rollup/plugins/tree/master/packages/commonjs
+		resolve({
+			browser: true,
+			dedupe: ['svelte']
+		}),
+		commonjs(),
+
+		// In dev mode, call `npm run start` once
+		// the bundle has been generated
+		!production && serve(),
+
+		// Watch the `public` directory and refresh the
+		// browser on changes when not in production
+		!production && livereload('public'),
+
+		// If we're building for production (npm run build
+		// instead of npm run dev), minify
+		production && terser()
+	],
+	watch: {
+		clearScreen: false
+	}
+};

package/scripts/setupTypeScript.js

@@ -0,0 +1,121 @@
+// @ts-check
+
+/** This script modifies the project to support TS code in .svelte files like:
+
+  <script lang="ts">
+  	export let name: string;
+  </script>
+ 
+  As well as validating the code for CI.
+  */
+
+/**  To work on this script:
+  rm -rf test-template template && git clone sveltejs/template test-template && node scripts/setupTypeScript.js test-template
+*/
+
+const fs = require("fs")
+const path = require("path")
+const { argv } = require("process")
+
+const projectRoot = argv[2] || path.join(__dirname, "..")
+
+// Add deps to pkg.json
+const packageJSON = JSON.parse(fs.readFileSync(path.join(projectRoot, "package.json"), "utf8"))
+packageJSON.devDependencies = Object.assign(packageJSON.devDependencies, {
+  "svelte-check": "^2.0.0",
+  "svelte-preprocess": "^4.0.0",
+  "@rollup/plugin-typescript": "^8.0.0",
+  "typescript": "^4.0.0",
+  "tslib": "^2.0.0",
+  "@tsconfig/svelte": "^2.0.0"
+})
+
+// Add script for checking
+packageJSON.scripts = Object.assign(packageJSON.scripts, {
+  "check": "svelte-check --tsconfig ./tsconfig.json"
+})
+
+// Write the package JSON
+fs.writeFileSync(path.join(projectRoot, "package.json"), JSON.stringify(packageJSON, null, "  "))
+
+// mv src/main.js to main.ts - note, we need to edit rollup.config.js for this too
+const beforeMainJSPath = path.join(projectRoot, "src", "main.js")
+const afterMainTSPath = path.join(projectRoot, "src", "main.ts")
+fs.renameSync(beforeMainJSPath, afterMainTSPath)
+
+// Switch the app.svelte file to use TS
+const appSveltePath = path.join(projectRoot, "src", "App.svelte")
+let appFile = fs.readFileSync(appSveltePath, "utf8")
+appFile = appFile.replace("<script>", '<script lang="ts">')
+appFile = appFile.replace("export let name;", 'export let name: string;')
+fs.writeFileSync(appSveltePath, appFile)
+
+// Edit rollup config
+const rollupConfigPath = path.join(projectRoot, "rollup.config.js")
+let rollupConfig = fs.readFileSync(rollupConfigPath, "utf8")
+
+// Edit imports
+rollupConfig = rollupConfig.replace(`'rollup-plugin-terser';`, `'rollup-plugin-terser';
+import sveltePreprocess from 'svelte-preprocess';
+import typescript from '@rollup/plugin-typescript';`)
+
+// Replace name of entry point
+rollupConfig = rollupConfig.replace(`'src/main.js'`, `'src/main.ts'`)
+
+// Add preprocessor
+rollupConfig = rollupConfig.replace(
+  'compilerOptions:',
+  'preprocess: sveltePreprocess({ sourceMap: !production }),\n\t\t\tcompilerOptions:'
+);
+
+// Add TypeScript
+rollupConfig = rollupConfig.replace(
+  'commonjs(),',
+  'commonjs(),\n\t\ttypescript({\n\t\t\tsourceMap: !production,\n\t\t\tinlineSources: !production\n\t\t}),'
+);
+fs.writeFileSync(rollupConfigPath, rollupConfig)
+
+// Add TSConfig
+const tsconfig = `{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+
+  "include": ["src/**/*"],
+  "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
+}`
+const tsconfigPath =  path.join(projectRoot, "tsconfig.json")
+fs.writeFileSync(tsconfigPath, tsconfig)
+
+// Add global.d.ts
+const dtsPath =  path.join(projectRoot, "src", "global.d.ts")
+fs.writeFileSync(dtsPath, `/// <reference types="svelte" />`)
+
+// Delete this script, but not during testing
+if (!argv[2]) {
+  // Remove the script
+  fs.unlinkSync(path.join(__filename))
+
+  // Check for Mac's DS_store file, and if it's the only one left remove it
+  const remainingFiles = fs.readdirSync(path.join(__dirname))
+  if (remainingFiles.length === 1 && remainingFiles[0] === '.DS_store') {
+    fs.unlinkSync(path.join(__dirname, '.DS_store'))
+  }
+
+  // Check if the scripts folder is empty
+  if (fs.readdirSync(path.join(__dirname)).length === 0) {
+    // Remove the scripts folder
+    fs.rmdirSync(path.join(__dirname))
+  }
+}
+
+// Adds the extension recommendation
+fs.mkdirSync(path.join(projectRoot, ".vscode"), { recursive: true })
+fs.writeFileSync(path.join(projectRoot, ".vscode", "extensions.json"), `{
+  "recommendations": ["svelte.svelte-vscode"]
+}
+`)
+
+console.log("Converted to TypeScript.")
+
+if (fs.existsSync(path.join(projectRoot, "node_modules"))) {
+  console.log("\nYou will need to re-run your dependency manager to get started.")
+}

package/src/App.svelte

@@ -0,0 +1,387 @@
+<script>
+  import { onMount } from "svelte";
+  import Fa from "svelte-fa";
+  import {
+    faTrashAlt,
+    faFileImage,
+    faFile,
+    faFolder,
+    faFileCsv,
+    faFileExcel,
+    faFileWord,
+    faFilePdf,
+    faFileAlt,
+    faFileAudio,
+    faFileVideo,
+    faFolderPlus,
+    faHome,
+    faCaretUp,
+    faCaretDown,
+  } from "@fortawesome/free-solid-svg-icons";
+  export let files = [];
+  export let directories = [];
+  export let roles = {};
+  export let currentFolder = "/";
+  let selectedList = [];
+  let selectedFiles = {};
+  let rolesList;
+  let lastSelected;
+  const fetchAndReset = async function (keepSelection) {
+    const response = await fetch(`/files?dir=${currentFolder}`, {
+      headers: { "X-Requested-With": "XMLHttpRequest" },
+    });
+    const data = await response.json();
+    files = data.files;
+    for (const file of files) {
+      file.mimetype =
+        file.mime_sub && file.mime_super
+          ? `${file.mime_super}/${file.mime_sub}`
+          : "";
+    }
+    directories = data.directories;
+    rolesList = data.roles;
+    for (const role of data.roles) {
+      roles[role.id] = role.role;
+    }
+    if (!keepSelection) {
+      selectedList = [];
+      selectedFiles = {};
+      lastSelected = null;
+    } else if (lastSelected) {
+      lastSelected = files.find((f) => f.filename === lastSelected.filename);
+    }
+    clickHeader("filename");
+  };
+  onMount(fetchAndReset);
+  function rowClick(file, e) {
+    file.selected = true;
+    const prev = selectedFiles[file.filename];
+    if (!e.shiftKey) selectedFiles = {};
+    selectedFiles[file.filename] = !prev;
+    if (!prev) lastSelected = file;
+    else {
+      const firstSelected = Object.entries(selectedFiles).findLast(
+        ([k, v]) => v
+      );
+      if (firstSelected)
+        lastSelected = files.find((f) => f.filename === firstSelected[0]);
+      else lastSelected = null;
+    }
+    document.getSelection().removeAllRanges();
+    console.log(lastSelected);
+  }
+  $: selectedList = Object.entries(selectedFiles)
+    .filter(([k, v]) => v)
+    .map(([k, v]) => k);
+
+  async function POST(url, body) {
+    return await fetch(url, {
+      headers: {
+        "X-Requested-With": "XMLHttpRequest",
+        "CSRF-Token": window._sc_globalCsrf,
+        "Content-Type": "application/json",
+      },
+      method: "POST",
+      body: JSON.stringify(body || {}),
+    });
+  }
+
+  async function goAction(e) {
+    const action = e?.target.value;
+    if (!action) return;
+    switch (action) {
+      case "Delete":
+        if (!confirm(`Delete files: ${selectedList.join()}`)) return;
+        for (const fileNm of selectedList) {
+          const file = files.find((f) => f.filename === fileNm);
+          await POST(`/files/delete/${file.location}`);
+        }
+        await fetchAndReset();
+        break;
+      case "Rename":
+        const newName = window.prompt(
+          `Rename ${lastSelected.filename} to:`,
+          lastSelected.filename
+        );
+        if (!newName) return;
+        await POST(`/files/setname/${lastSelected.location}`, {
+          value: newName,
+        });
+        await fetchAndReset();
+        break;
+    }
+  }
+  async function changeAccessRole(e) {
+    const role = e.target.value;
+    for (const fileNm of selectedList) {
+      const file = files.find((f) => f.filename === fileNm);
+      await POST(`/files/setrole/${file.location}`, { role });
+    }
+    await fetchAndReset(true);
+  }
+  async function moveDirectory(e) {
+    for (const fileNm of selectedList) {
+      const new_path = e.target.value;
+      if (!new_path) return;
+      const file = files.find((f) => f.filename === fileNm);
+      await POST(`/files/move/${file.location}`, { new_path });
+    }
+    await fetchAndReset();
+  }
+
+  function gotoFolder(folder) {
+    currentFolder = folder;
+    fetchAndReset();
+  }
+
+  let pathSegments = [];
+  $: {
+    if (currentFolder === "/" || currentFolder === "")
+      pathSegments = [{ icon: faHome, location: "/" }];
+    else {
+      pathSegments = currentFolder.split("/").map((name, i) => ({
+        name,
+        location: currentFolder
+          .split("/")
+          .slice(0, i + 1)
+          .join("/"),
+      }));
+      pathSegments.unshift({ icon: faHome, location: "/" });
+    }
+  }
+
+  function getIcon(file) {
+    if (file.mime_super === "image") return faFileImage;
+    if (file.mime_super === "audio") return faFileAudio;
+    if (file.mime_super === "video") return faFileVideo;
+    if (file.mime_sub === "pdf") return faFilePdf;
+
+    if (file.isDirectory) return faFolder;
+    const fname = file.filename.toLowerCase();
+    if (fname.endsWith(".csv")) return faFileCsv;
+    if (fname.endsWith(".xls")) return faFileExcel;
+    if (fname.endsWith(".xlsx")) return faFileExcel;
+    if (fname.endsWith(".doc")) return faFileWord;
+    if (fname.endsWith(".docx")) return faFileWord;
+    if (fname.endsWith(".txt")) return faFileAlt;
+    return faFile;
+  }
+
+  let sortBy;
+  let sortDesc = false;
+  function clickHeader(varNm) {
+    if (sortBy === varNm) sortDesc = !sortDesc;
+    else sortBy = varNm;
+    let getter = (x) => x[sortBy];
+    if (sortBy === "uploaded_at") getter = (x) => new Date(x[sortBy]);
+    if (sortBy === "filename") getter = (x) => (x[sortBy] || "").toLowerCase();
+    const cmp = (a, b) => {
+      if (getter(a) < getter(b)) return sortDesc ? 1 : -1;
+      if (getter(a) > getter(b)) return sortDesc ? -1 : 1;
+      return 0;
+    };
+    files = files.sort(cmp);
+  }
+  function getSorterIcon(varNm) {
+    console.log({ varNm, sortBy });
+    if (varNm !== sortBy) return null;
+    return sortDesc ? faCaretDown : faCaretUp;
+  }
+</script>
+
+<main>
+  <div class="row">
+    <div class="col-8">
+      <div>
+        <nav aria-label="breadcrumb">
+          <ol class="breadcrumb">
+            {#each pathSegments as segment}
+              <li
+                class="breadcrumb-item"
+                on:click={gotoFolder(segment.location)}
+              >
+                {#if segment.icon}
+                  <Fa icon={segment.icon} />
+                {:else}
+                  {segment.name}
+                {/if}
+              </li>
+            {/each}
+          </ol>
+        </nav>
+      </div>
+      <div class="filelist">
+        <table class="table table-sm">
+          <thead>
+            <tr>
+              <th />
+              <th on:click={() => clickHeader("filename")}>
+                Filename
+                <Fa icon={getSorterIcon("filename", sortBy, sortDesc)} />
+              </th>
+              <th on:click={() => clickHeader("mimetype")}>
+                Media type
+                <Fa icon={getSorterIcon("mimetype", sortBy, sortDesc)} />
+              </th>
+              <th
+                on:click={() => clickHeader("size_kb")}
+                style="text-align: right"
+              >
+                <Fa icon={getSorterIcon("size_kb", sortBy, sortDesc)} />
+                Size (KiB)
+              </th>
+              <th on:click={() => clickHeader("min_role_read")}>
+                Role to access
+                <Fa icon={getSorterIcon("min_role_read", sortBy, sortDesc)} />
+              </th>
+              <th on:click={() => clickHeader("uploaded_at")}>
+                Created
+                <Fa icon={getSorterIcon("uploaded_at", sortBy, sortDesc)} />
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {#each files as file}
+              <tr
+                on:click={(e) => rowClick(file, e)}
+                on:dblclick={() => {
+                  if (file.isDirectory) gotoFolder(file.location);
+                  else window.open(`/files/serve/${file.location}`);
+                }}
+                class:selected={selectedFiles[file.filename]}
+              >
+                <td>
+                  <Fa size="lg" icon={getIcon(file)} />
+                </td>
+                <td>
+                  {#if file.isDirectory}
+                    {file.filename}/
+                  {:else}
+                    {file.filename}
+                  {/if}
+                </td>
+                <td>
+                  {file.mimetype}
+                </td>
+                <td style="text-align: right">
+                  {file.isDirectory ? "" : file.size_kb}
+                </td>
+                <td>
+                  {roles[file.min_role_read]}
+                </td>
+                <td>
+                  {new Date(file.uploaded_at).toLocaleString()}
+                </td>
+              </tr>
+            {/each}
+            <tr on:click={() => window.create_new_folder(currentFolder)}>
+              <td>
+                <Fa size="lg" icon={faFolderPlus} />
+              </td>
+              <td>Create new folder...</td>
+              <td />
+              <td />
+              <td />
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <div class="col-4">
+      {#if selectedList.length > 0}
+        <h5>{lastSelected.filename}</h5>
+
+        {#if lastSelected.mime_super === "image"}
+          <img
+            class="file-preview my-2"
+            src={`/files/serve/${lastSelected.location}`}
+            alt={lastSelected.filename}
+          />
+        {/if}
+        <table>
+          <tbody>
+            {#if !lastSelected.isDirectory}
+              <tr>
+                <th>Size</th>
+                <td>{lastSelected.size_kb} KB</td>
+              </tr>
+            {/if}
+
+            <tr>
+              <th>MIME type</th>
+              <td>
+                {#if lastSelected.isDirectory}
+                  Directory
+                {:else}
+                  {lastSelected.mime_super}/{lastSelected.mime_sub}
+                {/if}
+              </td>
+            </tr>
+            <tr>
+              <th>Created</th>
+              <td>{new Date(lastSelected.uploaded_at).toLocaleString()}</td>
+            </tr>
+            <tr>
+              <th class="pe-1">Role to access</th>
+              <td>{roles[lastSelected.min_role_read]}</td>
+            </tr>
+          </tbody>
+        </table>
+        <div>
+          <a href={`/files/serve/${lastSelected.location}`}>Link</a>
+          &nbsp;|&nbsp;
+          <a href={`/files/download/${lastSelected.location}`}>Download</a>
+        </div>
+        {#if selectedList.length > 1}
+          <strong
+            >and {selectedList.length - 1} other file{selectedList.length > 2
+              ? "s"
+              : ""}:
+          </strong>
+        {/if}
+        <div class="file-actions d-flex">
+          <select class="form-select" on:change={changeAccessRole}>
+            <option value="" disabled selected>Set access</option>
+            {#each rolesList as role}
+              <option value={role.id}>{role.role}</option>
+            {/each}
+          </select>
+
+          <select class="form-select" on:change={moveDirectory}>
+            <option value="" disabled selected>Move to...</option>
+            {#each directories as dir}
+              <option>{dir.location || "/"}</option>
+            {/each}
+          </select>
+          <select class="form-select" on:change={goAction}>
+            <option value="" disabled selected>Action...</option>
+            <option>Delete</option>
+            {#if selectedList.length === 1}
+              <option>Rename</option>
+            {/if}
+          </select>
+        </div>
+      {/if}
+    </div>
+  </div>
+</main>
+
+<style>
+  tr.selected {
+    background-color: rgb(213, 237, 255);
+  }
+  img.file-preview {
+    max-height: 200px;
+    max-width: 100%;
+  }
+  div.file-actions select {
+    width: unset;
+    display: inline;
+    max-width: 33%;
+  }
+  div.filelist {
+    max-height: 90vh;
+    overflow-y: scroll;
+  }
+</style>

package/src/main.js

@@ -0,0 +1,10 @@
+import App from './App.svelte';
+
+const app = new App({
+	target: document.getElementById("saltcorn-file-manager"),
+	props: {
+		name: 'world'
+	}
+});
+
+export default app;