feat: adds an upload for assets on backgroundImage in account and site customisation (#3929)

Co-authored-by: dni ⚡ <office@dnilabs.com>
Co-authored-by: alan <alan@lnbits.com>

lnbits/static/js/components/admin/lnbits-admin-site-customisation.js

@@ -41,5 +41,37 @@ window.app.component('lnbits-admin-site-customisation', {
       ]
     }
   },
-  methods: {}
+  methods: {
+    onBackgroundImageInput(e) {
+      const file = e.target.files[0]
+      if (file) {
+        this.uploadBackgroundImage(file)
+      }
+      e.target.value = null
+    },
+    async uploadBackgroundImage(file) {
+      const formData = new FormData()
+      formData.append('file', file)
+      try {
+        const {data} = await LNbits.api.request(
+          'POST',
+          '/api/v1/assets?public_asset=true',
+          null,
+          formData,
+          {
+            headers: {'Content-Type': 'multipart/form-data'}
+          }
+        )
+        const assetUrl = `${window.location.origin}/api/v1/assets/${data.id}/thumbnail`
+        this.formData.lnbits_default_bgimage = assetUrl
+        Quasar.Notify.create({
+          type: 'positive',
+          message: 'Background image uploaded.',
+          icon: null
+        })
+      } catch (e) {
+        LNbits.utils.notifyApiError(e)
+      }
+    }
+  }
 })

lnbits/static/js/pages/account.js

@@ -545,31 +545,56 @@ window.PageAccount = {
       if (file) {
         this.uploadAsset(file)
       }
+      e.target.value = null
     },
-    async uploadAsset(file) {
+    onBackgroundImageInput(e) {
+      const file = e.target.files[0]
+      if (file) {
+        this.uploadBackgroundImage(file)
+      }
+      e.target.value = null
+    },
+    async uploadAsset(
+      file,
+      {isPublic = this.assetsUploadToPublic, notifySuccess = true} = {}
+    ) {
       const formData = new FormData()
       formData.append('file', file)
       try {
-        await LNbits.api.request(
+        const {data} = await LNbits.api.request(
           'POST',
-          `/api/v1/assets?public_asset=${this.assetsUploadToPublic}`,
+          `/api/v1/assets?public_asset=${isPublic}`,
           null,
           formData,
           {
             headers: {'Content-Type': 'multipart/form-data'}
           }
         )
+        if (notifySuccess) {
           this.$q.notify({
             type: 'positive',
             message: 'Upload successful!',
             icon: null
           })
+        }
         await this.getUserAssets()
+        return data
       } catch (e) {
         console.warn(e)
         LNbits.utils.notifyApiError(e)
       }
     },
+    async uploadBackgroundImage(file) {
+      const asset = await this.uploadAsset(file, {
+        isPublic: false,
+        notifySuccess: false
+      })
+      if (!asset) {
+        return
+      }
+      const assetUrl = `${window.location.origin}/api/v1/assets/${asset.id}/thumbnail`
+      await this.siteCustomisationChanged({bgimageChoice: assetUrl})
+    },
     async deleteAsset(asset) {
       LNbits.utils
         .confirmDialog('Are you sure you want to delete this asset?')

lnbits/templates/components/admin/site_customisation.vue

@@ -251,10 +251,27 @@
             type="text"
             v-model="formData.lnbits_default_bgimage"
             label="Background Image"
-            @update:model-value="applyGlobalBgimage"
             hint="This must be a trusted source. It can change the content and it can log your IP address."
           >
+            <template v-slot:append>
+              <q-btn
+                dense
+                flat
+                round
+                icon="upload"
+                @click="$refs.adminBackgroundImageInput.click()"
+              >
+                <q-tooltip>Upload background image</q-tooltip>
+              </q-btn>
+            </template>
           </q-input>
+          <input
+            type="file"
+            ref="adminBackgroundImageInput"
+            accept="image/*"
+            style="display: none"
+            @change="onBackgroundImageInput"
+          />
         </div>
       </div>
       <div class="row q-col-gutter-md q-mb-md">

lnbits/templates/pages/account.vue

@@ -492,10 +492,28 @@
                           siteCustomisationChanged({bgimageChoice: $event})
                         "
                       >
+                        <template v-slot:append>
+                          <q-btn
+                            dense
+                            flat
+                            round
+                            icon="upload"
+                            @click="$refs.backgroundImageInput.click()"
+                          >
+                            <q-tooltip>Upload background image</q-tooltip>
+                          </q-btn>
+                        </template>
                         <q-tooltip
                           ><span v-text="$t('background_image')"></span
                         ></q-tooltip>
                       </q-input>
+                      <input
+                        type="file"
+                        ref="backgroundImageInput"
+                        accept="image/*"
+                        style="display: none"
+                        @change="onBackgroundImageInput"
+                      />
                     </div>
                   </div>
                   <div class="row q-mb-md">