Sử dụng Github API Upload File Hình Ảnh với ASP.NET Core

Giới thiệu

Chắc hẳn các bạn chẳng còn xa lạ gì với Github rồi đúng không nào? 

Nhưng trong bài viết này mình sẽ không chỉ các bạn dùng Github đâu mà sẽ chỉ cho các bạn một trò hay hơn.

Cụ thể là dùng Github API để Upload và lưu trữ hình ảnh.

Vậy tại sao lại là Github mà không phải các Service khác như Cloudiary, Imgur, Pixel... Tất cả các bên kể trên đều rất nổi tiếng và không những còn support nhiều cái hay hơn cho việc lưu trữ hình ảnh.

Câu trả lời là chúng giới hạn dung lượng upload và đôi khi việc đăng ký còn khó khăn VD như Imgur thì các bạn cần có số điện thoại bên nước ngoài, Cloudiary thì lại chỉ giới 2GB hình ảnh với tài khoản Free.

Với những hạn chế trên thì Github cân hết tất cả. Các bạn lưu bao nhiêu cũng được không giời hạn dung lượng. Tốc độ thì khỏi phải bàn.

Oke vậy làm thể nào để sử dụng API của Github để upload hình ảnh thì mời các bạn cùng theo mình đi vào nghịch ngợm nhé !

Chuẩn bị

Trước tiên thì các bạn cần chuẩn bị những thứ sau:

• 1. Tài khoản Github. Đăng ký tại đây nhé các bạn https://github.com
• 2. .NET Core 6

Bạn nào dùng ngôn ngữ khác thì follow theo code của mình vẫn có thể làm được nhé

Vào phần chính thôi nào

Tạo Github Access Token

Để có thể sử dụng được Github API thì cần có Token của Github. Các bạn vào như sau:

B1: Truy cập vào https://github.com/settings/tokens để tạo ra một token mới

Chọn Personal access tokens -> Tokens (classic) -> Generate new token -> Generate new token (classic)

B2: Điền thông tin Token

• - Note: Điền tên token mà các bạn muốn
• - Expiration: Chọn No Expiration
• - Select scopes: Các bạn chọn full access cho repo nhé

Xong rồi kéo xuống và nhận Generate token

B3: Copy Token vừa tạo được ra một bên để xíu sử dụng :D

Tạo Git Repo

Tiếp theo chúng ta sẽ tạo ra một Repo mới để lưu file ảnh vào đó.

B1: Các bạn truy cập vào link https://github.com/new hoặc click vào button new tại trang chủ của các bạn như hình dưới

B2: Điền thông tin của Repo

Các bạn để Public để bên ngoài có thể truy xuất đc nhé. Hoặc Private nếu không muốn người khác thấy.

Xong rồi nhấn Create new repository

Code Upload hình ảnh

Ở đây hình sử dụng ASP/NET Core nhé các bạn. 

Các bạn tạo ra một ứng dụng ASP.NET Core Web Application mới

Config file appsettings.json

Trong file appsettings.json thêm đoạn code như sau:

  "GithubAPI": {
    "AccessToken": "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",
    "BaseUrl": "https://api.github.com/repos/huynxtb/CodeMegaImage/contents",
    "Branch": "main"
  },

Trong đó:

• - AccessToken: là phần token đã tạo được ở phần Tạo Github Access Token
• - BaseUrl: là api của repo của các bạn. Các bạn xem tiếp bên dưới để lấy BaseUrl nhé
• - Branch: mặc định là main. Các bạn muốn change qua brach khác cũng được nhé. Tùy các bạn :v

Bên trên là BaseUrl repo của mình. Các bạn sửa lại thành như sau:

Truy cập vào repo đã tạo sau đó trên thanh URL của Browser các bạn sẽ thấy tên người dùng của các bạn cùng với repo name

Ở đây tên người dùng của mình là huynxtb và repo name là CodeMegaImage

Phần Code chính

Dưới đây là phần code mà mình sử dụng để Upload hình ảnh lên Github

public async Task UploadImageAsync(IFormFile file, string folderSource)
    {
        var fileName = ToFileName(file);
        var commit = DateTime.Now.ToString("MM/dd/yyyy hh:mm tt").Replace("/", "_");
        
        await using MemoryStream ms = new();
        await file.CopyToAsync(ms);

        var fileBytes = ms.ToArray();
        
        RestRequest request = new() { Method = Method.Put };

        request.AddHeader("Authorization", "Token " + _configuration["GithubAPI:AccessToken"]);
        request.AddHeader("accept", "application/vnd.github.v3+json");
        request.AddJsonBody(
            new
            {
                message = commit,
                content = Convert.ToBase64String(fileBytes),
                branch = _configuration["GithubAPI:Branch"]
            });

        var client = new RestClient($"{_configuration["GithubAPI:BaseUrl"]}/{folderSource}/{fileName}");

        var response = await client.ExecuteAsync(request);
        var jsonGit = response.Content?.Replace("download_url", "downloadUrl");

        if (jsonGit == null)
        {
            return new GitResponseModel { Success = false };
        }

        var resGit = JsonConvert.DeserializeObject(jsonGit);
        
        if (resGit == null)
        {
            return new GitResponseModel { Success = false };
        }

        resGit.Success = true;

        return resGit;
    }

Phần code khá là đơn giản. Mình sử dụng RestSharp để thực hiện call tới API của Github để upload file với method là PUT.

#Note: Parameter string folderSource các bạn nếu chưa có folder trên Github thì nó sẽ tự tạo ra nhé. Còn nếu có rồi thì nó sẽ ghi tiếp vào folder cũ chứ không ghi đè

Do chưa bên Github chưa hỗ trợ Upload thằng cái file qua API (hoặc là do mình non mình chưa biết cách gửi hehe) nên mình có convert file ra Base64 trước khi push lên bằng cách dùng hàm Convert.ToBase64String(fileBytes).

Sau khi thực hiện push lên thì mình trả về model mà mình đã tạo có tên là GitResponseModel (như bên dưới) để chứa data Json mà bên Github trả về

public class GitResponseModel
{
    [JsonPropertyName("content")] public ContentResponse? Content { get; set; }
    public bool Success { get; set; }
}

public class ContentResponse
{
    [JsonPropertyName("name")] public string? Name { get; set; }

    [JsonPropertyName("path")] public string? Path { get; set; }

    [JsonPropertyName("sha")] public string? Sha { get; set; }

    [JsonPropertyName("size")] public int Size { get; set; }

    [JsonPropertyName("url")] public string? Url { get; set; }

    [JsonPropertyName("downloadUrl")] public string? DownloadUrl { get; set; }

    [JsonPropertyName("type")] public string? Type { get; set; }
}

Controller

[HttpPost]
public async Task Upload(IFormFile imageFile)
{
    var folderName = "User";

    var res = await _githubApiService.UploadImageAsync(imageFile, folderName);
        
    return RedirectToAction("ResponseData", new { fileURL = res.Content?.DownloadUrl });
}
    
[HttpGet]
public IActionResult ResponseData(string fileURL)
{
    return Json(new
    {
        FileURL = fileURL
    });
}

Phần Controller mình xử lý đơn giản như trên. Khi thực hiện tại Action Upload xong mình sẽ cho Redirect tới ResponseData kèm theo đó là Link của hình ảnh mà Github trả về

Giao diện App

<div class="text-center">
    <h2 class="display-4">Code Mega Upload Image With Github API</h2>
</div>

<div class="form-control">
    <form enctype="multipart/form-data" method="POST" action="/File/Upload">
        
        <label for="file">Choose Image:</label><br><br>
        
        <input type="file" id="file" name="imageFile"><br><br>

        <input type="submit" value="Submit">
        
    </form>
</div>

Phần UI thì đơn giản thôi. Mình tạo ra cái Form xong submit về là xong. Hơi xấu tí nhưng chạy ngon

Tận hưởng thành quả

Sau khi code chăm chỉ thì đây là kết quả của mình:

Quả response quá uy tín luôn 😎

Tạm kết

Trên đây là toàn bộ bài viết chia sẻ của mình về cách Upload hình ảnh lên Github bằng Github API. Nếu các bạn thấy hay thì chia sẻ giúp mình nhé !

Cám ơn các bạn đã theo dõi. 

Các bạn xem các tải code ở bên dưới nhé ! Hẹn các bạn ở các bài viết tiếp theo. PP