Laravel 6 Upload Image Sử Dụng Dropzone js

Tram Ho

Xin Chào các bạn, đến hẹn lại lên hôm này mình lại up thêm 1 bài chia sẽ mới đến các bạn mong là những chia sẽ của mình có thể giúp ích được 1 số bạn nào đó vô tình đang tìm hướng giải quyết cho vấn đề các bạn đang gặp phải..
Hôm nay mình muốn chia sẽ cùng mọi người cách để upload image trong laravel, nhưng có điều hơi đặc biệt 1 chút đó là chúng ta sẽ sử dụng Dropzonejs.
Thời gian qua trên các website, và nhất là các hệ thống thuộc người dùng Nhật bản, họ rất thích trải nghiệm kéo, thả image mỗi khi cần eidt dữ liệu, hơn là việc phải chọn lựa từng file ảnh có lẽ vì đây là trải nghiệm khá là mượt và tiện dụng nên được nhiều người dùng ưa thích.
Chính vì vậy hôm nay mình muốn cùng các bạn tạo ra 1 chức năng nhỏ về việc kéo, thả image trong laravel 6 ( các version khác đều được nhé) để tăng trải nghiệm người dùng nhé..Let’s Go.

  • Follow these few steps and upload image using dropzone in laravel:
  1. Install Laravel App
  2. Setup Database Credentials in .env
  3. Create Route
  4. Generate a Controller & Model
  5. Create a View File
  6. Start Development Server

Laravel Install

Điều đầu tiên tất nhiên sẽ là phải install laravel về local của chúng ta, các bạn copy đoạn code của mình ở bên dưới vào dùng cho tiện.

Setup Database Credentials in .env

Các bạn tạo trước 1 database trên phpmysql, và chuyển tới file .env và config các thông tin cần thiết.

Create Route

Tiếp theo các bạn vào routes/web.php và tạo 2 route như bên dưới.

Generate a Controller & Model

Bây giờ chúng ta cần khởi tạo thêm Model, Controller và migration để phúc vụ cho công việc nhé

với câu lệnh này đã đồng thời tạo ra cho chúng ta cả 3 file cần sử dụng, các bạn di chuyển vào database/migrations… và thếm đoạn code bên dưới vào file images_table mới được tạo thành.

Ở đây, như mình đã nói từ đầu là mình sẽ chia sẽ cách để upload file image bằng Dropzonejs vì vậy mà mình ko chú trọng việc thêm nhiều các columns khác nào.
Nếu các bạn muốn thêm thông tin gì tùy các bạn nhé.
Tiếp theo các bạn chạy lệnh để tạo table lên database.

Tiếp theo các bạn sữa lại trong file ImageController chúng ta vừa tạo.

Create Blade view

Tiếp theo là việc tạo file view để thực hiện việc upload image.
Các bạn di chuyển vào app/resources/views và tạo 1 file có tên là image.balde.php và thêm đoạn code bên dưới vào.

Các bạn có thể từ từ để tìm hiểu thêm về các thư viện nhé, ở đây là mình chạy test thôi nên mới kéo link CDN dùng luôn cho tiện, nếu các bạn dùng cho dự án thật thì nên dowload về và đưa vào project để tránh tình trạng lỗi file js trong đường truyền khi gọi CDN và có thể làm việc ngay cả khi môi trường xung quanh ko có internet.

Start Development Server

Cuối cùng là việc khởi chạy server và test kết quả.

Các bạn click vào khung và kéo ảnh từ local vào để test nhé.

Tổng Kết.

Vậy là xong nhé, mình vừa chai sẽ với các bạn cách để tạo và test về chức năng upload image trong laravel với việc sử dụng dropzonejs.
Như mình đã nói ở trên, các bạn khi tạo bảng có thể tạo thê các trường thông tin khác theo nhu cầu của công việc và chúng ta chỉ cần thêm các ô input trong form nhập liệu và sử lý lại 1 chút trong Controller là ok nhé.
Chúc các bạn thành công và hẹn gặp lại ở các bài chia sẽ sau nhé.

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo