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'}
           }
         )
-        this.$q.notify({
-          type: 'positive',
-          message: 'Upload successful!',
-          icon: null
-        })
+        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?')