Use absolute paths for uploads and db (#168)

* Use absolute paths for uploads and db

* Fix name interference

* Add error on auth page

* remove space

* Support of separated upload folder with absolute path

* fix files uploading

* remove log

* fix comment

Co-authored-by: n0str <team@codex.so>
Co-authored-by: Nikita Melnikov <nikmel2803@gmail.com>

config/production.json

@@ -2,6 +2,6 @@
   "port": 3000,
   "database": ".db",
   "rcFile": "./.codexdocsrc",
-  "uploads": "public/uploads",
+  "uploads": "/uploads",
   "secret": "iamasecretstring"
 }

docker-compose.yml

@@ -9,6 +9,6 @@ services:
     volumes:
       - ./.codexdocsrc:/usr/src/app/.codexdocsrc:ro
       - ./config/production.json:/usr/src/app/config/production.json:ro
-      - ./public/uploads:/usr/src/app/public/uploads
+      - ./public/uploads:/uploads
       - ./.db:/usr/src/app/.db
       - /usr/src/app/node_modules

src/backend/app.ts

@@ -5,11 +5,12 @@ import morgan from 'morgan';
 import rcParser from './utils/rcparser';
 import routes from './routes';
 import HttpException from './exceptions/httpException';
+import config from 'config';
 
 const app = express();
-const config = rcParser.getConfiguration();
+const localConfig = rcParser.getConfiguration();
 
-app.locals.config = config;
+app.locals.config = localConfig;
 // view engine setup
 app.set('views', path.join(__dirname, './', 'views'));
 app.set('view engine', 'twig');
@@ -20,6 +21,7 @@ app.use(express.json());
 app.use(express.urlencoded({ extended: true }));
 app.use(cookieParser());
 app.use(express.static(path.join(__dirname, '../../public')));
+app.use('/uploads', express.static(config.get('uploads')));
 
 app.use('/', routes);
 

src/backend/controllers/transport.ts

@@ -34,7 +34,7 @@ class Transport {
    * @returns {Promise<FileData>}
    */
   public static async save(multerData: Dict, map: Dict): Promise<FileData> {
-    const { originalname: name, path, filename, size, mimetype } = multerData;
+    const { originalname: name, path, filename, size, mimetype, url } = multerData;
 
     const file = new File({
       name,
@@ -42,6 +42,7 @@ class Transport {
       path,
       size,
       mimetype,
+      url,
     });
 
     await file.save();
@@ -95,6 +96,8 @@ class Transport {
 
     let response = file.data;
 
+    console.log(response)
+
     if (map) {
       response = Transport.composeResponse(file, map);
     }

src/backend/models/file.ts

@@ -10,6 +10,7 @@ const filesDb = database['files'];
  * @property {string} filename - name of uploaded file
  * @property {string} path - path to uploaded file
  * @property {string} mimetype - file MIME type
+ * @property {string} url - file url to access it. Consists of uploads path and file name.
  * @property {number} size - size of the file in
  */
 export interface FileData {
@@ -18,6 +19,7 @@ export interface FileData {
   filename?: string;
   path?: string;
   mimetype?: string;
+  url?: string;
   size?: number;
   [key: string]: string | number | undefined;
 }
@@ -40,6 +42,7 @@ class File {
   public path?: string;
   public mimetype?: string;
   public size?: number;
+  public url?: string;
 
   /**
    * @class
@@ -99,13 +102,14 @@ class File {
    * @param {FileData} fileData - info about file
    */
   public set data(fileData: FileData) {
-    const { name, filename, path, mimetype, size } = fileData;
+    const { name, filename, path, mimetype, size, url } = fileData;
 
     this.name = name || this.name;
     this.filename = filename || this.filename;
     this.path = path ? this.processPath(path) : this.path;
     this.mimetype = mimetype || this.mimetype;
     this.size = size || this.size;
+    this.url = url || this.url;
   }
 
   /**
@@ -121,6 +125,7 @@ class File {
       path: this.path,
       mimetype: this.mimetype,
       size: this.size,
+      url: this.url,
     };
   }
 

src/backend/routes/api/transport.ts

@@ -77,10 +77,17 @@ router.post('/transport/image', imageUploader, async (req: Request, res: Respons
     return;
   }
 
+  const fileData = {
+    ...req.files.image[0],
+    url: '/uploads/' + req.files.image[0].filename,
+  };
+
+  console.log(fileData);
+
   try {
     Object.assign(
       response,
-      await Transport.save(req.files.image[0], req.body.map ? JSON.parse(req.body.map) : undefined)
+      await Transport.save(fileData, req.body.map ? JSON.parse(req.body.map) : undefined)
     );
 
     response.success = 1;

src/backend/utils/database/initDb.ts

@@ -10,7 +10,7 @@ import path from 'path';
  */
 export default function initDb(name: string): Datastore {
   return new Datastore({
-    filename: path.resolve(`./${config.get('database')}/${name}.db`),
+    filename: path.resolve(`${config.get('database')}/${name}.db`),
     autoload: true,
   });
 }

src/backend/views/auth.twig

@@ -8,6 +8,9 @@
     <p>
       Enter a password to access pages editing
     </p>
+    <p>
+      {{ header }}
+    </p>
     <input type="hidden" name="_csrf" value={{ csrfToken }}>
     <input type="password" name="password" placeholder="Password">
     <input type="submit" value="Login">

src/frontend/js/classes/editor.js

@@ -55,7 +55,7 @@ export default class Editor {
             },
             additionalRequestData: {
               map: JSON.stringify({
-                path: 'file:url',
+                url: 'file:url',
                 size: 'file:size',
                 mimetype: 'file:mime',
               }),