Share Upload tập tin từ các dịch vụ lưu trữ trực tuyến lên website với thư viện Uppy

filiallion

Administrator
Staff member
Administrator
Messages
560
Points
10
Language
Tiếng Việt
Trên nhiều website, tính năng upload tập tin thường được tích hợp khi đăng bài viết hay sản phẩm. Thông thường các bạn sẽ lập trình chức năng này để tải lên các tập tin được lưu trữ trên máy tính người dùng, ví dụ như các tập tin hình ảnh, văn bản,... nhưng có bao giờ các bạn tải các tập tin được lưu trữ trực tuyến trên các dịch vụ như Google Drive, Dropbox, Instagram, từ một website bất kỳ hay từ máy ảnh của máy tính hay điện thoại chưa? Với thư viện Uppy, các bạn sẽ dễ dàng thực hiện tính năng upload tập tin này.

Uppy là thư viện JavaScript mã nguồn mở, được phát triển bởi công ty Transloadit. Tới thời điểm hiện tại, thư viện Uppy đã được rất nhiều các bạn lập trình viên trên thế giới tin tưởng sử dụng bởi nó dễ sử dụng, linh hoạt, ổn định và độ tin cậy cao. Nếu các bạn đang có ý định phát triển một tính năng hay một ứng dụng thực hiện việc upload tập tin từ các dịch vụ lưu trữ trực tuyến khác thì có thể tham khảo thư viện Uppy.

Để sử dụng thư viện Uppy, các bạn tải nó tại địa chỉ https://github.com/transloadit/uppy và tích hợp vào website với dòng mã lệnh HTML như sau:
HTML:
<link href="path/to/uppy.min.css" rel="stylesheet">
<script src="path/to/uppy.min.js"></script>
Và cài đặt thư viện Uppy với nội dung mã lệnh JavaScript như sau:
JavaScript:
//Cài đặt thư viện
var uppy = Uppy.Core().use(Uppy.Dashboard, {
    inline: true,
    target: '#uppy-drag-drop-area'
}).use(Uppy.Tus, {
    endpoint: 'https://www.domain.com/upload'
});

//In kết quả khi hoàn tất
uppy.on('complete', (result) => {
    console.log('Đã hoàn tất tải lên các tập tin:', result.successful);
});
Các bạn tạo thêm một thành phần HTML trên website như sau:
HTML:
<div id="uppy-drag-drop-area"></div>
Các bạn có thể tìm hiểu thêm về thư viện Uppy tại địa chỉ https://uppy.io/docs.
 
Top