🤹
TALL Stack Tips
  • What is TALL Stack
  • Tailwind
    • Tailwind Resources
    • Swinging Bell Notification Icon
    • Styled Unordered Lists
  • Alpine
  • Alpine Resources
  • Tabbed Content Using Alpine JS
  • Checkbox component with SVG tick
  • Dropdown animation
  • Create a Sliding Puzzle Captcha
  • Laravel
    • Tabler Icons Component
    • Password-less Login with Laravel 8+
    • Password-less Login with Magic Link in Laravel 8
    • Laravel Resources
    • Laravel Breeze Login Conditional Redirect
    • Jetstream Login Conditional Redirect
    • Simplify Laravel CRUD Controllers
    • CSRF and expired login forms
    • CSRF and expired logout forms
    • Add your own logo to Laravel Mail
    • Specify a different mail theme for Notifications
    • Show custom page when email verification link expired
    • Using a mutator to save currency
    • Using Spatie Valuestore to hold frequently accessed settings
    • Using the old() helper
    • Alternatives to using Eloquent Accessor
    • UpdateOrCreate may not update timestamp
    • Use of lockForUpdate()
    • Using S3
    • Super Simple User Based Feature Flags
    • Installing a Specific Version of Laravel
    • Versioning your Laravel Project
    • CSS Cache Busting with your Git Commit SHA
    • Adding column to Database Notifications table
    • Find nearby locations using the Haversine formula in Eloquent query
    • Using Queues on Shared Hosting with Laravel
    • Create Guaranteed Unique Invoice Number in Laravel
    • Send Notification to all team members
    • Protect Staging site with Basic Auth
    • Working with Enums
    • PHP DateTime formatting cribsheet
  • Livewire
    • Livewire Resources
    • Naming Livewire Components
    • Dynamic Cascading Dropdown with Livewire
    • Hiding a button after click
    • Working with Javascript Components
    • SweetAlert2 with Livewire
    • Select Multiple or Checkboxes
    • Clearing checkboxes in Livewire
    • Livewire File Uploads Using S3
    • Simple Log File Viewer
  • Related Resources
    • Testing resources
    • When Composer runs out of memory
    • Deployment
    • Security
    • Scheduler & Cron tips
    • LastPass tips
    • Using Git
    • VSCode Tips
    • Markdown
    • Cpanel resources
Powered by GitBook
On this page
  • Enabling CORS on your S3 Bucket
  • Removing filename from input field after upload

Was this helpful?

  1. Livewire

Livewire File Uploads Using S3

PreviousClearing checkboxes in LivewireNextSimple Log File Viewer

Last updated 4 years ago

Was this helpful?

Enabling CORS on your S3 Bucket

If you want to upload directly from the browser to S3 then you need to create a CORS policy for the domain. Without the correct policy your direct upload to S3 will not be permitted, and in the browser console, you will see an error such as; Access to XMLHttpRequest at '......' from origin 'http://example.test' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Go to your bucket in the S3 console, click Permissions then CORS

Create a policy that mentions the domain name(s) of your site and the Verbs that you want to allow.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>http://mysite.test</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
    <AllowedOrigin>https://www.my-live-domain.org</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Removing filename from input field after upload

If you have a view in which the file upload control remains on-screen after completing an upload, you will find that after saving the upload, the file input cannot be returned to the 'No file chosen' state. The file input element is immutable and cannot be set or cleared.

One trick is to give the upload button an id that is specified in the Livewire back-end component. A simple counter suffices. After the upload of a file, increment the count. The component will be removed from the dom and replaced with a new file input element using a new ID - and an empty filename.

<input wire:model="attachment" type="file" name="attachment" id="upload{{ $iteration }}" />

After saving

        //clean up
        $this->attachment=null;
        $this->iteration++;
        
Using cross-origin resource sharing (CORS) - Amazon Simple Storage ServiceAmazon Simple Storage Service
Logo