Media
The Media section is the file manager for FundedYouth’s CDN (content delivery network). Administrators use it to upload, browse, and manage image files that are used across the platform — currently for custom badge graphics, and in the future for inventory product images.
Overview
Section titled “Overview”The Media page has three parts: the upload zone, a search bar, and a grid of uploaded files.
Media
Browse, upload, and manage images in your R2 storage
Uploading Files
Section titled “Uploading Files”There are two ways to upload files:
- Drag and drop — Drag image files from your computer directly onto the upload zone. The border turns blue when a file is hovering over the area.
- Choose Files — Click the Choose Files button to open a file picker. You can select multiple files at once.
Supported Formats
Section titled “Supported Formats”| Format | MIME Type |
|---|---|
| JPEG | image/jpeg |
| PNG | image/png |
| WebP | image/webp |
| GIF | image/gif |
| SVG | image/svg+xml |
File Size Limit
Section titled “File Size Limit”Each file can be up to 5MB. Files larger than 5MB will be rejected with an error message.
What Happens During Upload
Section titled “What Happens During Upload”- You drop or select files
- The button changes to “Uploading…” with a spinner
- Each file is uploaded to the CDN one at a time
- The file appears in the grid below once complete
- The file count in the top-right corner updates
Files are stored with a timestamp prefix to prevent naming conflicts. For example, a file named badge-icon.png might be stored as media/1710345678901-badge-icon.png.
Browsing Files
Section titled “Browsing Files”All uploaded files appear in a grid below the search bar. Each file is shown as a card with:
| Detail | What It Shows |
|---|---|
| Thumbnail | A preview of the image, scaled to fill a square |
| Filename | The stored filename (truncated if long) |
| File size | The size in KB or MB |
Searching
Section titled “Searching”Use the search bar to filter files by name. The search is case-insensitive and filters in real time as you type. When no files match, you’ll see “No files match your search.”
File Actions
Section titled “File Actions”Hover over any file card to reveal two action buttons:
| Action | Button | What It Does |
|---|---|---|
| Copy URL | Copy icon (white circle) | Copies the file’s public CDN URL to your clipboard. The icon turns to a green checkmark for 2 seconds to confirm. |
| Delete | Trash icon (red circle) | Opens a confirmation dialog to delete the file (see below) |
Copying a File URL
Section titled “Copying a File URL”The Copy URL action gives you the full public URL for the file — for example:
https://cdn.fundedyouth.org/media/1773424818399-3d-printing-pro_educational-pathway-badge-v1.png
You can paste this URL into badge forms, documentation, or anywhere else that accepts an image URL.
Deleting a File
Section titled “Deleting a File”Clicking the delete button opens a confirmation dialog:
- Deletion is permanent — the file is removed from R2 storage and cannot be recovered
- If the file is currently referenced by a badge or product, the reference will break (the image will stop displaying)
- Both uploads and deletions are recorded in the Audit Log
How Media Is Used
Section titled “How Media Is Used”Custom Badge Graphics
Section titled “Custom Badge Graphics”The primary use of the Media library today is for custom badge graphics. When creating or editing a badge in the Students section, admins can click Browse Media to open an inline media browser and select an uploaded image as the badge’s custom icon.
If no custom image is selected, the badge falls back to a default icon from the system’s icon library.
Inventory Product Images (Future)
Section titled “Inventory Product Images (Future)”The Media library will also be used for product images in the Inventory section. Products will be able to reference uploaded media files for their display images.
Important Things to Know
Section titled “Important Things to Know”- Admin access only. Only users with the Admin role can upload, browse, or delete media files.
- Files are public. Once uploaded, files are accessible via their CDN URL. Do not upload sensitive or private images.
- No folders. All files are stored in a flat list under the
media/prefix. Use descriptive filenames to stay organized. - Filenames are sanitized. Special characters are removed and the filename is converted to lowercase when stored.
- No duplicate prevention. Uploading a file with the same name creates a new file with a different timestamp prefix — it does not overwrite the original.
- Deletions are audited. Every upload and deletion is logged in the Audit Log with the admin who performed the action.
Next Steps
Section titled “Next Steps”- Learn about Badges and how custom badge graphics work with media
- See the Admin Portal Overview for all available admin features