Upvendo Knowledge Base

Appearance

Content ​

Overview ​

Content is the merchant's central media library for uploading and managing images used across the platform (item photos, category and modifier images, branding logos/banners, and kiosk screens). Images uploaded here can be reused anywhere an image picker appears.

Key Purpose: Upload, organize, and reuse images across items, branding, and devices.

Purpose ​

This page lets you upload images (one or many at once), search and filter your media library, see where each image is used, edit alt text, export images, and delete images you no longer need.

Key Concepts ​

  • Content (image) record: A stored image in the contents collection (tenant-scoped, soft-deleted). Each record holds the file name, size, source, alt text, and where it's used.
  • Source: How the image arrived — direct_upload (file picker / drag-and-drop) or url (added from a web link). Other sources (Square, MplusKassa, ShopCaisse, AI Photo, etc.) appear for images synced or generated elsewhere.
  • References / "Used by": Each image shows which records reference it — Items, Categories, Modifiers, Branding Profiles, Device Profiles, and Display Groups.
  • Alt text: Optional accessibility/description text stored per image and editable from the details dialog.
  • Cloudflare Images: Uploaded images are served via Cloudflare Images when available (with a storage fallback), so thumbnails and variants are delivered through Cloudflare's CDN.
  • Location filter: Images can carry location_ids, letting you filter the library by location.

Route ​

  • Backoffice Route: /content
  • Backend API base: /back-office/contents
  • Vue Component: src/views/content/Content.vue
  • Backend Controller: app/Http/Controllers/Api/BackOffice/ContentController.php
  • Model: app/RawModels/Content.php

Actions ​

Upload Images ​

Click Upload to open the upload dialog. Drag-and-drop files into the drop zone or click Upload New to pick files (multiple allowed). You can also click Add From URL to add an image by its web link. Files upload concurrently (3 at a time) and the dialog auto-closes when all succeed. Requires the Create Content permission.

Search and Filter ​

Use the search box to filter by file name, the location dropdown to filter by location, the items-per-page selector (10 / 15 / 20 / 25), and the Sort toggle to sort by name (A–Z).

View / Edit Details ​

Click an image (or its name) to open the details dialog, which shows the preview, name, file size, the list of records it's Used in, and an editable Alt Text field. Click Save to store the alt text.

Export Images ​

Click Export to download a ZIP of images. With nothing selected it exports the current filtered set; with images selected it exports only those. Limited to fewer than 50 images per export. Requires the View Content permission.

Delete Images ​

Select one or more images (checkboxes) and click Delete, then confirm. Deletion is permanent (soft-deleted server-side) and removes the file from every place it's used. Requires the Delete Content permission.

Fields ​

Name ​

  • ID: name
  • Type: Text (file name)
  • Required: Yes (max 255 chars)
  • Impact: Shown in the library table, details dialog, and used as the file name in exports.

Source ​

  • ID: source
  • Type: Enum (direct_upload, url, existing, photo_studio, external, square, mpluskassa, shopcaisse, suggestions_api, ai_photo)
  • Required: Yes
  • Impact: Records where the image came from; uploads from this page are direct_upload or url.

File ​

  • ID: file
  • Type: Image
  • Required: Yes (on upload)
  • Validation (client): Allowed formats JPG/JPEG, PNG, SVG, WEBP; max 10MB per file. The upload dialog caption recommends 512×512 and lists a 5MB guideline.
  • Impact: The actual image stored and served.

Alt Text ​

  • ID: alt_text
  • Type: Text
  • Required: No (max 255 chars)
  • Impact: Accessibility/description text; editable from the details dialog.

For Receipt ​

  • ID: for_receipt
  • Type: Toggle (boolean)
  • Default: false
  • Impact: Flags an image for receipt rendering, producing a receipt-optimized variant.

Used By (read-only) ​

  • ID: used_by
  • Type: List of { name, type }
  • Impact: Shows which Items, Categories, Modifiers, Branding Profiles, Device Profiles, or Display Groups reference the image.

