Những dịch vụ upload file miễn phí mà bạn nên thử

Chắc hẳn anh em đã nghe nói nhiều về các dịch vụ đám mây phổ biến nhất như Amazon S3 và Google Cloud. Được quản lý bởi những gã khổng lồ công nghệ, họ có lẽ là những dịch vụ đáng tin cậy nhất mà anh em có thể tìm thấy. Nhưng chúng có một số nhược điểm, như cấu hình phức tạp và yêu cầu phải có thẻ tín dụng.

Nếu anh em chỉ muốn thiết lập miễn phí, nhanh chóng và dễ dàng thì mình có một số giải pháp thay thế ít được biết đến hơn dành cho anh em.

Dưới đây là một trong số những dịch vụ đó:

1. Firebase Storage

Firebase Storage là một phần của nền tảng Firebase của Google và cung cấp một cách dễ dàng để lưu trữ và quản lý tệp tin, bao gồm cả hình ảnh. Firebase Storage thích hợp cho các ứng dụng React với tích hợp dễ dàng thông qua Firebase SDK.

Để thiết lập Firebase để tải lên tệp trong ứng dụng React, bạn cần thực hiện một số bước cấu hình.

Bước 1: Tạo một dự án Firebase

1. Truy cập Firebase Console.
2. Bấm vào nút "Thêm dự án" hoặc chọn dự án Firebase hiện có của bạn.
3. Theo các bước để tạo dự án mới.

Bước 2: Kích hoạt Firebase Storage

1. Trong trang dự án của bạn trên Firebase Console, chọn "Storage" từ menu bên trái.
2. Nhấn nút "Bắt đầu sử dụng" để kích hoạt Firebase Storage cho dự án của bạn.

Bước 3: Cấu hình Firebase SDK trong ứng dụng React

1. Mở terminal và di chuyển đến thư mục dự án React của bạn.
2. Chạy lệnh sau để cài đặt Firebase CLI (Command Line Interface):

npm install -g firebase-tools

1. Chạy lệnh sau để đăng nhập vào tài khoản Firebase của bạn:

firebase login

1. Chạy lệnh sau để kết nối dự án React với dự án Firebase của bạn:

firebase init

• Chọn "Hosting" và "Storage" khi được hỏi về các tính năng bạn muốn sử dụng.
• Chọn dự án Firebase của bạn từ danh sách.
• Chọn thư mục công cộng trong dự án React của bạn (thường là build hoặc public).

1. Mở file src/firebase.js (hoặc tạo nếu chưa tồn tại) và cấu hình Firebase SDK:

import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
const storage = getStorage(app);

export { storage };

• Lấy thông tin cấu hình từ trang cấu hình dự án Firebase của bạn trên Firebase Console.

Bước 4: Tải lên tệp trong ứng dụng React

Giả sử bạn có một thành phần React làm nơi tải lên tệp. Dưới đây là một ví dụ đơn giản:

import React, { useState } from "react";
import { storage } from "./firebase";


const FileUploader = () => {
  const [file, setFile] = useState(null);


  const handleFileChange = (e) => {
    if (e.target.files[0]) {
      setFile(e.target.files[0]);
    }
  };

  const handleUpload = () => {
    if (file) {
      const storageRef = storage.ref();
      const fileRef = storageRef.child(file.name);


      fileRef.put(file).then((snapshot) => {
        console.log("File uploaded:", snapshot);
      });
    }
  };


  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={handleUpload}>Upload</button>
    </div>
  );
};

export default FileUploader;

2. Cloudinary

Cloudinary là một dịch vụ mạnh mẽ cho việc quản lý và tối ưu hóa hình ảnh. Nó cung cấp giao diện API dễ sử dụng và cho phép tải ảnh lên một cách linh hoạt. Cloudinary có một gói miễn phí với giới hạn lưu trữ và băng thông.

Để thiết lập Cloudinary để tải lên tệp trong ứng dụng React, bạn cần thực hiện một số bước cấu hình.

Bước 1: Tạo một tài khoản Cloudinary

• Truy cập trang đăng ký Cloudinary và tạo một tài khoản miễn phí.
• Sau khi đăng nhập vào tài khoản Cloudinary của bạn, điều hướng đến trang cài đặt API.
• Sao chép Cloud Name và Unsigned Upload Preset từ phần "Upload" của trang cài đặt API. Chúng ta sẽ sử dụng thông tin này trong phần tiếp theo.

Bước 2: Cài đặt thư viện cloudinary-react

• Mở terminal và di chuyển đến thư mục dự án React của bạn.
• Chạy lệnh sau để cài đặt thư viện cloudinary-react:

