If you're like me and have a Filament PHP app hosted on DigitalOcean's (DO) App Platform, you might be looking for guidance on how to save files or images to DO Spaces. In this post, I'll walk you through the settings and code needed to get everything up and running.
What I Was Building
I recently developed the blog system on my own site and encountered some challenges finding accurate and relevant information. This post compiles what I learned to help you avoid the same issues.
Assumptions
DigitalOcean Account and Spaces: I’m assuming you already have a DigitalOcean account and have created a Space. If not, I'll be publishing a guide on setting up Laravel on DigitalOcean soon, which I'll link here.
Key Specs:
- Hosting: DigitalOcean App Platform
- Storage: DigitalOcean Spaces
- Framework: Filament PHP (v3) with Laravel (v10)
Filament PHP App: You should already have a Filament PHP app running.
Configuring the Application for DigitalOcean
Step 1: Add Environment Variables
To begin, you'll need to set up Spaces in your DigitalOcean account and obtain your access keys and endpoint information. If you're using the CDN feature, you'll also need to include that.
In your .env file, add the following:
.env
FILAMENT_FILESYSTEM_DISK=do
FILAMENT_FILESYSTEM_DRIVER=do
DO_ACCESS_KEY_ID={your_access_key}
DO_SECRET_ACCESS_KEY={your_secret_access_key}
DO_DEFAULT_REGION={region}
DO_BUCKET={bucket_name}
DO_ENDPOINT={endpoint_url}
DO_CDN_ENDPOINT={cdn_endpoint_url}
DO_DIRECTORY={directory}
DO_USE_PATH_STYLE_ENDPOINT=false
DO_URL={your_url} # This will be explained later
Step 2: Configure Filesystem Settings
Next, update config/filesystems.php to include the following configuration:
config/filesystems.php
'do' => [
'driver' => 's3',
'key' => env('DO_ACCESS_KEY_ID'),
'secret' => env('DO_SECRET_ACCESS_KEY'),
'region' => env('DO_DEFAULT_REGION'),
'bucket' => env('DO_BUCKET'),
'url' => env('DO_URL'),
'endpoint' => env('DO_ENDPOINT'),
'cdn_endpoint' => env('DO_CDN_ENDPOINT'),
'directory' => env('DO_DIRECTORY'),
'use_path_style_endpoint' => env('DO_USE_PATH_STYLE_ENDPOINT', false),
'throw' => false,
'bucket_endpoint' => true,
'visibility' => 'public',
],
The DO_URL is critical and should point to your DigitalOcean endpoint URL. This ensures that Laravel can generate the correct URLs for accessing files.
Setting Up Filament and the View
Backend: File Upload Configuration
To allow file uploads in your Filament app, update the BlogResource.php file as follows:
PostResource.php
Forms\Components\FileUpload::make('featured_image')
->disk('do')
->directory('post-images')
->image(),
This configuration ensures that uploaded images are stored in the correct directory within your DigitalOcean Space.
Frontend: Displaying Uploaded Files
To display the uploaded images, update your blog-show.blade.php file like this:
<img class="mt-5 aspect-video rounded-xl bg-gray-50 object-cover"
src="{{ Storage::disk('do')->url($post->featured_image) }}"
alt="{{ $post->title }}">
This Blade directive uses Laravel's storage helper to generate the URL for the image stored in your Space.
Conclusion
By following these steps, you can successfully set up a DigitalOcean Space, integrate it with your Laravel Filament PHP app, and implement both backend file uploads and frontend file display. With DigitalOcean’s scalable infrastructure and Laravel’s robust ecosystem, you’re well-equipped to handle file management in your app.
If you found this guide helpful or have any questions, feel free to reach out in the comments below! And stay tuned for my upcoming post on setting up Laravel on DigitalOcean.