Progress on storing user images

app/imports/api/files/UserImages.js

@@ -9,9 +9,10 @@ const UserImages = createS3FilesCollection({
       return 'Please upload with size equal or less than 10MB';
     }
     // Allow common image extensions
-    if (/gif|png|jpe?g|webp/i.test(file.extension || '')) {
+    if (!/gif|png|jpe?g|webp/i.test(file.extension || '')) {
       return 'Please upload an image file only';
     }
+    return true
   }
 });
 

app/imports/api/files/s3FileStorage.js

@@ -47,6 +47,7 @@ if (Meteor.isServer && Meteor.settings.useS3) {
     collectionName,
     storagePath,
     onBeforeUpload,
+    onAfterUpload,
     debug = Meteor.isProduction,
     allowClientCode = false,
   }){
@@ -54,7 +55,10 @@ if (Meteor.isServer && Meteor.settings.useS3) {
       collectionName,
       storagePath,
       onBeforeUpload,
-      onAfterUpload(fileRef){
+      onAfterUpload(fileRef) {
+        // Call the provided afterUpload hook first
+        onAfterUpload(fileRef);
+        
         // Start moving files to AWS:S3
         // after fully received by the Meteor server
 

app/imports/server/imageProcessing/createThumbnail.js

@@ -0,0 +1,8 @@
+import * as sharp from 'sharp';
+
+export default async function createThumbnail(image) {
+  await sharp(image)
+  .resize(320, 240)
+  .png()
+  .toBuffer();
+}

app/imports/server/publications/index.js

@@ -11,3 +11,4 @@ import '/imports/server/publications/ownedDocuments.js';
 import '/imports/server/publications/archivedCreatures.js';
 import '/imports/server/publications/searchLibraryNodes.js';
 import '/imports/server/publications/archiveFiles.js';
+import '/imports/server/publications/userImages.js';

app/imports/server/publications/userImages.js

@@ -0,0 +1,7 @@
+import UserImages from '/imports/api/files/UserImages.js';
+
+Meteor.publish('userImages', function () {
+  return UserImages.find({
+    userId: this.userId,
+  }).cursor;
+});

app/imports/ui/components/ImageUploadInput.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="file-upload-input">
+    <v-file-input
+      v-model="file"
+      v-bind="$attrs"
+      accept="image/*"
+    />
+    <v-progress-linear
+      :progress="progress"
+    />
+  </div>
+</template>
+
+<script lang="js">
+import UserImages from '/imports/api/files/UserImages.js';
+
+export default {
+  data(){return {
+    progress: 0,
+    file: undefined,
+    uploadingInProgress: false,
+  }},
+  watch: {
+    file(file){
+      if (!file) return;
+      let self = this;
+      let uploadInstance = UserImages.insert({
+          file: file,
+          /*meta: {
+            userId: Meteor.userId() // Optional, used to check on server for file tampering
+          },*/
+          chunkSize: 'dynamic',
+          allowWebWorkers: true // If you see issues with uploads, change this to false
+        }, false)
+
+        // These are the event functions, don't need most of them, it shows where we are in the process
+        uploadInstance.on('start', function () {
+          console.log('Starting');
+          this.uploadingInProgress = true;
+        });
+
+        uploadInstance.on('end', function (error, fileObj) {
+          console.log('On end File Object: ', fileObj);
+          this.uploadingInProgress = false;
+        });
+
+        uploadInstance.on('uploaded', function (error, fileObj) {
+          console.log('uploaded: ', fileObj);
+
+          // Remove the file from the input box
+          self.file = undefined;
+
+          // Reset our state for the next file
+          self.uploadingInProgress = false;
+          self.progress = 0;
+        });
+
+        uploadInstance.on('error', function (error, fileObj) {
+          console.log('Error during upload: ' + error, fileObj)
+        });
+
+        uploadInstance.on('progress', function (progress, fileObj) {
+          console.log('Upload Percentage: ' + progress, fileObj)
+          // Update our progress bar
+          self.progress = progress;
+        });
+
+        uploadInstance.start(); // Must manually start the upload
+      }
+  },
+
+}
+</script>
+
+<style>
+
+</style>

app/imports/ui/files/UserImageCard.vue

@@ -0,0 +1,56 @@
+<template>
+  <v-card
+    :data-id="`${model._id}-archive-card`"
+    tile
+  >
+    <v-img
+      :src="model.link"
+      :aspect-ratio="1.4"
+      class="white--text align-end"
+    >
+      <v-card-title>
+        {{ model.name }}
+      </v-card-title>
+      <v-card-subtitle>
+        {{ model.size }}
+      </v-card-subtitle>
+    </v-img>
+    <v-card-actions>
+      <v-flex />
+      <v-btn
+        icon
+        @click="remove"
+      >
+        <v-icon>mdi-delete</v-icon>
+      </v-btn>
+      <v-btn
+        icon
+        :href="`${model.link}?download=true`"
+      >
+        <v-icon>mdi-download</v-icon>
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script lang="js">
+import { snackbar } from '/imports/ui/components/snackbars/SnackbarQueue.js';
+
+export default {
+  props: {
+    model: {
+      type: Object,
+      required: true,
+    },
+  },
+  data(){return {
+    restoreLoading: false,
+    removeLoading: false,
+  }},
+  methods: {
+    remove(){
+			
+		},
+  },
+}
+</script>

app/imports/ui/pages/Files.vue

@@ -7,65 +7,103 @@
       <file-storage-stats />
     </v-row>
     <v-row dense>
+      <v-col cols="12">
+        <v-subheader> Archived Characters </v-subheader>
+      </v-col>
       <template v-if="archiveFiles && archiveFiles.length">
-        <v-col cols="12">
-          <v-subheader> Archived Characters </v-subheader>
-        </v-col>
         <v-col
           v-for="file in archiveFiles"
           :key="file._id"
           cols="12"
+          sm="6"
           md="4"
           lg="3"
+          xl="2"
         >
           <archive-file-card :model="file" />
         </v-col>
+      </template>
+      <v-col
+        key="upload"
+        cols="12"
+        sm="6"
+        md="4"
+        lg="3"
+        xl="2"
+        class="layout column justify-center"
+      >
+        <input
+          ref="archiveFileInput"
+          type="file"
+          accept=".json"
+          style="display: none;"
+          @input="inputArchiveFile"
+        >
+        <v-btn
+          outlined
+          style="height: 100%; width: 100%;"
+          :color="archiveFileError ? 'error' : undefined"
+          @click="$refs.archiveFileInput.click()"
+        >
+          <v-icon left>
+            mdi-file-upload-outline
+          </v-icon>
+          <template v-if="archiveFileError">
+            {{ archiveFileError }}
+          </template>
+          <template v-else>
+            Upload archive
+          </template>
+        </v-btn>
+      </v-col>
+    </v-row>
+    <v-row dense>
+      <v-col cols="12">
+        <v-subheader> Images </v-subheader>
+      </v-col>
+      <template v-if="userImages && userImages.length">
         <v-col
-          key="upload"
+          v-for="file in userImages"
+          :key="file._id"
           cols="12"
+          sm="6"
           md="4"
           lg="3"
-          class="layout column justify-center"
+          xl="2"
         >
-          <input
+          <user-image-card :model="file" />
-            ref="archiveFileInput"
-            type="file"
-            accept=".json"
-            style="display: none;"
-            @input="inputArchiveFile"
-          >
-          <v-btn
-            outlined
-            style="height: 100%; width: 100%;"
-            :color="archiveFileError ? 'error' : undefined"
-            @click="$refs.archiveFileInput.click()"
-          >
-            <v-icon left>
-              mdi-file-upload-outline
-            </v-icon>
-            <template v-if="archiveFileError">
-              {{ archiveFileError }}
-            </template>
-            <template v-else>
-              Upload archive
-            </template>
-          </v-btn>
         </v-col>
       </template>
+      <v-col
+        key="image-upload"
+        cols="12"
+        sm="6"
+        md="4"
+        lg="3"
+        xl="2"
+        class="layout column justify-center"
+      >
+        <image-upload-input />
+      </v-col>
     </v-row>
   </v-container>
 </template>
 
 <script lang="js">
 import ArchiveCreatureFiles from '/imports/api/creature/archive/ArchiveCreatureFiles.js';
+import UserImages from '/imports/api/files/UserImages.js';
 import prettyBytes from 'pretty-bytes';
 import ArchiveFileCard from '/imports/ui/files/ArchiveFileCard.vue';
 import FileStorageStats from '/imports/ui/files/FileStorageStats.vue';
+import ImageUploadInput from '/imports/ui/components/ImageUploadInput.vue';
+import UserImageCard from '/imports/ui/files/UserImageCard.vue';
 
 export default {
   components: {
     ArchiveFileCard,
     FileStorageStats,
+    ImageUploadInput,
+    UserImageCard,
   },
   data(){ return {
     updateStorageUsedLoading: false,
@@ -76,9 +114,10 @@ export default {
     $subscribe: {
       'archiveCreatureFiles': [],
       'characterList': [],
+      'userImages': [],
     },
     archiveFiles() {
-      var userId = Meteor.userId();
+      const userId = Meteor.userId();
       return ArchiveCreatureFiles.find(
         {
           userId,
@@ -91,6 +130,20 @@ export default {
         return f;
       });
     },
+    userImages() {
+      const userId = Meteor.userId();
+      return UserImages.find({
+        userId
+      }, {
+        sort: {
+          size: -1
+        },
+      }).map(f => {
+        f.size = prettyBytes(f.size);
+        f.link = UserImages.link(f);
+        return f;
+      });
+    }
   },
   methods: {
     inputArchiveFile(){

app/package-lock.json

@@ -367,6 +367,37 @@
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
       "dev": true
     },
+    "bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "requires": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      },
+      "dependencies": {
+        "buffer": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+          "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+          "requires": {
+            "base64-js": "^1.3.1",
+            "ieee754": "^1.1.13"
+          }
+        },
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        }
+      }
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -563,6 +594,30 @@
       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
       "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
     },
+    "color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "requires": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "dependencies": {
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        }
+      }
+    },
     "color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -575,8 +630,16 @@
     "color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
-      "dev": true
+    },
+    "color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "requires": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
     },
     "combined-stream": {
       "version": "1.0.8",
@@ -661,6 +724,14 @@
       "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
       "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
     },