Business Rules ​

  • Content records are tenant-scoped (per merchant) and soft-deleted, so removed images are marked deleted rather than erased.
  • Deletion is not blocked when an image is in use — the warning states files are permanently removed from all locations where they're used, so deleting an in-use image can leave references without an image.
  • Uploads are validated client-side for type (JPG/PNG/SVG/WEBP) and size (max 10MB); the server requires a name (max 255), a valid source, and a file.
  • Export is capped at fewer than 50 images per ZIP; larger result sets must be narrowed with filters first.
  • Images are served through Cloudflare Images when a Cloudflare image ID exists, with a storage fallback for non-migrated images.
  • Three distinct permissions gate the page: View Content (view/export), Create Content (upload), and Delete Content (delete).

Customer Impact ​

  • Kiosk: Images assigned to items, categories, modifiers, and device profiles (dining-option and screensaver images) appear on the kiosk.
  • Online Ordering: Item, category, and modifier images selected from the library show on the storefront.
  • Branding: Logo, favicon, and banner images chosen for branding profiles come from this library.
  • Receipts: Images flagged for receipt use render on receipts via a receipt-optimized variant.

FAQs ​

  • "Can I upload more than one image at a time?" Yes. The upload dialog accepts multiple files via drag-and-drop or the file picker, and uploads them in parallel (3 at a time).

  • "What image formats and sizes can I upload?" JPG/JPEG, PNG, SVG, and WEBP, up to 10MB per file. The dialog recommends roughly 512×512.

  • "Can I add an image from a web link instead of a file?" Yes. In the upload dialog click Add From URL and paste a link ending in a supported format (JPG, PNG, SVG, or WEBP).

  • "How do I know if an image is being used?" The References column and the details dialog's Used in section list every Item, Category, Modifier, Branding Profile, Device Profile, or Display Group that references the image.

  • "What happens if I delete an image that's still in use?" It's permanently removed from everywhere it's used. The delete confirmation warns that this can't be undone, so check the references first.

  • "How do I add a description or alt text to an image?" Open the image's details dialog, type into the Alt Text field, and click Save.

  • "Can I download my images?" Yes. Use Export to get a ZIP — either the current filtered set or just the images you've selected. Exports are limited to fewer than 50 images at a time.

  • "Can I filter images by location?" Yes. Use the location dropdown above the table to show only images tied to a specific location.

  • "Why do some images show a source like Square or Mpluskassa?" Those images were synced from an integration (or generated by AI Photo) rather than uploaded here; the source field records their origin.

Troubleshooting ​

  • Upload rejected ("invalid format" / "size exceeds") → Confirm the file is JPG, PNG, SVG, or WEBP and under 10MB; convert or resize and retry.
  • "Add From URL" link rejected → The URL must end in (or clearly indicate) a supported format — JPG, PNG, SVG, or WEBP.
  • Export fails with a limit error → You're trying to export 50 or more images; narrow with search or the location filter, or select fewer images.
  • Upload / Delete button missing → You likely lack the Create Content or Delete Content permission; an admin must grant it.
  • A deleted image still appears somewhere → The image was in use when deleted; reassign a new image to the affected item, category, or branding profile.

Assistant Guidance ​

When answering questions about this feature:

  • Use the path Content (left nav, photo icon) and route /content.
  • Distinguish the three permissions: View (browse/export), Create (upload), Delete (remove).
  • For "where is this image used" questions, point to the References column / Used in list.
  • For upload failures, confirm format (JPG/PNG/SVG/WEBP) and size (≤10MB) first.
  • Remind merchants that deleting an in-use image removes it everywhere — check references before deleting.
  • For export errors, mention the under-50-images limit and suggest filtering.

Relations ​

Depends On ​

  • Locations: Powers the location filter and per-location association.

Affects ​

  • Items: Item photos are chosen from this library.
  • Categories: Category images come from here.
  • Modifiers: Modifier images come from here.
  • Branding: Logo, favicon, and banner images.
  • Device Profiles: Dining-option and screensaver images for kiosk/devices.
  • Display Groups: Display group images.