[feat] user assets (#3504)

2025-11-12 14:30:27 +02:00
parent c89721223f
commit 39c33699af
28 changed files with 1125 additions and 309 deletions
@@ -3,6 +3,7 @@ from fastapi import APIRouter, FastAPI
 from .db import core_app_extra, db
 from .views.admin_api import admin_router
 from .views.api import api_router
+from .views.asset_api import asset_router
 from .views.audit_api import audit_router
 from .views.auth_api import auth_router
 from .views.callback_api import callback_router
@@ -44,6 +45,7 @@ def init_core_routers(app: FastAPI):
    app.include_router(webpush_router)
    app.include_router(users_router)
    app.include_router(audit_router)
+    app.include_router(asset_router)
    app.include_router(fiat_router)
    app.include_router(lnurl_router)

@@ -0,0 +1,107 @@
+from lnbits.core.db import db
+from lnbits.core.models.assets import Asset, AssetFilters, AssetInfo
+from lnbits.db import Connection, Filters, Page
+
+
+async def create_asset(
+    entry: Asset,
+    conn: Connection | None = None,
+) -> None:
+    await (conn or db).insert("assets", entry)
+
+
+async def get_user_asset_info(
+    user_id: str,
+    asset_id: str,
+    conn: Connection | None = None,
+) -> AssetInfo | None:
+    return await (conn or db).fetchone(
+        query="SELECT * from assets WHERE id = :asset_id AND user_id = :user_id",
+        values={"asset_id": asset_id, "user_id": user_id},
+        model=AssetInfo,
+    )
+
+
+async def get_asset_info(
+    asset_id: str, conn: Connection | None = None
+) -> AssetInfo | None:
+    return await (conn or db).fetchone(
+        query="SELECT * from assets WHERE id = :asset_id",
+        values={"asset_id": asset_id},
+        model=AssetInfo,
+    )
+
+
+async def get_user_asset(
+    user_id: str,
+    asset_id: str,
+    conn: Connection | None = None,
+) -> Asset | None:
+    return await (conn or db).fetchone(
+        query="SELECT * from assets WHERE id = :asset_id AND user_id = :user_id",
+        values={"asset_id": asset_id, "user_id": user_id},
+        model=Asset,
+    )
+
+
+async def get_public_asset(
+    asset_id: str,
+    conn: Connection | None = None,
+) -> Asset | None:
+    return await (conn or db).fetchone(
+        query="SELECT * from assets WHERE id = :asset_id AND is_public = true",
+        values={"asset_id": asset_id},
+        model=Asset,
+    )
+
+
+async def get_public_asset_info(
+    asset_id: str,
+    conn: Connection | None = None,
+) -> AssetInfo | None:
+    return await (conn or db).fetchone(
+        query="SELECT * from assets WHERE id = :asset_id AND is_public = true",
+        values={"asset_id": asset_id},
+        model=AssetInfo,
+    )
+
+
+async def update_user_asset_info(
+    asset: AssetInfo,
+) -> AssetInfo:
+    await db.update("assets", asset)
+    return asset
+
+
+async def delete_user_asset(
+    user_id: str, asset_id: str, conn: Connection | None = None
+) -> None:
+    await (conn or db).execute(
+        query="DELETE FROM assets WHERE id = :asset_id AND user_id = :user_id",
+        values={"asset_id": asset_id, "user_id": user_id},
+    )
+
+
+async def get_user_assets(
+    user_id: str,
+    filters: Filters[AssetFilters] | None = None,
+    conn: Connection | None = None,
+) -> Page[AssetInfo]:
+    filters = filters or Filters()
+    filters.sortby = filters.sortby or "created_at"
+    return await (conn or db).fetch_page(
+        query="SELECT * from assets",
+        where=["user_id = :user_id"],
+        values={"user_id": user_id},
+        filters=filters,
+        model=AssetInfo,
+    )
+
+
+async def get_user_assets_count(user_id: str) -> int:
+    result = await db.execute(
+        query="SELECT COUNT(*) as count FROM assets WHERE user_id = :user_id",
+        values={"user_id": user_id},
+    )
+    row = result.mappings().first()
+    return row.get("count", 0)
@@ -759,3 +759,22 @@ async def m036_add_shared_wallet_column(db: Connection):
        ALTER TABLE wallets ADD COLUMN shared_wallet_id TEXT
        """
    )
+
+
+async def m037_create_assets_table(db: Connection):
+    await db.execute(
+        f"""
+        CREATE TABLE IF NOT EXISTS assets (
+            id TEXT PRIMARY KEY,
+            user_id TEXT NOT NULL,
+            mime_type TEXT NOT NULL,
+            is_public BOOLEAN NOT NULL DEFAULT false,
+            name TEXT NOT NULL,
+            size_bytes INT NOT NULL,
+            thumbnail_base64 TEXT,
+            thumbnail {db.blob},
+            data {db.blob} NOT NULL,
+            created_at TIMESTAMP NOT NULL DEFAULT {db.timestamp_now}
+        );
+        """
+    )
@@ -0,0 +1,37 @@
+from __future__ import annotations
+
+from datetime import datetime, timezone
+
+from pydantic import BaseModel, Field
+
+from lnbits.db import FilterModel
+
+
+class AssetInfo(BaseModel):
+    id: str
+    mime_type: str
+    name: str
+    is_public: bool = False
+    size_bytes: int
+    thumbnail_base64: str | None = None
+    created_at: datetime = Field(default_factory=lambda: datetime.now(timezone.utc))
+
+
+class Asset(AssetInfo):
+    user_id: str
+    data: bytes
+
+
+class AssetUpdate(BaseModel):
+    name: str | None = None
+    is_public: bool | None = None
+
+
+class AssetFilters(FilterModel):
+    __search_fields__ = ["name"]
+    __sort_fields__ = [
+        "created_at",
+        "name",
+    ]
+
+    name: str | None = None
@@ -0,0 +1,56 @@
+import base64
+import io
+from uuid import uuid4
+
+from fastapi import UploadFile
+from PIL import Image
+
+from lnbits.core.crud.assets import create_asset, get_user_assets_count
+from lnbits.core.models.assets import Asset
+from lnbits.settings import settings
+
+
+async def create_user_asset(user_id: str, file: UploadFile, is_public: bool) -> Asset:
+    if not file.content_type:
+        raise ValueError("File must have a content type.")
+    if file.content_type.lower() not in settings.lnbits_assets_allowed_mime_types:
+        raise ValueError(f"File type '{file.content_type}' not allowed.")
+
+    if user_id not in settings.lnbits_assets_no_limit_users:
+        user_assets_count = await get_user_assets_count(user_id)
+        if user_assets_count >= settings.lnbits_max_assets_per_user:
+            raise ValueError(
+                f"Max upload count of {settings.lnbits_max_assets_per_user} exceeded."
+            )
+
+    contents = await file.read()
+    if len(contents) > settings.lnbits_max_asset_size_mb * 1024 * 1024:
+        raise ValueError(
+            f"File limit of {settings.lnbits_max_asset_size_mb}MB exceeded."
+        )
+
+    image = Image.open(io.BytesIO(contents))
+
+    thumbnail_width = min(256, settings.lnbits_asset_thumbnail_width)
+    thumbnail_height = min(256, settings.lnbits_asset_thumbnail_height)
+    image.thumbnail((thumbnail_width, thumbnail_height))
+
+    # Save thumbnail to an in-memory buffer
+    thumb_buffer = io.BytesIO()
+    thumbnail_format = settings.lnbits_asset_thumbnail_format or "PNG"
+    image.save(thumb_buffer, format=thumbnail_format)
+    thumb_buffer.seek(0)
+
+    asset = Asset(
+        id=uuid4().hex,
+        user_id=user_id,
+        mime_type=file.content_type,
+        is_public=is_public,
+        name=file.filename or "unnamed",
+        size_bytes=len(contents),
+        thumbnail_base64=base64.b64encode(thumb_buffer.getvalue()).decode("utf-8"),
+        data=contents,
+    )
+
+    await create_asset(asset)
+    return asset
@@ -1,19 +1,14 @@
 import os
 import time
 from http import HTTPStatus
-from pathlib import Path
-from shutil import make_archive, move
+from shutil import make_archive
 from subprocess import Popen
-from tempfile import NamedTemporaryFile
-from typing import IO
 from urllib.parse import urlparse

-import filetype
-from fastapi import APIRouter, Depends, File, Header, HTTPException, UploadFile
+from fastapi import APIRouter, Depends, File
 from fastapi.responses import FileResponse

 from lnbits.core.models import User
-from lnbits.core.models.misc import Image, SimpleStatus
 from lnbits.core.models.notifications import NotificationType
 from lnbits.core.services import (
    enqueue_admin_notification,
@@ -23,7 +18,6 @@ from lnbits.core.services import (
 from lnbits.core.services.notifications import send_email_notification
 from lnbits.core.services.settings import dict_to_settings
 from lnbits.decorators import check_admin, check_super_user
-from lnbits.helpers import safe_upload_file_path
 from lnbits.server import server_restart
 from lnbits.settings import AdminSettings, Settings, UpdateSettings, settings
 from lnbits.tasks import invoice_listeners
@@ -172,93 +166,3 @@ async def api_download_backup() -> FileResponse:
    return FileResponse(
        path=f"{last_filename}.zip", filename=filename, media_type="application/zip"
    )
-
-
-@admin_router.post(
-    "/api/v1/images",
-    status_code=HTTPStatus.OK,
-    dependencies=[Depends(check_admin)],
-)
-async def upload_image(
-    file: UploadFile = file_upload,
-    content_length: int = Header(..., le=settings.lnbits_upload_size_bytes),
-) -> Image:
-    if not file.filename:
-        raise HTTPException(
-            status_code=HTTPStatus.BAD_REQUEST, detail="No filename provided."
-        )
-
-    # validate file types
-    file_info = filetype.guess(file.file)
-    if file_info is None:
-        raise HTTPException(
-            status_code=HTTPStatus.UNSUPPORTED_MEDIA_TYPE,
-            detail="Unable to determine file type",
-        )
-    detected_content_type = file_info.extension.lower()
-    if (
-        file.content_type not in settings.lnbits_upload_allowed_types
-        or detected_content_type not in settings.lnbits_upload_allowed_types
-    ):
-        raise HTTPException(HTTPStatus.UNSUPPORTED_MEDIA_TYPE, "Unsupported file type")
-
-    # validate file name
-    try:
-        file_path = safe_upload_file_path(file.filename)
-    except ValueError as e:
-        raise HTTPException(
-            status_code=HTTPStatus.FORBIDDEN,
-            detail=f"The requested filename '{file.filename}' is forbidden.",
-        ) from e
-
-    # validate file size
-    real_file_size = 0
-    temp: IO = NamedTemporaryFile(delete=False)
-    for chunk in file.file:
-        real_file_size += len(chunk)
-        if real_file_size > content_length:
-            raise HTTPException(
-                status_code=HTTPStatus.REQUEST_ENTITY_TOO_LARGE,
-                detail=f"File too large ({content_length / 1000} KB max)",
-            )
-        temp.write(chunk)
-    temp.close()
-
-    move(temp.name, file_path)
-    return Image(filename=file.filename)
-
-
-@admin_router.get(
-    "/api/v1/images",
-    status_code=HTTPStatus.OK,
-    dependencies=[Depends(check_admin)],
-)
-async def list_uploaded_images() -> list[Image]:
-    image_folder = Path(settings.lnbits_data_folder, "images")
-    files = image_folder.glob("*")
-    images = []
-    for file in files:
-        if file.is_file():
-            images.append(Image(filename=file.name))
-    return images
-
-
-@admin_router.delete(
-    "/api/v1/images/{filename}",
-    status_code=HTTPStatus.OK,
-    dependencies=[Depends(check_admin)],
-)
-async def delete_uploaded_image(filename: str) -> SimpleStatus:
-    try:
-        file_path = safe_upload_file_path(filename)
-    except ValueError as e:
-        raise HTTPException(
-            status_code=HTTPStatus.FORBIDDEN,
-            detail=f"The requested filename '{filename}' is forbidden.",
-        ) from e
-
-    if not file_path.exists():
-        raise HTTPException(status_code=HTTPStatus.NOT_FOUND, detail="Image not found.")
-
-    file_path.unlink()
-    return SimpleStatus(success=True, message=f"{filename} deleted")
@@ -0,0 +1,174 @@
+import base64
+from http import HTTPStatus
+
+from fastapi import APIRouter, Depends, File, HTTPException, Response, UploadFile
+
+from lnbits.core.crud.assets import (
+    delete_user_asset,
+    get_asset_info,
+    get_public_asset,
+    get_public_asset_info,
+    get_user_asset,
+    get_user_asset_info,
+    get_user_assets,
+    update_user_asset_info,
+)
+from lnbits.core.models.assets import AssetFilters, AssetInfo, AssetUpdate
+from lnbits.core.models.misc import SimpleStatus
+from lnbits.core.models.users import User
+from lnbits.core.services.assets import create_user_asset
+from lnbits.db import Filters, Page
+from lnbits.decorators import (
+    check_user_exists,
+    optional_user_id,
+    parse_filters,
+)
+
+asset_router = APIRouter(prefix="/api/v1/assets", tags=["Assets"])
+
+upload_file_param = File(...)
+
+
+@asset_router.get(
+    "/paginated",
+    name="Get user assets",
+    summary="Get paginated list user assets",
+)
+async def api_get_user_assets(
+    user: User = Depends(check_user_exists),
+    filters: Filters = Depends(parse_filters(AssetFilters)),
+) -> Page[AssetInfo]:
+    return await get_user_assets(user.id, filters=filters)
+
+
+@asset_router.get(
+    "/{asset_id}",
+    name="Get user asset",
+    summary="Get user asset by ID",
+)
+async def api_get_asset(
+    asset_id: str,
+    user: User = Depends(check_user_exists),
+) -> AssetInfo:
+    asset_info = await get_user_asset_info(user.id, asset_id)
+    if not asset_info:
+        raise HTTPException(HTTPStatus.NOT_FOUND, "Asset not found.")
+    return asset_info
+
+
+@asset_router.get(
+    "/{asset_id}/binary",
+    name="Get user asset binary",
+    summary="Get user asset binary data by ID",
+)
+async def api_get_asset_binary(
+    asset_id: str,
+    user_id: str | None = Depends(optional_user_id),
+) -> Response:
+    asset = None
+    if user_id:
+        asset = await get_user_asset(user_id, asset_id)
+
+    if not asset:
+        asset = await get_public_asset(asset_id)
+
+    if not asset:
+        raise HTTPException(HTTPStatus.NOT_FOUND, "Asset not found.")
+
+    return Response(
+        content=asset.data,
+        media_type=asset.mime_type,
+        headers={"Content-Disposition": f'inline; filename="{asset.name}"'},
+    )
+
+
+@asset_router.get(
+    "/{asset_id}/thumbnail",
+    name="Get user asset thumbnail",
+    summary="Get user asset thumbnail data by ID",
+)
+async def api_get_asset_thumbnail(
+    asset_id: str,
+    user_id: str | None = Depends(optional_user_id),
+) -> Response:
+    asset_info = None
+    if user_id:
+        asset_info = await get_user_asset_info(user_id, asset_id)
+
+    if not asset_info:
+        asset_info = await get_public_asset_info(asset_id)
+
+    if not asset_info:
+        raise HTTPException(HTTPStatus.NOT_FOUND, "Asset not found.")
+
+    return Response(
+        content=(
+            base64.b64decode(asset_info.thumbnail_base64)
+            if asset_info.thumbnail_base64
+            else b""
+        ),
+        media_type=asset_info.mime_type,
+        headers={"Content-Disposition": f'inline; filename="{asset_info.name}"'},
+    )
+
+
+@asset_router.put(
+    "/{asset_id}",
+    name="Update user asset",
+    summary="Update user asset by ID",
+)
+async def api_update_asset(
+    asset_id: str,
+    data: AssetUpdate,
+    user: User = Depends(check_user_exists),
+) -> AssetInfo:
+    if user.admin:
+        asset_info = await get_asset_info(asset_id)
+    else:
+        asset_info = await get_user_asset_info(user.id, asset_id)
+
+    if not asset_info:
+        raise HTTPException(HTTPStatus.NOT_FOUND, "Asset not found.")
+
+    asset_info.name = data.name or asset_info.name
+    asset_info.is_public = (
+        asset_info.is_public if data.is_public is None else data.is_public
+    )
+    await update_user_asset_info(asset_info)
+    return asset_info
+
+
+@asset_router.post(
+    "",
+    name="Upload",
+    summary="Upload user assets",
+)
+async def api_upload_asset(
+    user: User = Depends(check_user_exists),
+    file: UploadFile = upload_file_param,
+    public_asset: bool = False,
+) -> AssetInfo:
+    asset = await create_user_asset(user.id, file, public_asset)
+
+    asset_info = await get_user_asset_info(user.id, asset.id)
+    if not asset_info:
+        raise ValueError("Failed to retrieve asset info after upload.")
+
+    return asset_info
+
+
+@asset_router.delete(
+    "/{asset_id}",
+    name="Delete user asset",
+    summary="Delete user asset by ID",
+)
+async def api_delete_asset(
+    asset_id: str,
+    user: User = Depends(check_user_exists),
+) -> SimpleStatus:
+    asset = await get_user_asset(user.id, asset_id)
+    if not asset:
+        raise HTTPException(HTTPStatus.NOT_FOUND, "Asset not found.")
+
+    await delete_user_asset(user.id, asset_id)
+    return SimpleStatus(success=True, message="Asset deleted successfully.")
@@ -130,6 +130,12 @@ class Compat:
            return "BIGINT"
        return "INT"

+    @property
+    def blob(self) -> str:
+        if self.type in {POSTGRES}:
+            return "BYTEA"
+        return "BLOB"
+
    def timestamp_placeholder(self, key: str) -> str:
        return compat_timestamp_placeholder(key)

@@ -356,17 +356,6 @@ def normalize_path(path: str | None) -> str:
    return "/" + "/".join(path_segments(path))


-def safe_upload_file_path(filename: str, directory: str = "images") -> Path:
-    image_folder = Path(settings.lnbits_data_folder, directory)
-    file_path = image_folder / filename
-    # Prevent dir traversal attack
-    if image_folder.resolve() not in file_path.resolve().parents:
-        raise ValueError("Unsafe filename.")
-    # Prevent filename with subdirectories
-    file_path = image_folder / filename.split("/")[-1]
-    return file_path.resolve()
-
-
 def normalize_endpoint(endpoint: str, add_proto=True) -> str:
    endpoint = endpoint[:-1] if endpoint.endswith("/") else endpoint
    if add_proto:
@@ -280,8 +280,11 @@ class ThemesSettings(LNbitsSettings):
 class OpsSettings(LNbitsSettings):
    lnbits_baseurl: str = Field(default="http://127.0.0.1:5000/")
    lnbits_hide_api: bool = Field(default=False)
-    lnbits_upload_size_bytes: int = Field(default=512_000, ge=0)  # 500kb
-    lnbits_upload_allowed_types: list[str] = Field(
+
+
+class AssetSettings(LNbitsSettings):
+    lnbits_max_asset_size_mb: float = Field(default=2.5, ge=0.0)
+    lnbits_assets_allowed_mime_types: list[str] = Field(
        default=[
            "image/png",
            "image/jpeg",
@@ -297,6 +300,12 @@ class OpsSettings(LNbitsSettings):
            "heics",
        ]
    )
+    lnbits_asset_thumbnail_width: int = Field(default=128, ge=0)
+    lnbits_asset_thumbnail_height: int = Field(default=128, ge=0)
+    lnbits_asset_thumbnail_format: str = Field(default="png")
+
+    lnbits_max_assets_per_user: int = Field(default=1, ge=0)
+    lnbits_assets_no_limit_users: list[str] = Field(default=[])


 class FeeSettings(LNbitsSettings):
@@ -867,6 +876,7 @@ class EditableSettings(
    ExtensionsSettings,
    ThemesSettings,
    OpsSettings,
+    AssetSettings,
    FeeSettings,
    ExchangeProvidersSettings,
    SecuritySettings,
@@ -149,6 +149,8 @@ window.localisation.en = {
  extensions: 'Extensions',
  no_extensions: "You don't have any extensions installed :(",
  created: 'Created',
+  created_at: 'Created At',
+  updated_at: 'Updated At',
  search_extensions: 'Search extensions',
  search_wallets: 'Search wallets',
  extension_sources: 'Extension Sources',
@@ -159,6 +161,7 @@ window.localisation.en = {
  repository: 'Repository',
  confirm_continue: 'Are you sure you want to continue?',
  manage_extension_details: 'Install/uninstall extension',
+  upload: 'Upload',
  install: 'Install',
  uninstall: 'Uninstall',
  drop_db: 'Remove Data',
@@ -407,6 +410,8 @@ window.localisation.en = {
  first_name: 'First Name',
  last_name: 'Last Name',
  picture: 'Picture',
+  user_picture_desc:
+    'URL to an image to use as profile picture. You can upload it as an asset.',
  verify_email: 'Verify email with',
  account: 'Account',
  update_account: 'Update Account',
@@ -431,6 +436,26 @@ window.localisation.en = {
  toggle_gradient: 'Toggle Gradient',
  gradient_background: 'Gradient Background',
  language: 'Language',
+  assets: 'Assets',
+  max_asset_size_mb: 'Max Asset Size (MB)',
+  max_asset_size_mb_desc:
+    'The maximum allowed size for asset uploads in megabytes (can use decimal values).',
+  assets_allowed_mime_types: 'Allowed MIME Types',
+  assets_allowed_mime_types_desc:
+    'The MIME types that are allowed for asset uploads. No value means all uploads are allowed.',
+  thumbnail_width: 'Thumbnail Width',
+  thumbnail_width_desc: 'Width of the generated thumbnail in pixels.',
+  thumbnail_height: 'Thumbnail Height',
+  thumbnail_height_desc: 'Height of the generated thumbnail in pixels.',
+  thumbnail_format: 'Thumbnail Format',
+  thumbnail_format_desc:
+    'Image format of the generated thumbnail (PNG, JPEG, etc.).',
+  max_assets_per_user: 'Max Assets Per User',
+  max_assets_per_user_desc:
+    'The maximum number of assets a user can upload. Zero means upload forbidden.',
+  assets_no_limit_users: 'Users Without Asset Limits',
+  assets_no_limit_users_desc:
+    'These users can upload an unlimited number of assets (user id based).',
  color_scheme: 'Color Scheme',
  visible_wallet_count: 'Visible Wallet Count',
  admin_settings: 'Admin Settings',
@@ -0,0 +1,42 @@
+window.app.component('lnbits-admin-assets-config', {
+  props: ['form-data'],
+  template: '#lnbits-admin-assets-config',
+  mixins: [window.windowMixin],
+  data() {
+    return {
+      newAllowedAssetMimeType: '',
+      newNoLimitUser: ''
+    }
+  },
+  async created() {},
+  methods: {
+    addAllowedAssetMimeType() {
+      if (this.newAllowedAssetMimeType) {
+        this.removeAllowedAssetMimeType(this.newAllowedAssetMimeType)
+        this.formData.lnbits_assets_allowed_mime_types.push(
+          this.newAllowedAssetMimeType
+        )
+        this.newAllowedAssetMimeType = ''
+      }
+    },
+    removeAllowedAssetMimeType(type) {
+      const index = this.formData.lnbits_assets_allowed_mime_types.indexOf(type)
+      if (index !== -1) {
+        this.formData.lnbits_assets_allowed_mime_types.splice(index, 1)
+      }
+    },
+    addNewNoLimitUser() {
+      if (this.newNoLimitUser) {
+        this.removeNoLimitUser(this.newNoLimitUser)
+        this.formData.lnbits_assets_no_limit_users.push(this.newNoLimitUser)
+        this.newNoLimitUser = ''
+      }
+    },
+    removeNoLimitUser(user) {
+      if (user) {
+        this.formData.lnbits_assets_no_limit_users =
+          this.formData.lnbits_assets_no_limit_users.filter(u => u !== user)
+      }
+    }
+  }
+})
@@ -1,74 +0,0 @@
-window.app.component('lnbits-admin-library', {
-  props: ['form-data'],
-  template: '#lnbits-admin-library',
-  mixins: [window.windowMixin],
-  data() {
-    return {
-      library_images: []
-    }
-  },
-  async created() {
-    await this.getUploadedImages()
-  },
-  methods: {
-    onImageInput(e) {
-      const file = e.target.files[0]
-      if (file) {
-        this.uploadImage(file)
-      }
-    },
-    uploadImage(file) {
-      const formData = new FormData()
-      formData.append('file', file)
-      LNbits.api
-        .request(
-          'POST',
-          '/admin/api/v1/images',
-          this.g.user.wallets[0].adminkey,
-          formData,
-          {headers: {'Content-Type': 'multipart/form-data'}}
-        )
-        .then(() => {
-          this.$q.notify({
-            type: 'positive',
-            message: 'Image uploaded!',
-            icon: null
-          })
-          this.getUploadedImages()
-        })
-        .catch(LNbits.utils.notifyApiError)
-    },
-    getUploadedImages() {
-      LNbits.api
-        .request('GET', '/admin/api/v1/images', this.g.user.wallets[0].inkey)
-        .then(response => {
-          this.library_images = response.data.map(image => ({
-            ...image,
-            url: `${window.origin}/${image.directory}/${image.filename}`
-          }))
-        })
-        .catch(LNbits.utils.notifyApiError)
-    },
-    deleteImage(filename) {
-      LNbits.utils
-        .confirmDialog('Are you sure you want to delete this image?')
-        .onOk(() => {
-          LNbits.api
-            .request(
-              'DELETE',
-              `/admin/api/v1/images/${filename}`,
-              this.g.user.wallets[0].adminkey
-            )
-            .then(() => {
-              this.$q.notify({
-                type: 'positive',
-                message: 'Image deleted!',
-                icon: null
-              })
-              this.getUploadedImages()
-            })
-            .catch(LNbits.utils.notifyApiError)
-        })
-    }
-  }
-})
@@ -82,6 +82,31 @@ window.PageAccount = {
        allRead: false,
        allWrite: false
      },
+      assets: [],
+      assetsTable: {
+        loading: false,
+        columns: [
+          {
+            name: 'name',
+            align: 'left',
+            label: this.$t('Name'),
+            field: 'name',
+            sortable: true
+          },
+          {
+            name: 'created_at',
+            align: 'left',
+            label: this.$t('created_at'),
+            field: 'created_at',
+            sortable: true
+          }
+        ],
+        pagination: {
+          rowsPerPage: 6,
+          page: 1
+        }
+      },
+      assetsUploadToPublic: false,
      notifications: {
        nostr: {
          identifier: ''
@@ -89,6 +114,17 @@ window.PageAccount = {
      }
    }
  },
+  watch: {
+    'assetsTable.search': {
+      handler() {
+        const props = {}
+        if (this.assetsTable.search) {
+          props['search'] = this.assetsTable.search
+        }
+        this.getUserAssets()
+      }
+    }
+  },
  methods: {
    activeLanguage(lang) {
      return window.i18n.global.locale === lang
@@ -400,6 +436,94 @@ window.PageAccount = {
      } finally {
        this.apiAcl.password = ''
      }
+    },
+    async getUserAssets(props) {
+      try {
+        this.assetsTable.loading = true
+        const params = LNbits.utils.prepareFilterQuery(this.assetsTable, props)
+        const {data} = await LNbits.api.request(
+          'GET',
+          `/api/v1/assets/paginated?${params}`,
+          null
+        )
+        this.assets = data.data
+        this.assetsTable.pagination.rowsNumber = data.total
+      } catch (e) {
+        LNbits.utils.notifyApiError(e)
+      } finally {
+        this.assetsTable.loading = false
+      }
+    },
+    onImageInput(e) {
+      const file = e.target.files[0]
+      if (file) {
+        this.uploadAsset(file)
+      }
+    },
+    async uploadAsset(file) {
+      const formData = new FormData()
+      formData.append('file', file)
+      try {
+        await LNbits.api.request(
+          'POST',
+          `/api/v1/assets?public_asset=${this.assetsUploadToPublic}`,
+          null,
+          formData,
+          {
+            headers: {'Content-Type': 'multipart/form-data'}
+          }
+        )
+        this.$q.notify({
+          type: 'positive',
+          message: 'Upload successful!',
+          icon: null
+        })
+        await this.getUserAssets()
+      } catch (e) {
+        console.warn(e)
+        LNbits.utils.notifyApiError(e)
+      }
+    },
+    async deleteAsset(asset) {
+      LNbits.utils
+        .confirmDialog('Are you sure you want to delete this asset?')
+        .onOk(async () => {
+          try {
+            await LNbits.api.request(
+              'DELETE',
+              `/api/v1/assets/${asset.id}`,
+              null
+            )
+            this.$q.notify({
+              type: 'positive',
+              message: 'Asset deleted.'
+            })
+            await this.getUserAssets()
+          } catch (e) {
+            console.warn(e)
+            LNbits.utils.notifyApiError(e)
+          }
+        })
+    },
+    async toggleAssetPublicAccess(asset) {
+      try {
+        await LNbits.api.request('PUT', `/api/v1/assets/${asset.id}`, null, {
+          is_public: !asset.is_public
+        })
+        this.$q.notify({
+          type: 'positive',
+          message: 'Update successful!',
+          icon: null
+        })
+        await this.getUserAssets()
+      } catch (e) {
+        console.warn(e)
+        LNbits.utils.notifyApiError(e)
+      }
+    },
+    copyAssetLinkToClipboard(asset) {
+      const assetUrl = `${window.location.origin}/api/v1/assets/${asset.id}/binary`
+      this.copyText(assetUrl)
    }
  },

@@ -417,5 +541,6 @@ window.PageAccount = {
      this.tab = hash
    }
    await this.getApiACLs()
+    await this.getUserAssets()
  }
 }
@@ -65,7 +65,7 @@
    "js/components/admin/lnbits-admin-extensions.js",
    "js/components/admin/lnbits-admin-notifications.js",
    "js/components/admin/lnbits-admin-site-customisation.js",
-    "js/components/admin/lnbits-admin-library.js",
+    "js/components/admin/lnbits-admin-assets-config.js",
    "js/components/admin/lnbits-admin-audit.js",
    "js/components/lnbits-home-logos.js",
    "js/components/lnbits-new-user-wallet.js",
@@ -7,7 +7,7 @@ include('components/admin/users.vue') %} {%
 include('components/admin/site_customisation.vue') %} {%
 include('components/admin/audit.vue') %} {%
 include('components/admin/extensions.vue') %} {%
-include('components/admin/library.vue') %} {%
+include('components/admin/assets-config.vue') %} {%
 include('components/admin/notifications.vue') %} {%
 include('components/admin/server.vue') %} {%
 include('components/new_user_wallet.vue') %} {%
@@ -0,0 +1,154 @@
+<template id="lnbits-admin-assets-config">
+  <q-card-section class="q-pa-none">
+    <h6 class="q-my-none q-mb-sm">Assets</h6>
+    <div class="row q-col-gutter-md">
+      <div class="col-12 col-md-3">
+        <p>
+          <span v-text="$t('max_asset_size_mb')"></span>
+        </p>
+        <q-input
+          filled
+          type="number"
+          v-model.number="formData.lnbits_max_asset_size_mb"
+          :label="$t('max_asset_size_mb')"
+          step="0.1"
+          min="0"
+          :hint="$t('max_asset_size_mb_desc')"
+        ></q-input>
+      </div>
+
+      <div class="col-12 col-md-9">
+        <p>
+          <span v-text="$t('assets_allowed_mime_types')"></span>
+        </p>
+        <q-input
+          filled
+          v-model.number="newAllowedAssetMimeType"
+          @keydown.enter="addAllowedAssetMimeType()"
+          :label="$t('assets_allowed_mime_types')"
+          :hint="$t('assets_allowed_mime_types_desc')"
+        >
+          <q-btn
+            @click="addAllowedAssetMimeType()"
+            dense
+            flat
+            icon="add"
+          ></q-btn>
+        </q-input>
+        <div>
+          <q-chip
+            v-for="type in formData.lnbits_assets_allowed_mime_types"
+            :key="type"
+            removable
+            @remove="removeAllowedAssetMimeType(type)"
+            color="primary"
+            text-color="white"
+            class="ellipsis"
+            :label="type"
+            ><q-tooltip
+              v-if="identifier"
+              anchor="top middle"
+              self="bottom middle"
+              ><span v-text="identifier"></span></q-tooltip
+          ></q-chip>
+        </div>
+      </div>
+    </div>
+    <q-separator class="q-mb-lg q-mt-sm"></q-separator>
+    <h6 class="q-my-none q-mb-sm">Thumbnails</h6>
+    <div class="row q-col-gutter-md">
+      <div class="col-12 col-md-3">
+        <p>
+          <span v-text="$t('thumbnail_width')"></span>
+        </p>
+        <q-input
+          filled
+          type="number"
+          v-model.number="formData.lnbits_asset_thumbnail_width"
+          :label="$t('thumbnail_width')"
+          step="1"
+          min="0"
+          :hint="$t('thumbnail_width_desc')"
+        ></q-input>
+      </div>
+      <div class="col-12 col-md-3">
+        <p>
+          <span v-text="$t('thumbnail_height')"></span>
+        </p>
+        <q-input
+          filled
+          type="number"
+          v-model.number="formData.lnbits_asset_thumbnail_height"
+          :label="$t('thumbnail_height')"
+          step="1"
+          min="0"
+          :hint="$t('thumbnail_height_desc')"
+        ></q-input>
+      </div>
+      <div class="col-12 col-md-3">
+        <p>
+          <span v-text="$t('thumbnail_format')"></span>
+        </p>
+        <q-input
+          filled
+          v-model.number="formData.lnbits_asset_thumbnail_format"
+          :label="$t('thumbnail_format')"
+          :hint="$t('thumbnail_format_desc')"
+        ></q-input>
+      </div>
+    </div>
+    <q-separator class="q-mb-lg q-mt-sm"></q-separator>
+    <h6 class="q-my-none q-mb-sm">Users</h6>
+    <div class="row q-col-gutter-md">
+      <div class="col-12 col-md-3">
+        <p>
+          <span v-text="$t('max_assets_per_user')"></span>
+        </p>
+        <q-input
+          filled
+          type="number"
+          v-model.number="formData.lnbits_max_assets_per_user"
+          :label="$t('max_assets_per_user')"
+          step="1"
+          min="0"
+          :hint="$t('max_assets_per_user_desc')"
+        ></q-input>
+      </div>
+      <div class="col-12 col-md-9">
+        <p>
+          <span v-text="$t('assets_no_limit_users')"></span>
+        </p>
+        <q-input
+          filled
+          v-model.number="newNoLimitUser"
+          @keydown.enter="addNewNoLimitUser()"
+          :label="$t('assets_no_limit_users')"
+          :hint="$t('assets_no_limit_users_desc')"
+        >
+          <q-btn @click="addNewNoLimitUser()" dense flat icon="add"></q-btn>
+        </q-input>
+        <div>
+          <q-chip
+            v-for="type in formData.lnbits_assets_no_limit_users"
+            :key="type"
+            removable
+            @remove="removeNoLimitUser(type)"
+            color="primary"
+            text-color="white"
+            class="ellipsis"
+            :label="type"
+            ><q-tooltip
+              v-if="identifier"
+              anchor="top middle"
+              self="bottom middle"
+              ><span v-text="identifier"></span></q-tooltip
+          ></q-chip>
+        </div>
+      </div>
+    </div>
+  </q-card-section>
+  <q-card-section>
+    <!-- for spacing -->
+    <br />
+  </q-card-section>
+</template>
@@ -1,67 +0,0 @@
-<template id="lnbits-admin-library">
-  <q-card-section class="q-pa-none">
-    <h6 class="q-my-none q-mb-sm">
-      <span v-text="$t('image_library')"></span>
-    </h6>
-    <q-btn
-      color="primary"
-      label="Add Image"
-      @click="$refs.imageInput.click()"
-      class="q-mb-md"
-    />
-    <input
-      type="file"
-      ref="imageInput"
-      accept="image/png, image/jpeg, image/gif"
-      style="display: none"
-      @change="onImageInput"
-    />
-  </q-card-section>
-  <div class="row q-col-gutter-sm q-pa-sm">
-    <div
-      v-for="image in library_images"
-      :key="image.filename"
-      class="col-6 col-sm-4 col-md-3 col-lg-2"
-      style="max-width: 200px"
-    >
-      <q-card class="q-mb-sm">
-        <q-img :src="image.url" style="height: 150px" />
-
-        <q-card-section
-          class="q-pt-md q-pb-md row items-center justify-between"
-        >
-          <small
-            ><div
-              class="text-caption ellipsis"
-              style="max-width: 100px"
-              :title="image.filename"
-              v-text="image.filename"
-            ></div
-          ></small>
-          <q-btn
-            dense
-            flat
-            size="sm"
-            icon="content_copy"
-            @click="copyText(image.url)"
-            :title="$t('copy')"
-            ><q-tooltip>Copy image link</q-tooltip></q-btn
-          >
-          <q-btn
-            dense
-            flat
-            size="sm"
-            icon="delete"
-            color="negative"
-            @click="deleteImage(image.filename)"
-            :title="$t('delete')"
-            ><q-tooltip>Delete image</q-tooltip></q-btn
-          >
-        </q-card-section>
-      </q-card>
-    </div>
-  </div>
-  <div v-if="library_images.length === 0" class="q-pa-xl">
-    <div class="text-subtitle2 text-grey">No images uploaded yet.</div>
-  </div>
-</template>
@@ -62,6 +62,16 @@
                  ><span v-text="$t('access_control_list')"></span
                ></q-tooltip>
              </q-tab>
+              <q-tab
+                name="assets"
+                icon="perm_media"
+                :label="$q.screen.gt.sm ? $t('assets') : ''"
+                @update="val => (tab = val.name)"
+              >
+                <q-tooltip v-if="!$q.screen.gt.sm"
+                  ><span v-text="$t('assets')"></span
+                ></q-tooltip>
+              </q-tab>
            </q-tabs>
          </template>
          <template v-slot:after>
@@ -322,6 +332,7 @@
                      <q-input
                        v-model="user.extra.picture"
                        :label="$t('picture')"
+                        :hint="$t('user_picture_desc')"
                        filled
                        dense
                        class="q-mb-md"
@@ -951,6 +962,178 @@
                    </div>
                  </q-card-section>
                </q-tab-panel>
+                <q-tab-panel name="assets">
+                  <q-card-section>
+                    <div class="row">
+                      <div class="col-md-2 col-sm-12">
+                        <q-btn
+                          color="primary"
+                          :label="$t('upload')"
+                          @click="$refs.imageInput.click()"
+                          class="full-width"
+                        ></q-btn>
+                        <input
+                          type="file"
+                          ref="imageInput"
+                          style="display: none"
+                          @change="onImageInput"
+                        />
+                      </div>
+                      <div class="col-md-4 col-sm-12">
+                        <q-toggle
+                          v-model="assetsUploadToPublic"
+                          label="Visible for everyone (public)"
+                        ></q-toggle>
+                      </div>
+                      <div class="col-md-6 col-sm-12">
+                        <q-input
+                          :label="$t('search')"
+                          dense
+                          class="full-width q-pb-xl"
+                          v-model="assetsTable.search"
+                        >
+                          <template v-slot:before>
+                            <q-icon name="search"> </q-icon>
+                          </template>
+                          <template v-slot:append>
+                            <q-icon
+                              v-if="assetsTable.search !== ''"
+                              name="close"
+                              @click="assetsTable.search = ''"
+                              class="cursor-pointer"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </div>
+                    </div>
+                  </q-card-section>
+                  <q-separator></q-separator>
+                  <q-card-section>
+                    <q-table
+                      grid
+                      grid-header
+                      flat
+                      bordered
+                      :rows="assets"
+                      :columns="assetsTable.columns"
+                      v-model:pagination="assetsTable.pagination"
+                      :loading="assetsTable.loading"
+                      @request="getUserAssets"
+                      row-key="id"
+                      :filter="filter"
+                      hide-header
+                    >
+                      <template v-slot:item="props">
+                        <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
+                          <q-card class="q-ma-sm wallet-list-card text-center">
+                            <q-card-section>
+                              <a
+                                v-if="props.row.thumbnail_base64"
+                                target="_blank"
+                                style="color: inherit"
+                                :href="`/api/v1/assets/${props.row.id}/binary`"
+                              >
+                                <q-img
+                                  :src="
+                                    'data:image/png;base64,' +
+                                    props.row.thumbnail_base64
+                                  "
+                                  :alt="props.row.name"
+                                  loading="lazy"
+                                  style="height: 128px"
+                                  class="text-center cursor-pointer"
+                                >
+                                </q-img>
+                              </a>
+                              <q-icon v-else name="web_asset"></q-icon>
+                            </q-card-section>
+                            <q-separator></q-separator>
+
+                            <q-card-section>
+                              <q-btn-dropdown
+                                color="grey"
+                                dense
+                                outline
+                                no-caps
+                                :label="props.row.name"
+                                :icon="props.row.is_public ? 'public' : ''"
+                              >
+                                <q-list>
+                                  <q-item
+                                    clickable
+                                    v-close-popup
+                                    @click="copyAssetLinkToClipboard(props.row)"
+                                  >
+                                    <q-item-section avatar>
+                                      <q-avatar icon="content_copy" />
+                                    </q-item-section>
+                                    <q-item-section>
+                                      <q-item-label>Copy Link</q-item-label>
+                                      <q-item-label caption
+                                        >Copy asset link to
+                                        clipboard</q-item-label
+                                      >
+                                    </q-item-section>
+                                  </q-item>
+
+                                  <q-item
+                                    clickable
+                                    v-close-popup
+                                    @click="toggleAssetPublicAccess(props.row)"
+                                  >
+                                    <q-item-section avatar>
+                                      <q-avatar
+                                        :icon="
+                                          props.row.is_public
+                                            ? 'public_off'
+                                            : 'public'
+                                        "
+                                        text-color="primary"
+                                      />
+                                    </q-item-section>
+                                    <q-item-section v-if="props.row.is_public">
+                                      <q-item-label>Unpublish</q-item-label>
+                                      <q-item-label caption
+                                        >Make this asset private</q-item-label
+                                      >
+                                    </q-item-section>
+                                    <q-item-section v-else>
+                                      <q-item-label>Publish</q-item-label>
+                                      <q-item-label caption
+                                        >Make this asset public</q-item-label
+                                      >
+                                    </q-item-section>
+                                  </q-item>
+
+                                  <q-item
+                                    clickable
+                                    v-close-popup
+                                    @click="deleteAsset(props.row)"
+                                  >
+                                    <q-item-section avatar>
+                                      <q-avatar
+                                        icon="delete"
+                                        text-color="negative"
+                                      />
+                                    </q-item-section>
+                                    <q-item-section>
+                                      <q-item-label>Delete</q-item-label>
+                                      <q-item-label caption
+                                        >Permanently delete this
+                                        asset</q-item-label
+                                      >
+                                    </q-item-section>
+                                  </q-item>
+                                </q-list>
+                              </q-btn-dropdown>
+                            </q-card-section>
+                          </q-card>
+                        </div>
+                      </template>
+                    </q-table>
+                  </q-card-section>
+                </q-tab-panel>
              </q-tab-panels>
            </q-scroll-area>
          </template>
@@ -87,7 +87,7 @@
              {value: 'extensions', label: $t('extensions')},
              {value: 'notifications', label: $t('notifications')},
              {value: 'audit', label: $t('audit')},
-              {value: 'library', label: $t('Library')},
+              {value: 'assets-config', label: $t('assets')},
              {value: 'site_customisation', label: $t('site_customisation')}
            ]"
            option-value="value"
@@ -176,12 +176,12 @@
                  ><span v-text="$t('audit')"></span></q-tooltip
              ></q-tab>
              <q-tab
-                name="library"
-                icon="image"
-                :label="$q.screen.gt.sm ? $t('library') : null"
+                name="assets-config"
+                icon="perm_media"
+                :label="$q.screen.gt.sm ? $t('assets') : null"
                @update="val => (tab = val.name)"
                ><q-tooltip v-if="!$q.screen.gt.sm"
-                  ><span v-text="$t('library')"></span></q-tooltip
+                  ><span v-text="$t('assets')"></span></q-tooltip
              ></q-tab>
              <q-tab
                style="word-break: break-all"
@@ -240,8 +240,8 @@
                  <q-tab-panel name="audit">
                    <lnbits-admin-audit :form-data="formData" />
                  </q-tab-panel>
-                  <q-tab-panel name="library">
-                    <lnbits-admin-library :form-data="formData" />
+                  <q-tab-panel name="assets-config">
+                    <lnbits-admin-assets-config :form-data="formData" />
                  </q-tab-panel>
                </q-tab-panels>
              </q-scroll-area>
@@ -183,7 +183,7 @@
      <div class="row q-mt-lg">
        <q-btn
          @click="copyText(auditDetailsDialog.data)"
-          icon="copy_content"
+          icon="content_copy"
          color="grey"
          flat
          v-text="$t('copy')"