Upload ảnh lên Cloudinary với JavaScript

Hình ảnh là một thứ gần như không thể thiếu với hầu hết các website hiện nay. Với những trang web có vài bức ảnh thì không sao, nhưng với những website hàng ngàn bức ảnh thì việc quản lý ảnh cũng là một vấn đề lớn. Lúc này, việc nghĩ đến lưu trữ ảnh trên cloud với dịch vụ bên thứ 3 là một phương án hay.

Có rất nhiều dịch vụ giúp chúng ta lưu trữ ảnh. Một trong số đó là Cloudinary, một nơi lưu trữ và cung cấp API vô cùng mạnh mẽ trong việc quản lý hình ảnh. Bài viết này hãy cùng mình tìm hiểu về Cloudinary và cách upload ảnh lên Couldinary với JavaScript nhé.

Let’s get started !

upload ảnh lên cloudinary với javascript

Cloudinary là gì ?

Cloudinary là một công ty công nghệ SaaS thành lập năm 2012, là một dịch vụ đám mây cung cấp giải pháp quản lý hình ảnh vô cùng hiệu quả bao gồm upload, download, lưu trữ, chỉnh sửa, tối ưu hình ảnh và CDN.

Cloudinary không chỉ lưu trữ mà nó cung cấp các APIs vô cùng tiện lợi cho việc tích hợp vào các hệ thống khác nhau từ website đến mobile.

Các tính năng hay ho của Cloudinary

Cloudinary cung cấp các tính năng vô cùng mạnh mẽ giúp chúng ta quản lý hình ảnh như:

  • Dễ dàng upload ảnh
  • Thay đổi kích thước ảnh, xoay, cắt.
  • Thay đổi định dạng ảnh thủ công hoặc tự động (tự động chọn định dạng phù hợp như .webp để tối ưu hình ảnh hơn).
  • Tối ưu hoá ảnh để giảm kích thước ảnh khi gửi.
  • Thêm hiệu ứng.
  • Thêm độ mờ, viền.
  • Cung cấp rất nhiều Add-on xịn xò khác.
  • Và nhiều tính năng khác nữa.

Về giá dịch vụ:

Khi bạn đăng ký tài khoản thì mặc định bạn sẽ được sử dụng gói miễn phí của Cloudinary là 25 credits (1 credits = 1000 chuyển đổi = 1 GB lưu trữ = 1 GB băng thông).

Với gói miễn phí thì cũng dư sức với những website nhỏ hoặc để demo, nếu bạn có nhu cầu lớn hơn thì có thể nâng cấp lên các gói khác như sau:

Cloudinary Planning

Upload ảnh lên Cloudinary với Javascript

Cloudinary cung cấp API và có rất nhiều các SDKs dành cho nhiều ngôn ngữ khác nhau như Python, JavaScript, PHP, Ruby, Java, .NET, Go, … Ở cả Frontend, Backend, Mobile.

Ở phía client chúng ta có nhiều SDKs hỗ trợ cho JavaScript thuần, ReactJS, Angular, Vue, Jquery. Ở ví dụ này, mình sẽ thử làm với ReactJS và sử dụng upload preset API nhé.

Bước 1: Tạo một upload preset bằng cách vào Settings -> Upload Presets -> Add upload preset. Đặt tên cho preset đó và nhớ chọn Signing mode là Unsigned. Sau đó bấm Save.

Tạo upload preset cloudinary
Tạo upload preset

Bước 2: Tạo một thẻ input để người dùng chọn ảnh và một nút để upload ảnh khi upload.

export default function App() {
  return (
    <div className="App">
      <input
        type="file"
        accept="image/png, image/gif, image/jpeg"
      />
      <button>Upload</button>
    </div>
  );
}

Bước 3: Upload ảnh lên với cloudinary API bằng Axios.

import "./styles.css";
import axios from "axios";
import { useState } from "react";

export default function App() {
  const [image, setImage] = useState("");

  const uploadImage = (e) => {
    // Tạo một form data chứa dữ liệu gửi lên
    const formData = new FormData();
    // Hình ảnh cần upload
    formData.append("file", image);
    // Tên preset vừa tạo ở bước 1
    formData.append("upload_preset", "new_preset");

    // Tải ảnh lên cloudinary
    // API: https://api.cloudinary.com/v1_1/{Cloudinary-Name}/image/upload
    axios
      .post("https://api.cloudinary.com/v1_1/dynonary/image/upload", formData)
      .then((response) => console.log(response))
      .catch((err) => console.error(err));
  };

  return (
    <div className="App">
      <input
        type="file"
        accept="image/png, image/gif, image/jpeg"
        onChange={(e) => setImage(e.target.files[0])}
      />
      <button onClick={uploadImage}>Upload</button>
    </div>
  );
}

Bước 4: Sau khi upload thành công ta sẽ dữ liệu trả về như sau:

upload cloudinary api 2

Chúng ta sẽ nhận được url và secure_url chính là đường dẫn đến bức hình vừa được upload. Bạn có thể kiểm tra lại trên cloudinary. Sau đó bạn có thể gửi url này về server lưu trữ. Hoặc thay đổi 1 tí đường dẫn để chỉnh sửa hình ảnh trước khi lưu xuống (xem chi tiết bên dưới nhé).

Ngoài cách này ra, bạn có thể dùng các SDKs có sẵn mà Cloudinary cung cấp. Tham khảo thêm tại đây: Cloudinary SDKs

Chỉnh sửa ảnh ngay trên URL (Image transformations)

Cloudinary cung cấp các API giúp bạn chuyển đổi hay chỉnh sửa hình ảnh của mình một cách dễ dàng. Điều này sẽ giúp bạn tiết kiệm dung lượng lưu trữ của mình bằng việc không tạo ra nhiều bản sao của hình. Ví dụ bạn có tấm ảnh gốc kích thước là 500×500 nhưng ảnh avatar của nó chỉ là 50×50.

Ví dụ bạn có một bức ảnh có URL như sau:

https://res.cloudinary.com/demo/image/upload/sample.jpg

Bạn muốn bức ảnh này có kích thức là 300×200, chế độ cắt là crop, thì bạn chỉ cần chỉnh sửa lại URL như thế này:

https://res.cloudinary.com/demo/image/upload/c_crop,h_200,w_300/sample.jpg

Rất đơn giản đúng không nào. Có 2 tham số khá hay là q_auto và f_auto sẽ giúp bạn tự động chọn chất lượng và định dạng file ảnh thích hợp cho từng trình duyệt.

Tuy nhiên, mỗi lần bạn thêm chuyển đổi nó sẽ tính vào 1 lượt transformation của bạn và thời gian phản hồi cũng sẽ chậm lại 1 tí. Nên cần cân nhắc trước khi dùng.

Tham khảo thêm các thuộc tính khác: Cloudinary – Image transformations

Tạm kết

Vừa rồi mình vừa giới thiệu đến bạn về cloudinary, một dịch vụ lưu trữ hình ảnh khá ổn áp hiện nay. Vẫn còn rất nhiều dịch vụ khác tốt hơn, nhưng nếu bạn chưa thử thì hãy cứ thử nó xem, biết đâu nó lại tối ưu hơn.

Cảm ơn mọi người đã đọc bài viết này ❤

Bạn có thể tham khảo thêm:

Để lại một bình luận nhé