GitLab

กำหนดการตั้งค่าสำหรับไฟล์อัพโหลดไฟล์เซอร์วิส :

appsettings.json

....
"Storage": "/code", //ตำแหน่ง Folder Storage สำหรับบันทึกข้อมูล หากไม่กำหนด UploadFileService จะจัดการให้เอง
    "Uploads": {
        "totalFileSize": 20971520, //รองรับขนาดไฟล์ทุกไฟล์รวมกันไม่เกิน 20 MB มีหน่วยวัดเป็น bytes
        "fileSize": 10485760, //รองรับขนาดไฟล์ไม่เกินไฟล์ละ 10 MB มีหน่วยวัดเป็น bytes
        "resize.sm": "150x150", //กำหนดปรับขนาดรุปภาพเล็ก (Small) width * Height 
        "resize.md": "300x300", //กำหนดปรับขนาดรุปภาพกลาง (Medium) width * Height 
        "resize.lg": "600x500" //กำหนดปรับขนาดรุปภาพใหญ่ (Large) width * Height 
},

หมายเหตุ : ในการพัฒนา (Devlopment Mode) ให้กำหนด Storage เป็นค่าว่างดังตัวอย่างด้านล่าง

....
"Storage": "",
....

เนื่องจากไม่กำหนดค่า เมื่อเราใช้เมท็อด getStoragePath ที่ UploadFileService เตรียมไว้ให้ จะสามารถชี้ไปหา Folder โปรเจกต์ได้ถูกต้อง คือ {base_app}/Storage/app

ทริคเล็กน้อยสำหรับการกำหนดค่า Storage ใน Appsettings.json

.....
"Storage" : "",
.....

ผลลัพธ์ :

