Add ?dl and ?download logic for downloading vs. viewing files

humphd · Jan 6, 2019 · 0c003af · 0c003af
1 parent dced878
commit 0c003af
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 48 deletions.
diff --git a/README.md b/README.md
@@ -4,6 +4,10 @@ This uses [Filer](https://github.com/filerjs/filer) to run a node'js style
 POSIX filesystem inside a Service Worker, and handle requests for static files and
 directories.
 
+The most likely use case for it would be an app that uses Filer to run a filesystem
+in the window, and then using nohost to provide a way to interact with the filesystem
+in the browser like you would with Apache or another web server hosting static files.
+
 To run it:
 
 ```
@@ -15,6 +19,12 @@ Open `http://localhost:1234/`, which will install the Service Worker.  You can
 then browse into the filesystem via `http://localhost:1234/fs/*`, where `/*` is
 a path into the filesystem.
 
+To get metadata about files/directories vs. contents, add `?json` to the URL.
+For example: `http://localhost:1234/fs/dir?json`
+
+To download instead of view files in the browser, add `?download` or `?dl` to the URL.
+For example: `http://localhost:1234/fs/path/to/file.png?dl`
+
 NOTE: I don't currently have a demo up, so the filesystem is empty.  My plan
 is to rework this into a module you can include along with Filer to allow
 self-hosting of static files in the browser.
diff --git a/src/content-type.js b/src/content-type.js
@@ -1,5 +1,9 @@
 const mime = require('mime-types');
 
+function getMimeType(path) {
+  return mime.lookup(path) || 'application/octet-stream';
+}
+
 // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#Audio_and_video_types
 function isMedia(path) {
   let mimeType = mime.lookup(path);
@@ -14,7 +18,7 @@ function isMedia(path) {
     return true;
   }
 
-  // Any thing else with `audio/*` or `video/*` is "media"
+  // Anything else with `audio/*` or `video/*` is "media"
   return mimeType.startsWith('audio/') || mimeType.startsWith('video/');
 }
 
@@ -28,10 +32,6 @@ function isImage(path) {
   return mimeType.toLowerCase().startsWith('image/');
 }
 
-function getMimeType(path) {
-  return mime.lookup(path) || 'application/octet-stream';
-}
-
 module.exports = {
   isMedia,
   isImage,

diff --git a/src/html-formatter.js b/src/html-formatter.js
@@ -45,7 +45,7 @@ const formatRow = (
           <td align='right'>${size}</td><td>&nbsp;</td></tr>`;
 };
 
-const footerClose = '<address>nohost (Web)</address></body></html>';
+const footerClose = '<address>nohost (Web Browser Server)</address></body></html>';
 
 /**
  * Send an Apache-style 404
@@ -62,8 +62,11 @@ function format404(url) {
 
   return {
     body,
-    type: 'text/html',
-    status: 404
+    config: {
+      status: 404,
+      statusText: 'Not Found',
+      headers: { 'Content-Type': 'text/html' }
+    }
   };
 }
 
@@ -83,16 +86,19 @@ function format500(path, err) {
 
   return {
     body,
-    type: 'text/html',
-    status: 500
+    config: {
+      status: 500,
+      statusText: 'Internal Error',
+      headers: { 'Content-Type': 'text/html' }
+    }
   };
 }
 
 /**
  * Send an Apache-style directory listing
  */
 function formatDir(route, dirPath, entries) {
-  const parent = path.dirname(dirPath);
+  const parent = path.dirname(dirPath) || '/';
   const header = `
     <!DOCTYPE html>
     <html><head><title>Index of ${dirPath}</title></head>
@@ -102,7 +108,7 @@ function formatDir(route, dirPath, entries) {
     <th><b>Size</b></th><th><b>Description</b></th></tr>
     <tr><th colspan='5'><hr></th></tr>
     <tr><td valign='top'><img src='${iconBack}' alt='[DIR]'></td>
-    <td><a href='/www${parent}'>Parent Directory</a></td><td>&nbsp;</td>
+    <td><a href='/${route}${parent}'>Parent Directory</a></td><td>&nbsp;</td>
     <td align='right'>  - </td><td>&nbsp;</td></tr>`;
   const footer = `<tr><th colspan='5'><hr></th></tr></table>${footerClose}`;
 
@@ -132,17 +138,23 @@ function formatDir(route, dirPath, entries) {
   }).join('\n');
 
   return {
-    type: 'text/html',
-    status: 200,
-    body: header + rows + footer
+    body: header + rows + footer,
+    config: {
+      status: 200,
+      statusText: 'OK',
+      headers: { 'Content-Type': 'text/html' }
+    }
   };
 }
 
 function formatFile(path, content) {
   return {
     body: content,
-    type: getMimeType(path),
-    status: 200
+    config: {
+      status: 200,
+      statusText: 'OK',
+      headers: { 'Content-Type': getMimeType(path) }
+    }
   };
 }
 

diff --git a/src/json-formatter.js b/src/json-formatter.js
@@ -1,32 +1,44 @@
 function format404(url) {
   return {
     body: `The requested URL ${url} was not found on this server.`,
-    type: 'application/json',
-    status: 404
+    config: {
+      status: 404,
+      statusText: 'Not Found',
+      headers: { 'Content-Type': 'application/json' }
+    }
   };
 }
 
 function format500(path, err) {
   return {
     body: `Internal Server Error accessing ${path}: ${err.message}`,
-    type: 'application/json',
-    status: 500
+    config: {
+      status: 500,
+      statusText: 'Not Found',
+      headers: { 'Content-Type': 'application/json' }
+    }
   };
 }
 
 function formatDir(route, path, entries) {
   return {
     body: JSON.stringify(entries),
-    type: 'application/json',
-    status: 200
+    config: {
+      status: 200,
+      statusText: 'OK',
+      headers: { 'Content-Type': 'application/json' }
+    }
   };
 }
 
 function formatFile(path, contents, stats) {
   return {
-    type: 'application/json',
     body: JSON.stringify(stats),
-    status: 200
+    config: {
+      status: 200,
+      statusText: 'OK',
+      headers: { 'Content-Type': 'application/json' }
+    }
   };
 }
 

diff --git a/src/nohost-sw.js b/src/nohost-sw.js
@@ -10,7 +10,7 @@ workbox.skipWaiting();
 workbox.clientsClaim();
 
 function install(route) {
-  const webServer = new WebServer();
+  const webServer = new WebServer(route);
   const wwwRegex = new RegExp(`/${route}(/.*)`);
 
   workbox.routing.registerRoute(
@@ -19,23 +19,18 @@ function install(route) {
       // Pull the filesystem path off the url 
       const path = url.pathname.match(wwwRegex)[1];
 
-      // Allow passing ?json on URL to get back JSON vs. raw response
+      // Allow passing `?json` on URL to get back JSON vs. raw response
       const formatter =
         url.searchParams.get('json') !== null
           ? jsonFormatter
           : htmlFormatter;
 
-      return new Promise((resolve, reject) => {
-        webServer.serve(path, formatter)
-          .then((res) => {
-            resolve(new Response(res.body, {
-              status: res.status,
-              statusText: 'OK',
-              headers: { 'Content-Type': res.type },
-            }));
-          })
-          .catch(reject);
-      });
+      // Allow passing `?download` or `dl` to have the file downloaded vs. displayed
+      const download =
+        url.searchParams.get('download') !== null ||
+        url.searchParams.get('dl') !== null;
+
+      return webServer.serve(path, formatter, download);
     },
     'GET'
   );

diff --git a/src/webserver.js b/src/webserver.js
@@ -1,53 +1,73 @@
 'use strict';
 
-const { fs } = require('filer');
+const { fs, Path } = require('filer');
 const sh = new fs.Shell();
 
+// https://tools.ietf.org/html/rfc2183
+function formatContentDisposition(path, stats) {
+  const filename = Path.basename(path);
+  const modified = stats.mtime.toUTCString();
+  return `attachment; filename="${filename}"; modification-date="${modified}"; size=${stats.size};`;
+}
+
 function WebServer(route) {
   this.route = route;
 }
-WebServer.prototype.serve = (path, formatter) => {
+WebServer.prototype.serve = function(path, formatter, download) {
   const route = this.route;
 
   return new Promise((resolve) => {
+    function buildResponse(responseData) {
+      return new Response(responseData.body, responseData.config);
+    }
+
     function serveError(path, err) {
       if(err.code === 'ENOENT') {
-        return resolve(formatter.format404(path, err));
+        return resolve(buildResponse(formatter.format404(path, err)));
       }
-      resolve(formatter.format500(path, err));
+      resolve(buildResponse(formatter.format500(path, err)));
     }
 
     function serveFile(path, stats) {
       fs.readFile(path, (err, contents) => {
         if(err) {
-          return resolve(serveError(path, err));
+          return serveError(path, err);
+        }
+
+        const responseData = formatter.formatFile(path, contents, stats);
+
+        // If we are supposed to serve this file or download, add headers
+        if(responseData.config.status === 200 && download) {
+          responseData.config.headers['Content-Disposition'] =
+            formatContentDisposition(path, stats);
         }
 
-        resolve(formatter.formatFile(path, contents, stats));
+        resolve(new Response(responseData.body, responseData.config));
       });
     }
 
     function serveDir(path) {
       sh.ls(path, (err, entries) => {
         if(err) {
-          return resolve(serveError(path, err));
+          return serveError(path, err);
         }
 
-        resolve(formatter.formatDir(route, path, entries));
+        const responseData = formatter.formatDir(route, path, entries);
+        resolve(new Response(responseData.body, responseData.config));
       });
     }
 
     fs.stat(path, (err, stats) => {
       if(err) {
-        return resolve(serveError(path, err));
+        return serveError(path, err);
       }
 
       if(stats.isDirectory()) {
         serveDir(path);
       } else {
         serveFile(path, stats);
       }
-    });  
+    });
   });
 };