npm install cloudinary-react

Bước 3: Sử dụng Cloudinary trong ứng dụng React

• Mở file src/App.js hoặc bất kỳ file React nào bạn muốn sử dụng Cloudinary.
• Import và sử dụng thư viện cloudinary-react:

import React, { useState } from 'react';
import { Image, Transformation } from 'cloudinary-react';


const CloudinaryUploader = () => {
  const [file, setFile] = useState(null);


  const handleFileChange = (e) => {
    if (e.target.files[0]) {
      setFile(e.target.files[0]);
    }
  };


  const handleUpload = () => {
    if (file) {
      // Sử dụng Cloudinary API để tải lên tệp
      const cloudName = 'your_cloud_name';
      const unsignedUploadPreset = 'your_unsigned_upload_preset';
      const apiUrl = `https://api.cloudinary.com/v1_1/${cloudName}/image/upload`;


      const formData = new FormData();
      formData.append('file', file);
      formData.append('upload_preset', unsignedUploadPreset);


      fetch(apiUrl, {
        method: 'POST',
        body: formData,
      })
        .then((response) => response.json())
        .then((data) => {
          console.log('Image uploaded to Cloudinary:', data);
        })
        .catch((error) => {
          console.error('Error uploading image to Cloudinary:', error);
        });
    }
  };


  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={handleUpload}>Upload</button>


      {file && (
        <div>
          <h3>Preview:</h3>
          <Image cloudName={cloudName} publicId={`your_public_id/${file.name}`}>
            <Transformation width="300" height="300" crop="fill" />
          </Image>
        </div>
      )}
    </div>
  );
};

export default CloudinaryUploader;

• Đặt giá trị của cloudName và unsignedUploadPreset từ bước 1 vào đoạn mã trên.

Lưu ý rằng trong ví dụ trên, chúng tôi sử dụng Cloudinary API để tải lên tệp. Sau khi tệp được tải lên thành công, chúng tôi hiển thị một hình ảnh xem trước bằng cách sử dụng Image và Transformation từ thư viện cloudinary-react.

3. Imgur

Imgur cung cấp một API cho việc tải lên và quản lý ảnh. Nó có một phiên bản miễn phí với một số hạn chế về số lần truy cập và băng thông.

Để thiết lập Imgur để tải lên tệp trong ứng dụng React, bạn cần đăng ký một ứng dụng trên trang đăng ký ứng dụng Imgur. Dưới đây là hướng dẫn chi tiết:

Bước 1: Đăng ký ứng dụng Imgur

• Truy cập trang đăng ký ứng dụng Imgur.
• Điền các thông tin cần thiết như tên ứng dụng, mô tả, địa chỉ web chính thức (nếu có), và chọn "Authorization type" là "Anonymous usage without user authorization".
• Sau khi đăng ký, bạn sẽ nhận được Client ID. Lưu giữ thông tin này vì chúng ta sẽ sử dụng nó trong mã nguồn React của mình.

Bước 2: Sử dụng Imgur trong ứng dụng React

• Mở terminal và di chuyển đến thư mục dự án React của bạn.
• Chạy lệnh sau để cài đặt thư viện axios, một thư viện HTTP client sẽ được sử dụng để gửi yêu cầu API đến Imgur:

npm install axios

• Sử dụng Imgur trong ứng dụng React:

import React, { useState } from 'react';
import axios from 'axios';

const ImgurUploader = () => {
  const [file, setFile] = useState(null);

  const handleFileChange = (e) => {
    if (e.target.files[0]) {
      setFile(e.target.files[0]);
    }
  };

  const handleUpload = () => {
    if (file) {
      // Sử dụng Imgur API để tải lên tệp
      const clientId = 'your_client_id';

      const apiUrl = 'https://api.imgur.com/3/image';
      const formData = new FormData();
      formData.append('image', file);

      axios.post(apiUrl, formData, {
        headers: {
          Authorization: `Client-ID ${clientId}`,
        },
      })
        .then((response) => {
          console.log('Image uploaded to Imgur:', response.data.data.link);
        })
        .catch((error) => {
          console.error('Error uploading image to Imgur:', error);
        });
    }
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={handleUpload}>Upload</button>
    </div>
  );
};

export default ImgurUploader;

• Đặt giá trị của clientId từ bước 1 vào đoạn code trên.

Lưu ý rằng chúng tôi sử dụng thư viện axios để gửi yêu cầu API đến Imgur. Sau khi tệp được tải lên thành công, chúng tôi in URL của hình ảnh lên console. Hãy tinh chỉnh mã nguồn theo yêu cầu của bạn.