+    "decompress-response": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+      "requires": {
+        "mimic-response": "^3.1.0"
+      }
+    },
     "deep-eql": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-3.0.1.tgz",
@@ -670,6 +741,11 @@
         "type-detect": "^4.0.0"
       }
     },
+    "deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA=="
+    },
     "deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -749,6 +825,14 @@
       "resolved": "https://registry.npmjs.org/encode-utf8/-/encode-utf8-1.0.3.tgz",
       "integrity": "sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw=="
     },
+    "end-of-stream": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+      "requires": {
+        "once": "^1.4.0"
+      }
+    },
     "enquirer": {
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
@@ -985,6 +1069,11 @@
       "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
       "integrity": "sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ="
     },
+    "expand-template": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
+      "integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg=="
+    },
     "extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -1069,6 +1158,11 @@
         "mime-types": "^2.1.12"
       }
     },
+    "fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow=="
+    },
     "fs-minipass": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
@@ -1129,6 +1223,11 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "github-from-package": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
+      "integrity": "sha1-l/tdlr/eiXMxPyDoKI75oWf6ZM4="
+    },
     "glob": {
       "version": "7.1.6",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
@@ -1269,6 +1368,16 @@
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
+    "ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
+    },
+    "is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+    },
     "is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -2324,6 +2433,11 @@
       "integrity": "sha512-Ysbi9uYW9hFyfrThdDEQuykN4Ey6BuwPD2kpI5ES/nFTDn/98yxYNLZJcgUAKPT/mcrLLKaGzJR9YVxJrIdASQ==",
       "dev": true
     },
