Laravel Livewire Tutorial: Multiple File Upload! (part 8)

Показать описание

In this laravel livewire tutorial, we will add multiple file upload to each individual post. To make it simpler for us, we're just going to add another table for the additional photos in this laravel livewire tutorial. This is another essential and practical thing to know when it comes to multiple file upload using laravel livewire. Multiple file upload is probably one of the most tedious tasks when creating a web application. Luckily, with laravel livewire, it makes it easier to implement multiple file upload feature. This laravel livewire tutorial series, will help you implement a laravel livewire crud functionality.

Note: In this video, we are using Laravel 7.

Timeline:
0:36 - Prepare the model and a migration file for the multiple files to be uploaded
1:49 - Create the storage folder for the multiple files to be uploaded
2:05 - Add another form element to handle file multiple file upload
2:46 - Add additional logic to handle multiple file upload
3:26 - Build the real logic for the multiple file upload
5:31 - Save the filenames of the uploaded images in the database table
7:27 - Make another livewire component to display the uploaded images
8:05 - Use bootstrap modal to show the uploaded images
8:58 - Add additional event listeners for showing the images
12:43 - Query the images from the database table
13:10 - Update the frontend for the final touch

Previous Video: Intervention Image for Laravel - File Upload Continuation (part 7)

Next Video: Simple User Profile (part 9)

Github Repo:

#laravelLivewire #laravel7 #livewire

Рекомендации по теме

Комментарии

Important! Please read first!

We are using a different version of laravel and livewire here! To follow along, just install the specific version. Once you learned the basics of livewire in this video, you can easily move up to laravel 8 and livewire 2!

Install laravel specific version 👇👇👇

composer create-project laravel/laravel=7.25.0 name_of_your_project --prefer-dist

Install livewire specific version 👇👇👇

composer require livewire/livewire:1.3

sentgine

Thank you so much. This is becoming really interesting and useful.

davidsonzed

Thank you for sharing idol! Stay connect.

chan_otasin

hooray, not having to watch a video with the laravel installation !.

alfalalo

Laravel Livewire Tutorial: Multiple File Upload! (part 8)

Multi File Upload | Laravel Livewire 3 for Beginners EP19

Multiple File Uploads - Laravel Livewire v3 Tutorial #episode 21

Laravel Livewire Tutorial #8 Multiple Image Upload with Livewire

Laravel Livewire multiple file upload and saving with ability to add multiple fields

Laravel Livewire Tutorial: Multiple File Upload! (part 8)

Laravel 8 Tutorial - Livewire Multiple Image Upload

Multiple file upload with progress indicator| Laravel Livewire 3 from Scratch

Laravel: Livewire Multiple Image Upload | Delete Multiple Images | Laravel Livewire Crud | PART - 3

Laravel Livewire | Multiple Files Upload with Validation

Laravel: Livewire Multiple Image Upload | Edit Multiple Image | Laravel Livewire Crud | PART - 2

Laravel: Livewire Multiple Image Upload | Laravel Livewire Crud | Upload | Laravel Livewire | PART-1

Livewire 3 File Uploads: Single and Multiple File and Image Upload Guide

LIVEWIRE MULTIPLE FILE UPLOAD

Livewire: Full Page Components Example with Layouts

Laravel Livewire Tutorial: Simple File Upload! (part 6)

Ep7 - Handling Multiple File Uploads | Livewire FIle uploads

Drag and drop multiple file uploader | Laravel Livewire 3 from Scratch

Laravel Livewire Multiple Image Upload | Part-01 | Add multiple images for a single product

Laravel Livewire Tutorial: Intervention Image for Laravel - File Upload Continuation (part 7)

Laravel Livewire File upload, Instant preview and how it works - quick tour

Channel Logo Update File Upload via Livewire

Laravel Livewire Multiple Image Upload | Part-03 | Delete multiple images for a single product

File Upload | Laravel Livewire 3 Course for Beginners EP7

Laravel Livewire Multiple Image Upload | Part-02 | Edit multiple images for a single product