Serve resized images dynamically on request (#94)

* Added image upload to rest api

* Add file-loader and indexEntry

* Add file-loader and indexEntry

* Added delete file route

* Thumbnail creation with imagemagick

* Added unauthorized event

* Rebase to a new branch

* Revert Time.vue

* Enable friendly errors plugin

backends/http.js

@@ -107,11 +107,15 @@ module.exports = class HTTPClient extends Observable {
   async fetch(url, args) {
     args.headers = this.getHeaders();
     let response = await frappe.fetch(url, args);
-    let data = await response.json();
+
+    if (response.status === 401) {
+      frappe.events.trigger('Unauthorized');
+    }
 
     if (response.status !== 200) {
       throw Error(data.error);
     }
+    let data = await response.json();
 
     return data;
   }

package.json

@@ -28,10 +28,12 @@
     "electron-devtools-installer": "^2.2.4",
     "express": "^4.16.2",
     "feather-icons": "^4.7.3",
+    "file-loader": "^1.1.11",
     "flatpickr": "^4.3.2",
     "frappe-datatable": "^1.3.1",
     "friendly-errors-webpack-plugin": "^1.7.0",
     "html-webpack-plugin": "^3.2.0",
+    "imagemagick": "^0.1.3",
     "jquery": "^3.3.1",
     "jwt-simple": "^0.5.1",
     "luxon": "^1.0.0",
@@ -46,6 +48,7 @@
     "passport": "^0.4.0",
     "passport-jwt": "^4.0.0",
     "puppeteer": "^1.2.0",
+    "quickthumb": "^0.0.12",
     "sass-loader": "^7.0.3",
     "showdown": "^1.8.6",
     "socket.io": "^2.0.4",

server/index.js

@@ -1,7 +1,7 @@
-const backends = {};
+// const backends = {};
 backends.sqlite = require('frappejs/backends/sqlite');
 //backends.mysql = require('frappejs/backends/mysql');
-
+const path = require('path');
 const express = require('express');
 const cors = require('cors');
 const app = express();
@@ -18,6 +18,7 @@ const auth = require('./../auth/auth')();
 const morgan = require('morgan');
 const { addWebpackMiddleware } = require('../webpack/serve');
 const { getAppConfig } = require('../webpack/utils');
+const quickthumb = require('quickthumb')
 
 frappe.conf = getAppConfig();
 
@@ -41,8 +42,7 @@ module.exports = {
         app.use(bodyParser.urlencoded({ extended: true }));
 
         app.use(express.static(frappe.conf.distPath));
-
+        app.use('/static', quickthumb.static(path.resolve(frappe.conf.staticPath), { type: 'resize' }));
-        app.use('/static', express.static(frappe.conf.staticPath))
 
         app.use(morgan('tiny'));
 

server/restAPI.js

@@ -113,6 +113,5 @@ module.exports = {
             }
             return response.json({});
         }));
-
     }
 };

webpack/config.js

@@ -55,6 +55,12 @@ function getConfig() {
                         'css-loader',
                         'sass-loader'
                     ]
+                },
+                {
+                    test: /\.(png|svg|jpg|gif)$/,
+                    use: [
+                      'file-loader'
+                    ]
                 }
             ]
         },
@@ -62,7 +68,8 @@ function getConfig() {
             extensions: ['.js', '.vue'],
             alias: {
                 'vue$': 'vue/dist/vue.esm.js',
-                'deepmerge$': 'deepmerge/dist/umd.js'
+                'deepmerge$': 'deepmerge/dist/umd.js',
+                '@': resolveAppDir(appConfig.dev.srcDir)
             }
         },
         plugins: [
@@ -71,7 +78,7 @@ function getConfig() {
             }),
             new plugins.VueLoader(),
             new plugins.Html({
-                template: resolveAppDir('src/index.html')
+                template: resolveAppDir(appConfig.dev.entryHtml)
             }),
             new plugins.CaseSensitivePaths(),
             new plugins.NamedModules(),