Media Library

LaraDashboard's Media Library provides a centralized location for managing all your uploaded files including images, documents, videos, and more.

Overview#

Accessing the Media Library#

Navigate to Media in the sidebar to access the library.

Library Interface#

┌─────────────────────────────────────────────────────────────────┐
│  Media Library                          [Upload] [Search] [Filter]│
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────┐       │
│  │          │  │          │  │          │  │          │       │
│  │  Image   │  │  Image   │  │  Image   │  │  Document│       │
│  │          │  │          │  │          │  │          │       │
│  └──────────┘  └──────────┘  └──────────┘  └──────────┘       │
│  image1.jpg    image2.png    photo.jpg     report.pdf         │
│                                                                 │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────┐       │
│  │          │  │          │  │          │  │          │       │
│  │  Video   │  │  Image   │  │  Image   │  │  Archive │       │
│  │          │  │          │  │          │  │          │       │
│  └──────────┘  └──────────┘  └──────────┘  └──────────┘       │
│  video.mp4     banner.jpg    logo.svg      backup.zip         │
│                                                                 │
├─────────────────────────────────────────────────────────────────┤
│  Showing 8 of 156 files                         < 1 2 3 4 5 >  │
└─────────────────────────────────────────────────────────────────┘

Uploading Files#

Single File Upload#

1. Click the Upload button
2. Select file from your computer
3. Wait for upload to complete
4. File appears in the library

Bulk Upload#

1. Click Upload
2. Select multiple files (Ctrl/Cmd+click)
3. Or use the drag-and-drop zone
4. All files upload simultaneously

Drag and Drop#

Simply drag files from your computer directly into the library:

1. Open the Media Library
2. Drag files onto the page
3. Drop zone activates
4. Release to upload

Upload from URL#

Import files from external URLs:

1. Click Upload → From URL
2. Enter the file URL
3. Click Import
4. File is downloaded and added

File Types#

Supported Formats#

Category	Extensions
Images	JPG, JPEG, PNG, GIF, SVG, WebP, ICO
Documents	PDF, DOC, DOCX, XLS, XLSX, PPT, PPTX
Archives	ZIP, RAR, 7Z, TAR, GZ
Video	MP4, MOV, AVI, WebM, MKV
Audio	MP3, WAV, OGG, M4A, FLAC
Code	JSON, XML, CSV, TXT, MD

File Size Limits#

Default limits (configurable):

Type	Max Size
Images	10 MB
Documents	20 MB
Videos	100 MB
Other	10 MB

Checking Upload Limits#

Click Upload Limits to see current restrictions:

Maximum File Size: 10 MB
Allowed Types: jpg, png, gif, pdf, mp4...
Available Storage: 4.2 GB / 5 GB

Managing Files#

Viewing File Details#

Click any file to open the detail panel:

┌─────────────────────────────────────────────┐
│  [Image Preview]                            │
│                                             │
│  Filename: hero-banner.jpg                  │
│  Type: image/jpeg                           │
│  Size: 245 KB                               │
│  Dimensions: 1920 x 1080                    │
│  Uploaded: Jan 15, 2024                     │
│  Uploaded by: Admin                         │
│                                             │
│  Alt Text: [________________________]       │
│  Caption: [________________________]        │
│                                             │
│  URL: https://site.com/storage/hero.jpg    │
│  [Copy URL]                                 │
│                                             │
│  [Delete] [Download] [Edit]                 │
└─────────────────────────────────────────────┘

Editing Files#

Edit file metadata:

1. Click on the file
2. Edit fields:
   • Alt Text - Accessibility description
   • Caption - Display caption
   • Title - File title
3. Click Save

Deleting Files#

Single Delete#

1. Click file to select
2. Click Delete button
3. Confirm deletion

Bulk Delete#

1. Check multiple files
2. Click Bulk Actions → Delete
3. Confirm deletion

Warning: Deleted files cannot be recovered. Ensure they're not in use.

Downloading Files#

1. Click file to open details
2. Click Download
3. File downloads to your computer

Image Processing#

Automatic Conversions#

When you upload images, LaraDashboard creates:

Conversion	Size	Use Case
Thumb	150x150	Thumbnails
Preview	300x300	Previews
Medium	640x640	General use
Large	1024x1024	Featured

Image Optimization#

Images are automatically:

• Compressed for web (quality 85%)
• Stripped of EXIF data (configurable)
• Converted to WebP (if supported)
• Responsive srcset generated

Manual Image Editing#

Basic editing available:

1. Click image → Edit
2. Available tools:
   • Crop
   • Rotate
   • Flip
   • Resize

