Limit logo and vehicle images to 400px

core/frontend/package.json

@@ -39,6 +39,7 @@
     "axios": "^1.12.2",
     "babel-loader": "^8.2.5",
     "broadway-player": "^0.1.1",
+    "browser-image-compression": "^2.0.2",
     "colorthief": "2.4.0",
     "cytoscape": "^3.32.0",
     "cytoscape-fcose": "^2.2.0",

core/frontend/src/components/app/ImagePicker.vue

@@ -97,6 +97,7 @@
 
 <script lang="ts">
 import axios from 'axios'
+import imageCompression, { Options as ImageCompressionOptions } from 'browser-image-compression'
 import Vue from 'vue'
 
 import SpinningLogo from '@/components/common/SpinningLogo.vue'
@@ -143,6 +144,16 @@ export default Vue.extend({
       default: null,
       required: false,
     },
+    maxDimension: {
+      type: Number,
+      default: 0,
+      required: false,
+    },
+    maxSizeMb: {
+      type: Number,
+      default: 0,
+      required: false,
+    },
   },
   data() {
     return {
@@ -200,18 +211,18 @@ export default Vue.extend({
         this.error = `Error deleting file: ${error}`
       }
     },
-    onFileInputChange(event: Event) {
+    async onFileInputChange(event: Event) {
       const target = event.target as HTMLInputElement
       const file = target.files?.[0]
       if (!file) return
       const fileName = encodeURIComponent(file.name)
-      this.uploadFile(file, `${this.directory}/${fileName}`)
+      await this.uploadImage(file, `${this.directory}/${fileName}`)
     },
     onFilePickerClick() {
       const input = this.$refs.fileInput as HTMLInputElement
       input.click()
     },
-    async uploadFile(file: File, destination_path: string) {
+    async uploadFile(file: Blob, destination_path: string) {
       const config = {
         headers: {
           'Content-Type': file.type,
@@ -224,11 +235,38 @@ export default Vue.extend({
         })
       this.loadImages()
     },
+    async resizeImage(file: File): Promise<File> {
+      if (this.maxDimension <= 0 && this.maxSizeMb <= 0) {
+        return file
+      }
+
+      const options: ImageCompressionOptions = {
+        useWebWorker: true,
+        fileType: file.type,
+      }
+      if (this.maxDimension > 0) {
+        options.maxWidthOrHeight = this.maxDimension
+      }
+      if (this.maxSizeMb > 0) {
+        options.maxSizeMB = this.maxSizeMb
+      }
+      return imageCompression(file, options)
+    },
+    async uploadImage(file: File, destinationPath: string) {
+      try {
+        this.upload_error = null
+        const resizedImage = await this.resizeImage(file)
+        await this.uploadFile(resizedImage, destinationPath)
+      } catch (error) {
+        this.upload_error = `Error preparing image: ${error}`
+        console.error(this.upload_error)
+      }
+    },
     async onDrop(event: DragEvent) {
       const file = event.dataTransfer?.files?.[0]
       if (!file) return
       const fileName = encodeURIComponent(file.name)
-      await this.uploadFile(file, `${this.directory}/${fileName}`)
+      await this.uploadImage(file, `${this.directory}/${fileName}`)
     },
   },
 })

core/frontend/src/components/app/VehicleBanner.vue

@@ -4,6 +4,8 @@
       <image-picker
         size="35px"
         directory="/userdata/images/vehicle"
+        :max-dimension="400"
+        :max-size-mb="0.5"
         :readonly-files="['/assets/vehicles/images/bluerov2.png', '/assets/vehicles/images/bb120.png']"
         :default-image="require('@/assets/vehicles/images/unknown.svg')"
         :image="vehicle_image"
@@ -34,6 +36,8 @@
       <image-picker
         size="35px"
         directory="/userdata/images/logo"
+        :max-dimension="400"
+        :max-size-mb="0.5"
         :default-image="require('@/assets/img/blue-robotics-logo.svg')"
         :image="logo_image"
         @image-selected="save_logo"