Local - Development Mode = {base_app}/Storage/app
Server - Production Mode = {base_app}/bin/[Debug|Release]/dotnetcore{version}/Storage/app หมายเหตุ : บน Production Mode ระบบอาจจะสร้าง Path เริ่มเติมจาก หลัง Folder /dotnetcore{version}/*** เป็นต้นไปก็ได้ ขึ้นอยู่กับการนำ File Publish ไปวางที่เครื่อง Server และขึ้นอยู่กับ ระบบปฏิบัติการด้วย

.....
"Storage" : "C:/temp",
.....

Local - Development Mode = C:/temp/Storage/app
Server - Production Mode = C:/temp/Storage/app หมายเหตุ : การกำหนดตั้งค่า Storage ไม่จำเป็นต้องใส่ Storage/app ด้วยก็ได้เพราะว่า ระบบจะตรวจสอบและเพิ่มค่า ดังกล่าวเข้าไปให้เอง

สำหรับระบบปฏิบัติการ Linux

.....
"Storage" : "/Code",
.....

การกำหนด Path บนระบบปฏิบัติการ Linux นั้นจำเป็นต้องมี / ด้านหน้าสุดด้วย และตามด้วยตำแหน่ง Folder ตามที่กำหนด User Permission ไว้หรือ อีกนัยคือ ระบุตำแหน่ง Folder ที่สามารถมองเห็นได้ หรือมีอยู่จริง

รูปแบบการใช้งานอัพโหลดไฟล์ ขั้นตอนที่ 1

ในการเรียกใช้งาน เราจำเป็นต้องมีการ Injection IUploadFileService เข้าไปยัง Interface ที่ต้องการเรียกใช้งานก่อน ทุกครั้ง ดังตัวอย่าง

ตัวอย่างการเรียกใช้งาน
public class InventoryService : IInventoryService
{
    ....
    private readonly IUploadFileService _uploadFileService;

    public InventoryService(IUploadFileService uploadFileService)
    {
        _uploadFileService = uploadFileService;
    }
    ....
}

รูปแบบการใช้งานอัพโหลดไฟล์ ขั้นตอนที่ 2

อัพโหลดไฟล์และกำหนดตำแหน่ง และชื่อไฟล์สำหรับบันทึก

public ResponseModel testUploadFileService(IFormFileCollection uploads)
{
    var path = _uploadFileService.getStoragePath("Test");
    var files = _uploadFileService.makeCollection(uploads);

    int index = 1;
    foreach(var file in files)
    {
        //genarate filename
        string fileName = _uploadFileService.combine(path,$"file_{index}_{file.FileName}");

        file.save(fileName);
        index++;
    }
    
    ....
    return responseModel;
}

อธิบายรหัสคำสั่ง :

var path ได้ผลลัพธ์คือ {base_app}/Storage/app/Test
var files เป็นการนำค่าอัพโหลดไฟล์จากตัวแปร uploads มาสร้าง อ็อปเจกต์สำหรับใช้งานอัพโหลดไฟล์เซอร์วิส
string fileName = {base_app}/Storage/app/Test/file_{index}_{origin_name}
file.save = บันทึกแฟ้มไปยังตำแหน่งตามตัวแปร fileName

รูปแบบการเรียกแสดงผลแฟ้มที่เคยอัพโหลดไปแล้ว

public ResponseModel testGetFileUploadService(string path)
{
    var files = _uploadFileService.store(path);
    
    responseModel.dataResponse = files; 
    .....

    return responseModel;
}

หมายเหตุ :

การเรียกใช้งาน เมท็อด store หากระบุ path ไม่ชี้ถึงแฟ้มโดยตรง ผลลัพธ์ที่ได้คือ ตัวแปร files จะเก็บรายการทั้งหมดของแฟ้มภายในตำแหน่ง path นั้น

เทคนิคการปรับขนาดรูปภาพ : วิธีที่ 1

public ResponseModel testUploadFileService(IFormFileCollection uploads)
{
    List<dynamic> responseFiles = new List<dynamic>();
    var path = _uploadFileService.getStoragePath("Test");
    var files = _uploadFileService.makeCollection(uploads);

    int index = 1;
    foreach(var file in files)
    {
        //genarate filename
        string fileName = _uploadFileService.combine(path,$"file_{index}_{file.FileName}");

        var f = file.resize("sm")
          .save(fileName);

        responseFiles.Add(f);

        index++;
    }

    responseModel.dataResponse = responseFiles;
    ....

    return responseModel;
}

หมายเหตุ :

เราสามารถระบุขนาดเป็นสตริงซ์ได้ดังนี้

resize("sm")
resize("md")
resize("lg")

โดยขนาดของแต่ละไซต์จะถูกกำหนดอยู่ภายใน appsettings.json อีกทีหนึ่ง

เทคนิคการปรับขนาดรูปภาพ : วิธีที่ 2

public ResponseModel testUploadFileService(IFormFileCollection uploads)
{
    List<dynamic> responseFiles = new List<dynamic>();
    var path = _uploadFileService.getStoragePath("Test");
    var files = _uploadFileService.makeCollection(uploads);

    int index = 1;
    foreach(var file in files)
    {
        //genarate filename
        string fileName = _uploadFileService.combine(path,$"file_{index}_{file.FileName}");

        var f = file.resize(1500,1200)
          .save(fileName);

        responseFiles.Add(f);

        index++;
    }

    responseModel.dataResponse = responseFiles;
    ....

    return responseModel;
}

หมายเหตุ :

เราสามารถกำหนดความกว้าง / สูงของรูปภาพได้เอง โดยพารามิเตอร์ที่กำหนดดังนี้ resize(width,height)

เทคนิคสร้างอ็อปเจกต์อัพโหลดไฟล์เซอร์วิส 1 รายการ

public ResponseModel testUploadFileService(IFormFileCollection uploads)
{
    List<dynamic> responseFiles = new List<dynamic>();
    var path = _uploadFileService.getStoragePath("Test");
    var file = _uploadFileService.make(uploads);
   
    ....

    return responseModel;
}

หมายเหตุ :

file จะมีค่าเป็น อ็อปเจกต์ IUploadFileProvider ซึ่งต่างจากวิธีใช้ makeCollection จะได้ List

เทคนิคการเรียก URL Address ของไฟล์

การเรียก URL Address ผ่าน IUploadFileService

public ResponseModel testGetFileUploadService(string path)
{
    var file = _uploadFileService.store(path)
           .FirstOrDefault();
    
    var url_1 = _uploadFileService.link(path);  
    var url_2 = file.getLink();

    responseModel.dataResponse = file; 
    .....

    return responseModel;
}

หมายเหตุ :

string path = {base_app}/Storage/app/Test/file_1_imagename.jpg ตัวแปร url_1 จะถูกสร้าง Link URL Address = http://localhost:44703/Upload/Test/file_1_imagename.jpg
ตัวแปร url_2 จะถูกสร้าง Link URL Address = http://localhost:44703/Upload/Test/file_1_imagename.jpg
ตัวแปร url_2 เรียก URL Address โดยใช้คุณสมบัติของ อ็อปเจกต์ IUploadFileProvider ซึ่งภายในอ็อปเจต์นี้จะมี Attributes , Methods ต่างๆ ให้บริการ เพื่อเข้าถึง ตำแหน่งแฟ้มได้อยู่แล้ว

เทคนิคการใช้งาน Attributes เพื่อกรองไฟล์ชื่อซ้ำ

การกรองชื่อไฟล์อัพโหลดซ้ำสามารถทำได้ 2 วิธี ดังนี้

การกรองระดับ Controller

[UploadFileDuplicate(bool: AllowDuplicate,string: ErrorMessage)]
public class TestUploadFile : ControllerBase
{
    ....
}

การกรองระดับ Action

public class TestUploadFile : ControllerBase
{
    ....
    [UploadFileDuplicate]
    public IActionResult Uploaded(IFormFileCollection uploads)
    {
        .....
    }
}

ความแตกต่างระหว่าง 2 วิธีการดังกล่าว คือ

การกรองในระดับ Controller จะส่งผลให้ทุก Action ได้รับค่าแอตทริบิวต์ที่กำหนดไปด้วย ส่วนการกรองในระดับ Action จะได้รับผลเฉพาะ Action ที่มีการกำหนดค่าแอตทริบิวต์

หมายเหตุ:

AllowDuplicate คือ ยอมรับให้ชื่อซ้ำได้ = true, ไม่ให้ชื่อซ้ำ = false
ErrorMessage คือ การกำหนดข้อความ เมื่อเกิดการอัพโหลดไฟล์ชื่อซ้ำเข้ามาที่เซิร์ฟเวอร์ (กรอก หรือไม่กรอกก็ได้) หากไม่กรอกจะมีค่า Default มาให้
หากไม่มีการกำหนด Attributes ใดๆ ค่า AllowDuplicate เท่ากับ false และ ErrorMessage เท่ากับ Sorry, Files uploaded have name file duplicate.

เทคนิคการใช้งาน Attributes เพื่อกรองนามสกุลไฟล์

การกรองนามสกุลไฟล์ ระบบจะสามารถใส่ได้ 2 รูปแบบ

วิธีที่หนึ่งกำหนดค่า AllowExtension และ ErrorMessage

[UploadFileExtension(string: AllowExtension,string: ErrorMessage)]
public class TestUploadFile : ControllerBase
{
    ....
}

วิธีที่สองกำหนดค่า DocumentTypes และ ErrorMessage

[UploadFileExtension(enum: DocumentTypes,string: ErrorMessage)]
public class TestUploadFile : ControllerBase
{
    ....
}

การประยุกต์ใช้งานทำได้ดังนี้

กำหนดให้สามารถอัพโหลดได้ทุกนามสกุลไฟล์ จะเซ็ต AllowExtension = "*"

[UploadFileExtension("*")]
public class TestUploadFile : ControllerBase
{
    ....
}

กำหนดให้สามารถอัพโหลดได้เฉพาะนามสกุลไฟล์ที่กำหนด

[UploadFileExtension(".docx,.png,     .gif  , .pdf")]
public class TestUploadFile : ControllerBase
{
    ....
}

กำหนดให้สามารถอัพโหลดได้ทั้งหมดด้วย DocumentTypes ที่เป็นประเภท Enum

[UploadFileExtension(DocumentTypes.All)]
public class TestUploadFile : ControllerBase
{
    ....
}

กำหนดให้สามารถอัพโหลดได้ทั้งหมดด้วย DocumentTypes ที่เป็นประเภท Enum

[UploadFileExtension(DocumentTypes.Document, ErrorMessage: "รองรับการอัพโหลดไฟล์เฉพาะเอกสารเท่านั้น !!")]
public class TestUploadFile : ControllerBase
{
    ....
}

ประเภทของ DocumentTypes Enum

All = จากทั้งหมดทุกประเภท Document Types อื่นๆ รวมกัน
Document = .doc|.dot|.docx|.dotx|.docm|.dotm|.xls|.xlt|.xla|.xlsx|.xlsm|.xltm|.xlsb|.ppt|.pot|.pps|.ppa|.pptx|.potx|.ppsx|.ppam|.pptm|.potm|.ppsm.odp|.ods|.odt|.pdf|.swf|.xml
Image = .bmp|.jpeg|.jpg|.png|.gif|.emf|.exif|.icon|.memorybmp|.tiff|.wmf
Archive = .rar|.zip|.7z
Audio = .aac|.avi|.mid|.midi|.oga|.wav|.weba|.3gp|.3g2
Video = .avi|.mpeg|.ogv|.webm|.3gp|.3g2|.flv|.3gp2|.3gpp|.mp4|.mov|.wmv

เทคนิคการใช้งาน Attributes เพื่อกรองขนาดไฟล์อัพโหลด

IUploadFileService ได้เตรียมแอตทริบิวต์ สำหรับกรองขนาดไฟล์ที่ไคลแอนต์อัพโหลดเข้ามา 2 ชั้น ดังนี้

ชั้นแรก คือ การกรองขนาดไฟล์ทั้งหมด โดยนำทุกไฟล์ที่ถูกอัพโหลดเข้ามาในการร้องขอครั้งนั้นมารวมกัน ว่าเกินขนาดที่กำหนดหรือไม่ หากเกินจะถูกบล็อกไม่ให้เข้าถึง Controller - Action
ชั้นสอง คือ การกรองขนาดของแต่ละไฟล์ มีขนาดใหญ่เกินกว่าที่กำหนดไว้หรือไม่ หากเกินจะถูกบล็อกเหมือนชั้นแรก

ตัวอย่าง

[UploadFileSize(long: TotalFileSize, long: FileSize)]
public class TestUploadFile : ControllerBase
{
    ....
}

วิธีการใช้แบบที่ 1 = กำหนดเฉพาะชั้นแรก

[UploadFileSize(1048576)] // 1MB สูตร = 1024*1024 = 1 MB 
public class TestUploadFile : ControllerBase
{
    ....
}

วิธีการใช้แบบที่ 2 = กำหนดเฉพาะชั้นสอง

[UploadFileSize(FileSize: 1048576)]
public class TestUploadFile : ControllerBase
{
    ....
}

วิธีการใช้แบบที่ 3 = กำหนดเต็มรูปแบบ

[UploadFileSize(TotalFileSize: 5242880, FileSize: 1048576)]
public class TestUploadFile : ControllerBase
{
    ....
}

หมายเหตุ :

หากไม่มีการกำหนดค่าระบบจะไปหาค่าจากไฟล์ appsettings.json
ค่าเริ่มต้นของข้อความเมื่อเกิดข้อผิดพลาดในชั้นแรก คือ Allowed upload many file, which not over 5.24 MB size.
ค่าเริ่มต้นของข้อความเมื่อเกิดข้อผิดพลาดในชั้นสอง คือ Not allowed file size over 1.04 MB size.

ตัวอย่าง : ค่าเริ่มต้นของการกำหนดกรองขนาดไฟล์ ชั้นแรก - ชั้นสอง

ชั้นแรกจะกำหนดไว้ที่ไม่เกิน 20 MB
ชั้นสองจะกำหนดไว้ที่ไม่เกิน 10 MB

Appsettings.json

  ....
  "Uploads": {
    "totalFileSize": 20971520, //File size exceeds 20 MB.
    "fileSize": 10485760, //Not allowed file size over 10 MB.
    ....
  },

เทคนิคการเรียกไฟล์ตามประเภท

เราสามารถจำแนกประเภทกลุ่มของแฟ้มข้อมูลได้ โดยอ็อปเจกต์ IUploadFileProvider จะมีแอตทริบิวต์ที่จำแนกประเภทกลุ่มแฟ้มให้เราเรียกใช้ได้แล้ว โดยค่าจะเป็นตัวแปรประเภท Enum จาก DocumentTypes.cs

public ResponseModel testUploadFileService(IFormFileCollection uploads)
{
    List<dynamic> responseFiles = new List<dynamic>();
    var path = _uploadFileService.getStoragePath("Test");
    var files = _uploadFileService.makeCollection(uploads);

    // เรียกเฉพาะไฟล์ประเภท Document เท่านั้น
    var documents = files.Where(w => w.documentType == (int)DocumentTypes.Document);

    int index = 1;
    foreach(var doc in documents)
    {
        //genarate filename
        string fileName = _uploadFileService.combine(path , "Documents","2018","12",$"file_{index}_{doc.FileName}");

        var f = doc.Save(fileName);

        responseFiles.Add(f);

        index++;
    }

    responseModel.dataResponse = responseFiles;
    ....

    return responseModel;
}

ตัวอย่างอ็อปเจกต์ IUploadFileProvider

!