feat(ui): upload images to process with detectors

jakowenko · Jun 13, 2022 · f774406 · f774406
1 parent 31719a3
commit f774406
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 3 deletions.
diff --git a/api/src/controllers/recognize.controller.js b/api/src/controllers/recognize.controller.js
@@ -1,4 +1,5 @@
 const perf = require('execution-time')();
+const axios = require('axios');
 const { v4: uuidv4 } = require('uuid');
 const { polling } = require('../util/process.util');
 const actions = require('../util/detectors/actions');
@@ -13,7 +14,8 @@ const { BAD_REQUEST } = require('../constants/http-status');
 const DETECTORS = require('../constants/config').detectors();
 const config = require('../constants/config');
 const schedule = require('../util/schedule.util');
-const { AUTH, TOKEN } = require('../constants')();
+const { AUTH, TOKEN, SERVER, STORAGE, UI } = require('../constants')();
+const fs = require('../util/fs.util');
 
 const { IDS, MATCH_IDS } = {
   IDS: [],
@@ -190,3 +192,23 @@ module.exports.start = async (req, res) => {
     res.send(error);
   }
 };
+
+module.exports.upload = async (req, res) => {
+  res.send({ success: true });
+  for (const file of req.files) {
+    const { buffer } = file;
+    const filename = `${uuidv4()}.jpg`;
+    fs.writer(`${STORAGE.TMP.PATH}/${filename}`, buffer);
+    await axios({
+      method: 'get',
+      url: `http://0.0.0.0:${SERVER.PORT}${UI.PATH}/api/recognize`,
+      headers: AUTH ? { authorization: jwt.sign({ route: 'recognize' }) } : null,
+      params: {
+        url: `http://0.0.0.0:${SERVER.PORT}${UI.PATH}/api/${STORAGE.TMP.PATH}/${filename}`,
+        camera: 'manual',
+      },
+      validateStatus: () => true,
+    });
+    fs.delete(`${STORAGE.TMP.PATH}/${filename}`, buffer);
+  }
+};
diff --git a/api/src/routes/recognize.routes.js b/api/src/routes/recognize.routes.js
@@ -1,4 +1,5 @@
 const express = require('express');
+const multer = require('multer');
 const { jwt, validate, Joi } = require('../middlewares');
 const controller = require('../controllers/recognize.controller');
 
@@ -32,6 +33,20 @@ router
     }),
     controller.start
   )
+  .post(
+    '/upload',
+    jwt,
+    multer().array('files[]'),
+    validate({
+      files: {
+        schema: Joi.array()
+          .min(1)
+          .items(Joi.object({ buffer: Joi.binary().encoding('utf8').required() })),
+        allowUnknown: true,
+      },
+    }),
+    controller.upload
+  )
   .get('/test', jwt, controller.test);
 
 module.exports = router;
diff --git a/frontend/src/components/Header.vue b/frontend/src/components/Header.vue
@@ -28,6 +28,22 @@
             :class="{ train: type === 'train' }"
           />
         </div>
+        <div v-if="type === 'match' && !folder">
+          <FileUpload
+            mode="basic"
+            name="files[]"
+            :url="uploadUrl.recognize"
+            accept="image/*"
+            :maxFileSize="10000000"
+            @upload="uploadMessage"
+            @before-send="beforeUpload"
+            :auto="true"
+            :multiple="true"
+            chooseLabel="Upload"
+            :disabled="loading.files || loading.status"
+            class="p-button-sm"
+          />
+        </div>
         <div v-if="folder">
           <div v-if="type === 'match'">
             <Button
@@ -43,10 +59,11 @@
               <FileUpload
                 mode="basic"
                 name="files[]"
-                :url="uploadUrl"
+                :url="uploadUrl.train"
                 accept="image/*"
                 :maxFileSize="10000000"
                 @upload="$parent.init()"
+                @before-send="beforeUpload"
                 :auto="true"
                 :multiple="true"
                 chooseLabel="Upload"
@@ -379,6 +396,17 @@ export default {
     }
   },
   methods: {
+    beforeUpload(request) {
+      request.xhr.setRequestHeader('Authorization', localStorage.getItem('token'));
+      return request;
+    },
+    uploadMessage() {
+      this.$toast.add({
+        severity: 'success',
+        detail: 'File(s) uploaded. Results will be available after processing.',
+        life: 3000,
+      });
+    },
     fixSelectPanel(value, index) {
       const sub = document.getElementsByClassName('p-multiselect')[index];
       const [panel] = document.getElementsByClassName('p-multiselect-panel');
@@ -526,7 +554,7 @@ export default {
   },
   computed: {
     uploadUrl() {
-      return `${Constants().api}/train/add/${this.folder}`;
+      return { recognize: `${Constants().api}/recognize/upload`, train: `${Constants().api}/train/add/${this.folder}` };
     },
     socketMessage() {
       if (this.filterSettings.socket.enabled) {