Organizing Files#

Search#

Search files by name:

1. Enter keywords in search box
2. Results filter in real-time
3. Search matches filename and metadata

Filters#

Filter by file type:

• All - All files
• Images - Photos and graphics
• Documents - PDFs, docs, spreadsheets
• Video - Video files
• Audio - Audio files

Sorting#

Sort files by:

• Date - Newest or oldest first
• Name - Alphabetical
• Size - Largest or smallest
• Type - Grouped by file type

View Options#

Toggle between views:

• Grid View - Visual thumbnails
• List View - Detailed list

Using Media in Content#

In the Editor#

1. Place cursor where you want media
2. Click the media button in toolbar
3. Select from library or upload new
4. Configure display options:
   • Size (thumbnail, medium, large, full)
   • Alignment (left, center, right)
   • Link behavior
5. Insert into content

As Featured Image#

1. Edit post/page
2. Find Featured Image panel
3. Click Set Featured Image
4. Select or upload image
5. Click Use Image

In LaraBuilder#

1. Add Image or Gallery block
2. Click to configure
3. Select from media library
4. Adjust settings

File URLs#

URL Structure#

Files are accessible at:

https://yourdomain.com/storage/media/{file-path}

Getting File URL#

1. Click on file
2. Copy URL from details panel
3. Or right-click → Copy URL

Direct Links#

Share files directly:

https://yourdomain.com/storage/media/documents/report.pdf

Storage Configuration#

Storage Location#

Files are stored in:

storage/app/public/media/

Accessible via symlink at:

public/storage/media/

Creating Symlink#

If files aren't accessible:

php artisan storage:link

Cloud Storage#

Configure S3 or other cloud storage:

1. Update .env:

FILESYSTEM_DISK=s3
AWS_ACCESS_KEY_ID=your-key
AWS_SECRET_ACCESS_KEY=your-secret
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=your-bucket

2. Files automatically upload to S3

Permissions#

Media Permissions#

Permission	Description
media.view	View media library
media.upload	Upload new files
media.edit	Edit file metadata
media.delete	Delete files

File Ownership#

• Files are associated with uploader
• Admins can manage all files
• Users may be restricted to own files

API Access#

Listing Media#

GET /api/v1/media

Uploading Media#

POST /api/v1/media
Content-Type: multipart/form-data

file: (binary)
alt_text: Description

Deleting Media#

DELETE /api/v1/media/{id}

See API Reference for complete documentation.

Best Practices#

File Naming#

• Use descriptive names: hero-banner-homepage.jpg
• Avoid spaces: use hyphens or underscores
• Keep names concise but meaningful
• Include dimensions for images: logo-200x50.png

Image Optimization#

Before uploading:

1. Resize to maximum needed size
2. Compress using tools like TinyPNG
3. Choose appropriate format:
   • JPEG - Photos
   • PNG - Graphics with transparency
   • SVG - Logos and icons
   • WebP - Modern format, best compression

Organization Tips#

• Upload related files together
• Use consistent naming conventions
• Regularly clean unused files
• Document file purposes in alt text

Performance#

• Keep library organized
• Delete unused files
• Use appropriate image sizes
• Leverage automatic conversions

Troubleshooting#

Upload Fails#

Symptoms: Upload error or timeout

Solutions:

1. Check file size against limits
2. Verify file type is allowed
3. Check server upload limits:

   // php.ini
   upload_max_filesize = 20M
   post_max_size = 25M
   

4. Check storage permissions

Files Not Displaying#

Symptoms: Broken image icons

Solutions:

1. Run php artisan storage:link
2. Check file path in database
3. Verify file exists in storage
4. Check URL configuration

Missing Thumbnails#

Symptoms: Only original shows

Solutions:

1. Check image processor (GD/Imagick)
2. Verify media-library config
3. Regenerate conversions:

   php artisan media-library:regenerate
   

Storage Full#

Symptoms: Upload rejected

Solutions:

1. Check disk space
2. Delete unused files
3. Compress existing images
4. Upgrade storage

Integration with Spatie Media Library#

LaraDashboard uses Spatie Media Library. For advanced usage:

Custom Conversions#

// In model
public function registerMediaConversions(Media $media = null): void
{
    $this->addMediaConversion('custom')
        ->width(800)
        ->height(600)
        ->sharpen(10);
}

Responsive Images#

public function registerMediaConversions(Media $media = null): void
{
    $this->addMediaConversion('responsive')
        ->withResponsiveImages();
}

See Developer Guide for more.

Next Steps#

• Content Management - Use media in content
• Email Templates - Add images to emails
• Settings - Configure upload limits