تحميل الملفات باستخدام Web API

-

تحميل الملفات باستخدام Web API 

اليوم الدرس بكون عن كيفية تحميل الملفات باستخدام API على السيرفرات

تمام حتي نحمل الملفات لازم نستخدم IFormFile class  على شكل parameter بنبعثو الى Web API’s action method. بحيث ان FormFile class بتمثل المطلوب إرساله عبر HttpRequest.

وحتي نفهم الموضوع بشكل افضل خلونا نعمل مثال عملي.

نرجع للمشروع الخاص في API الى كان اسمو MyFirstAPIProject ونتأكد من  المجلد wwwroot يكون موجود اذا ما كان موجود نضيف مجلد جديد بهذا الاسم، طريقة الإضافة سهلة جدا انقر يمين فوق المشروع وبعدها اختار ( شوف الصورة)


بعد الإضافة بكون شكل المشروع : 



هذا الملف مثل ما حكينا سابقا بحتوي على ملفات CSS ملفات JavaScript والصور واي ملفات داعمه للمشروع. تمام  خلونا نزيد مجلد باسم Images بهدف تحميل الصورة( الفكرة سهلة جدا بس انقر يمين فوق المجلد واخترا Add New Folder مثل ما عملنا من شوي).
وحتي نحفظ الملفات ، لازم نعرف ايش هي web hosting environment. وحتي نعمل هذا الكلام تعتبر Best practice في هذا المجال هي استخدام ميزة ASP.NET Core Dependency Injection لحقن IWebHostEnvironment التابعة ل Microsoft.AspNetCore.Hosting  في controller’s constructor. 
تمام بناء على هذا الكلام صار وقت نعدل ال API الخاص بإضافة كورس 
قبل تعديل AddCourses خلونا نعدل على controller’s constructor  .
أضف الكود التالي في controller’s constructor 

        private readonly STDDbContext _context; 
        private readonly IConfiguration configuration;
        private IWebHostEnvironment webHostEnvironment;
        CoursesModel coursModel = new CoursesModel();
        DataTable Dt = new DataTable();
        DbConnection connection;
      
        public CourseController(IConfiguration config, IWebHostEnvironment environment, CoursesModel coursesmodel)
        {
            configuration = config;
            coursModel = coursesmodel;
            webHostEnvironment = environment;
        }

ملاحظة : 
لاحظ كمان ان عملنا ASP.NET Core Dependency Injection ل CoursesModel 

وفي اي  Dependency Injection بنعمل لازم نتأكد من اضافة object  في ملف program.css وال object  في هذه الحالة هو
:CoursesModel 


والبتالي يجب اضافة الكود التالي الى ملف program.css 

builder.Services.AddSingleton< CoursesModel > ();
جميل لحد الان الأمور تمام. 

بعد هيك صار وقت نعدل على API ونزيد عليه الكود الخاص بتحميل الملفات، واكيد الك حرية الاختيار اما بتعمل function  خاص بتحمل الملف ، او نعمل التحميل في نفس API الخاص بإضافة كورس. هون بدنا نعمل function  مستقل والهدف ان ممكن هذا function يستخدم في أماكن ثانيه في المشروع، فا اكيد بدل ما نعيد كتابة الكود اكثر من مره.
طيب خلونا نعمل function  باسم UploadFile ونزيد الكود التالي : 

     [HttpPost("UploadFile")]
        public async Task<string> UploadFile([FromForm] IFormFile file)
        {
            string path = Path.Combine(webHostEnvironment.WebRootPath, "Images/" + file.FileName);
            using (var stream = new FileStream(path, FileMode.Create))
            {
                await file.CopyToAsync(stream);
            }
            return "https://localhost: 7081/Images/" + file.FileName;
        }

الكود ببساطة بستقبل parameter من نوع  [FromForm] IFormFileالي بيرسلو العميل عن طريق HttpRequest .
لاحظ الامر webHostEnvironment.WebRootPath هو المسؤول عن تحديد مكان التخزين وبرجع المسار الكامل ل wwwroot في المشروع وبعدها حددنا مجلد تخزين الصورة الي بكون  Images 
يعني رجعنا المسار الخاص ب wwwroot ومجلد التخزين واستخدمنا الامر Path.Combine للحصول على المسار الكامل، واضفنا اسم الملف المرسل عن طريق IFormFile
وبعدا استخدمنا الامر FileStream وارسلنا الملف مع المسار الكامل، والنوع FileMode.Create لإنشاء الملف 
وفي اخر ال function رجعنا المسار الكامل للملف في المشروع. الي ممكن نستخدمو ونخزنو في قاعدة البيانات.
يعني ممكن نستخدم هاذ API لما بدنا نخزن ملف ومن النتيجة الراجعة ممكن نستخدم الملف في أي مكان ثاني في المشروع.

وهيك بنكون عملنا API لتحميل الملفات.

طيب الان بننتقل لكيف ممكن نستدعي هذا ال API 

ننتقل الى المشروع StudentPortal ونحاول نستدعي هذا ال API ونشوف كيف بشتغل.
اول خطوة المطلوب نعمل function  جديد لاستدعاء هذا API ويكون الكود : 

public ViewResult AddFile() => View();
        [HttpPost]
        public async Task<IActionResult> AddFile(IFormFile file)
        {
            string apiResponse = "";
            using (var httpClient = new HttpClient())
            {
                var form = new MultipartFormDataContent();
                using (var fileStream = file.OpenReadStream())
                {
                    form.Add(new StreamContent(fileStream), "file", file.FileName);
                    using (var response = await httpClient.PostAsync("https://localhost:7081/api/Course/UploadFile", form))
                    {
                        response.EnsureSuccessStatusCode();
                        apiResponse = await response.Content.ReadAsStringAsync();
                    }
                }
            }
            return View((object)apiResponse);
        }

تماما مثل ما عملنا قبل في نوعين من هذا function الأول Get والثاني Post 
اسم هذا function هو AddFile، وارسلنا له parameter من النوع IFormFile. 
النوع IFormFile  مربوط مع input control  في View وهذا يعني أنه يمكن الحصول على الملف الذي تم تحميله من input control في View ، باستخدام ميزة ASP.NET Core Model Binding.
بعدها استخدمنا الامر var form = new MultipartFormDataContent() والسبب إضافة الملف المرسل الى form data وسبب الإضافة هنا لان Web API action بستخدم [FromForm] attribute ، تمام، بعدها استخدمنا OpenReadStream() method لقراة الملف ،

الكود التالي هو الكود الخاص باستدعاء API:
using (var response = await httpClient.PostAsync("https://localhost:7081/api/Course/UploadFile", form))
     {
         response.EnsureSuccessStatusCode();
         apiResponse = await response.Content.ReadAsStringAsync();
      }

ال API الى عملناها مثل ما حكينا بترجع string بتحتوي على الموقع الكامل للملف الذي تم تحميله. 
وأخيرًا، هذهstring  تم تحويلها الى object – (object)apiResponse وبتعرضها في View.
طيب تمام الان دور نعمل View من خلالها نحمل ملف عن طريق استدعاء API
مثل ما تعملنا حتى نعمل view ننقر يمين فوق Action ونختار Add New View وبنظيف الكود التالي: 
@model string
@{ Layout = "_Layout"; ViewBag.Title = "Add File";}
  
<h2>Add File</h2>
<form method="post" enctype="multipart/form-data">
    <input type="file" name="file" />
    <div class="text-center panel-body">
        <button type="submit" class="btn btn-sm btn-primary">Add</button>
    </div>
</form>
  
@if (Model != null)
{
    <h2>Uploaded File</h2>
    <img src="@Model" />
}
طيب صار دور نفهم الكود المكتوب : 

أولا لاحظ ان في form اضفنا attribute باسم – enctype="multipart/form-data"  تماما مثل ما استخدمنا في Action  الامر  var form = new MultipartFormDataContent();

في اول View استقبلنا متغير من نوع String الهدف عرض الملف الي بعثناه. والي برجع من Action  الي عملناه باسم AddFile، ذكرنا ان هاذ action برجع string هذهstring  بتم تحويلها الى object – (object)apiResponse وبعد بنستقبلها  في هذا  ,View وبتعرضها في img tag طبعا بعد ما نتأكد ان هذا Model يحتوي على بيانات.
اختبار التطبيق 
نجرب التطبيق ونشوف هل فعلا بشتغل معنا (يلا نجرب)


نجرب نحمل ملف ونشوف النتيجة:
اكيد ما تنسي تشغل مشروع API لان الشغل Local