+    "mimic-response": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ=="
+    },
     "minify-css-string": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/minify-css-string/-/minify-css-string-1.0.0.tgz",
@@ -2337,6 +2451,11 @@
         "brace-expansion": "^1.1.7"
       }
     },
+    "minimist": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
+    },
     "minipass": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.3.tgz",
@@ -2359,6 +2478,11 @@
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
       "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw=="
     },
+    "mkdirp-classic": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
+      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A=="
+    },
     "mongo-object": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/mongo-object/-/mongo-object-0.1.4.tgz",
@@ -2374,6 +2498,11 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
+    "napi-build-utils": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.2.tgz",
+      "integrity": "sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg=="
+    },
     "natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -2409,6 +2538,14 @@
       "resolved": "https://registry.npmjs.org/ngraph.path/-/ngraph.path-1.4.0.tgz",
       "integrity": "sha512-yJZay4tP0wcjqkkf8zlMQ/T+JOgU+EWfdE4w4TG8OS94B12J/+Z44UOYxVJErE8E6/wFunX1hMZEB1/GHsBYHg=="
     },
+    "node-abi": {
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.15.0.tgz",
+      "integrity": "sha512-Ic6z/j6I9RLm4ov7npo1I48UQr2BEyFCqh6p7S1dhEx9jPO0GPGq/e2Rb7x7DroQrmiVMz/Bw1vJm9sPAl2nxA==",
+      "requires": {
+        "semver": "^7.3.5"
+      }
+    },
     "node-addon-api": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-3.1.0.tgz",
@@ -2558,6 +2695,33 @@
       "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
       "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw=="
     },
