Merge pull request #1335 from lnbits/fix/DAImageSize

Limit the size of images in Marketplace

lnbits/extensions/market/templates/market/_dialogs.html

@@ -55,8 +55,16 @@
       ></q-select>
       <!-- </div> -->
       <!-- </div> -->
-
+      <q-input
+        v-if="productDialog.url"
+        filled
+        dense
+        v-model.trim="productDialog.data.image"
+        type="url"
+        label="Image URL"
+      ></q-input>
       <q-file
+        v-else
         class="q-pr-md"
         filled
         dense
@@ -79,6 +87,10 @@
           />
         </template>
       </q-file>
+      <q-toggle
+        :label="`${productDialog.url ? 'Insert image URL' : 'Upload image file'}`"
+        v-model="productDialog.url"
+      ></q-toggle>
       <q-input
         filled
         dense

lnbits/extensions/market/templates/market/_tables.html

@@ -200,7 +200,10 @@
               :href="props.row.wallet"
               target="_blank"
             ></q-btn>
-            <q-tooltip> Link to pass to stall relay </q-tooltip>
+            <q-tooltip
+              >Disabled: link to pass to stall relays when using
+              nostr</q-tooltip
+            >
           </q-td>
           <q-td v-for="col in props.cols" :key="col.name" :props="props">
             {{ col.value }}

lnbits/extensions/market/templates/market/index.html

@@ -498,6 +498,7 @@
         },
         productDialog: {
           show: false,
+          url: true,
           data: {}
         },
         stallDialog: {
@@ -536,6 +537,9 @@
     methods: {
       resetDialog(dialog) {
         this[dialog].show = false
+        if (dialog == 'productDialog') {
+          this[dialog].url = true
+        }
         this[dialog].data = {}
       },
       toggleDA(value, evt) {
@@ -798,11 +802,17 @@
         var link = _.findWhere(self.products, {id: linkId})
 
         self.productDialog.data = _.clone(link._data)
+        if (self.productDialog.data.categories) {
           self.productDialog.data.categories = self.productDialog.data.categories.split(
             ','
           )
+        }
+        if (self.productDialog.data.image.startsWith('data:')) {
+          self.productDialog.url = false
+        }
 
         self.productDialog.show = true
+        console.log(self.productDialog)
       },
       sendProductFormData: function () {
         let _data = {...this.productDialog.data}
@@ -831,14 +841,8 @@
           let canvas = document.createElement('canvas')
           canvas.setAttribute('width', fit.width)
           canvas.setAttribute('height', fit.height)
-          await pica.resize(image, canvas, {
+          output = await pica.resize(image, canvas)
-            quality: 0,
+          this.productDialog.data.image = output.toDataURL('image/jpeg', 0.4)
-            alpha: true,
-            unsharpAmount: 95,
-            unsharpRadius: 0.9,
-            unsharpThreshold: 70
-          })
-          this.productDialog.data.image = canvas.toDataURL()
           this.productDialog = {...this.productDialog}
         }
       },

lnbits/extensions/market/views_api.py

@@ -113,6 +113,23 @@ async def api_market_product_create(
     if stall.currency != "sat":
         data.price *= settings.fiat_base_multiplier
 
+    if data.image:
+        image_is_url = data.image.startswith("https://") or data.image.startswith(
+            "http://"
+        )
+
+        if not image_is_url:
+
+            def size(b64string):
+                return int((len(b64string) * 3) / 4 - b64string.count("=", -2))
+
+            image_size = size(data.image) / 1024
+            if image_size > 100:
+                raise HTTPException(
+                    status_code=HTTPStatus.BAD_REQUEST,
+                    detail=f"Image size is too big, {int(image_size)}Kb. Max: 100kb, Compress the image at https://tinypng.com, or use an URL.",
+                )
+
     if product_id:
         product = await get_market_product(product_id)
         if not product: