NEWS

[C#] Hướng dẫn upload file, hình ảnh từ Winform lên server API ASP.NET Core

[C#] Hướng dẫn upload file, hình ảnh từ Winform lên server API ASP.NET Core
Đăng bởi: Thảo Meo - Lượt xem: 7589 14:12:59, 06/05/2022DATABASE   In bài viết

Xin chào các bạn, bài viết hôm nay mình sẻ tiếp tục hướng dẫn các bạn cách viết một API upload file hình ảnh sử dụng ASP.NET Core, và sử dụng Winform để chọn file upload lên Server.

[C#] Build API server upload file, image ASP.NET core

Bước 1: Tạo một solution để build API upload file

Để API Upload này chúng ta sẽ kiểm tra 2 loại sau:

  1. Chỉ cho phép upload những loại file do chúng ta chỉ định: jpg, png, gif,...
  2. Giới hạn dung lượng file upload (Ví dụ: Limit upload image >2 MB)

Và dĩ nhiên các bạn có thể bỏ qua 2 lựa chọn trên để cho phép upload tùy ý.

kết quả khi thực hiện API, thành công hay thất bại vào key status trên json trả về, chi tiết các bạn tham khảo các hình ảnh bên dưới.

Giao diện Test upload file qua API sử dụng Winform:

upload_file_api_with_winform

Full Code HomeController.cs (upload API):

[HttpPost]
public async Task<IActionResult> UploadFileAsync(List<IFormFile> file)
{
    const bool AllowLimitSize = true;
    const bool AllowLimitFileType = true;

    var limitFileSize = 2097152; // allow upload file less 2MB = 2097152
    var listFileError = new List<FileUploadInfo>();
    var responseData = new ResponseData();
    string result = "";

    if(file.Count <= 0)
    {
        responseData.status = "ERROR";
        responseData.message = $"Please, select file to upload.";                
        result = JsonConvert.SerializeObject(responseData);
        return Ok(result);
    }

    var listFileTypeAllow = "jpg|png|gif|xls|xlsx";   
   

    if (listFileError.Count > 0)
    {
        responseData.status = "ERROR";
        responseData.data = JsonConvert.SerializeObject(listFileError);
        responseData.message = $"File type upload only Allow Type: ({listFileTypeAllow}) {responseData.data}";
        result = JsonConvert.SerializeObject(responseData);
        return Ok(result);
    }


    // check list file less limit size
    if (AllowLimitSize)
    {
        foreach (var formFile in file)
        {
            if (formFile.Length > limitFileSize)
            {
                listFileError.Add(new FileUploadInfo()
                {
                    filename = formFile.FileName,
                    filesize = formFile.Length
                });
            }
        }
    }
   

    var listLinkUploaded = new List<string>();

    if (listFileError.Count > 0)
    {
        responseData.status = "ERROR";
        responseData.data = JsonConvert.SerializeObject(listFileError);
        responseData.message = $"File upload must less 2MB ({ responseData.data})";
        result = JsonConvert.SerializeObject(responseData);
        return Ok(result);
    }

   
    foreach (var formFile in file)
    {

        if (formFile.Length > 0)
        {

            var templateUrl = formFile.FileName;
            string filePath = Path.Combine($"{_webHost.WebRootPath}/uploads/", templateUrl);
            string fileName = Path.GetFileName(filePath);

            using (var stream = System.IO.File.Create(filePath))
            {
                await formFile.CopyToAsync(stream);
            }
            listLinkUploaded.Add($"{baseUrl}/uploads/{formFile.FileName}");
        }
    }

    responseData.status = "SUCCESS";
    responseData.data = JsonConvert.SerializeObject(listLinkUploaded);
    responseData.message = $"uploaded {file.Count} files successful.";
    result = JsonConvert.SerializeObject(responseData);

    return Ok(result);
}

Kết quả khi chạy API thuộc những loại file type không cho phép upload sẽ trả về json như hình dưới:

not_allow_file_type_upload

Kết quả API trả về nếu dung lượng file upload quá cho phép:

limit_file_type_upload

Và hình ảnh cuối cùng nếu chúng ta upload file thành công => trả về list đường dẫn tập tin

upload_file_successful

Source code Test upload File trên Winform sử dụng Webclient Upload File Async:

using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Net;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace TestUpload
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void btn_upload_Click(object sender, EventArgs e)
        {
            var API_UPLOAD = "http://localhost:45320/api/Home/UploadFile";

            using(var dlg = new OpenFileDialog())
            {
                dlg.Multiselect = true;
                if(dlg.ShowDialog() == DialogResult.OK)
                {
                    foreach (var filename in dlg.FileNames)
                    {
                        var client = new WebClient();
                        client.Headers.Add("Content-Type", "binary/octet-stream");                        
                        client.UploadFileAsync(new Uri(API_UPLOAD), filename);                      
                        client.UploadFileCompleted += Client_UploadFileCompleted;
                        client.UploadProgressChanged += Client_UploadProgressChanged;
                    }
                    
                }
            }
        }

        private void Client_UploadProgressChanged(object sender, UploadProgressChangedEventArgs e)
        {
            progressBar1.BeginInvoke(new Action(() => {
                var percent = e.BytesSent * 100 / e.TotalBytesToSend;              
                Console.WriteLine(percent + "");
                    progressBar1.Value = (int)percent;
                    label1.Text = percent.ToString() + "%";
                
                    
            }));
        }

        private void Client_UploadFileCompleted(object sender, UploadFileCompletedEventArgs e)
        {
            var data = Encoding.UTF8.GetString(e.Result);
            var responseData = JsonConvert.DeserializeObject<ResponseData>(data);
            if (responseData.status == "SUCCESS")
            {
                var link = JsonConvert.DeserializeObject<List<string>>( responseData.data);
                pictureBox1.LoadAsync(link.FirstOrDefault());

            }
            else
            {
                MessageBox.Show(responseData.message);
            }
            
        }

        public class ResponseData
        {
            public string status { get; set; }
            public string message { get; set; }
            public string data { get; set; }
        }


    }
}

Thanks for watching!

DOWNLOAD SOURCE

THÔNG TIN TÁC GIẢ

[C#] Hướng dẫn upload file, hình ảnh từ Winform lên server API ASP.NET Core
Đăng bởi: Thảo Meo - Lượt xem: 7589 14:12:59, 06/05/2022DATABASE   In bài viết

CÁC BÀI CÙNG CHỦ ĐỀ

Đọc tiếp