+    "prebuild-install": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.0.tgz",
+      "integrity": "sha512-CNcMgI1xBypOyGqjp3wOc8AAo1nMhZS3Cwd3iHIxOdAUbb+YxdNuM4Z5iIrZ8RLvOsf3F3bl7b7xGq6DjQoNYA==",
+      "requires": {
+        "detect-libc": "^2.0.0",
+        "expand-template": "^2.0.3",
+        "github-from-package": "0.0.0",
+        "minimist": "^1.2.3",
+        "mkdirp-classic": "^0.5.3",
+        "napi-build-utils": "^1.0.1",
+        "node-abi": "^3.3.0",
+        "npmlog": "^4.0.1",
+        "pump": "^3.0.0",
+        "rc": "^1.2.7",
+        "simple-get": "^4.0.0",
+        "tar-fs": "^2.0.0",
+        "tunnel-agent": "^0.6.0"
+      },
+      "dependencies": {
+        "detect-libc": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.1.tgz",
+          "integrity": "sha512-463v3ZeIrcWtdgIg6vI6XUncguvr2TnGl4SzDXinkt9mSLpBJKXT3mW6xT3VQdDN11+WVs29pgvivTc4Lp8v+w=="
+        }
+      }
+    },
     "prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -2590,6 +2754,15 @@
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
       "integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ=="
     },
+    "pump": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+      "requires": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
     "punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
@@ -2630,6 +2803,24 @@
         "ret": "~0.1.10"
       }
     },
+    "rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "requires": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      },
+      "dependencies": {
+        "strip-json-comments": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+          "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo="
+        }
+      }
+    },
     "readable-stream": {
       "version": "2.3.7",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
@@ -2776,6 +2967,41 @@
       "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
       "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
     },
+    "sharp": {
+      "version": "0.30.4",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.30.4.tgz",
+      "integrity": "sha512-3Onig53Y6lji4NIZo69s14mERXXY/GV++6CzOYx/Rd8bnTwbhFbL09WZd7Ag/CCnA0WxFID8tkY0QReyfL6v0Q==",
+      "requires": {
+        "color": "^4.2.3",
+        "detect-libc": "^2.0.1",
+        "node-addon-api": "^4.3.0",
+        "prebuild-install": "^7.0.1",
+        "semver": "^7.3.7",
+        "simple-get": "^4.0.1",
+        "tar-fs": "^2.1.1",
+        "tunnel-agent": "^0.6.0"
+      },
+      "dependencies": {
+        "detect-libc": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.1.tgz",
+          "integrity": "sha512-463v3ZeIrcWtdgIg6vI6XUncguvr2TnGl4SzDXinkt9mSLpBJKXT3mW6xT3VQdDN11+WVs29pgvivTc4Lp8v+w=="
+        },
+        "node-addon-api": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-4.3.0.tgz",
+          "integrity": "sha512-73sE9+3UaLYYFmDsFZnqCInzPyh3MqIwZO9cw58yIqAZhONrrabrYyYe3TuIqtIiOuTXVhsGau8hcrhhwSsDIQ=="
+        },
+        "semver": {
+          "version": "7.3.7",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
+          "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        }
+      }
+    },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -2806,6 +3032,29 @@
         "mongo-object": "^0.1.4"
       }
     },
+    "simple-concat": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
+      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q=="
+    },
+    "simple-get": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
+      "integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
+      "requires": {
+        "decompress-response": "^6.0.0",
+        "once": "^1.3.1",
+        "simple-concat": "^1.0.0"
+      }
+    },
+    "simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
+      "requires": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
     "slice-ansi": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
@@ -3035,6 +3284,48 @@
         "yallist": "^4.0.0"
       }
     },
+    "tar-fs": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz",
+      "integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==",
+      "requires": {
+        "chownr": "^1.1.1",
+        "mkdirp-classic": "^0.5.2",
+        "pump": "^3.0.0",
+        "tar-stream": "^2.1.4"
+      },
+      "dependencies": {
+        "chownr": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+          "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg=="
+        }
+      }
+    },
+    "tar-stream": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
+      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+      "requires": {
+        "bl": "^4.0.3",
+        "end-of-stream": "^1.4.1",
+        "fs-constants": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        }
+      }
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",

app/package.json

@@ -43,6 +43,7 @@
     "pretty-bytes": "^6.0.0",
     "qrcode": "^1.5.0",
     "request": "^2.88.2",
+    "sharp": "^0.30.4",
     "simpl-schema": "^1.12.0",
     "source-map-support": "^0.5.21",
     "speakingurl": "^14.0.1",