Hur gör man upload på filer i en AngularJS – ASP.NET MVC-applikation?

Hur gör man upload på filer i en AngularJS – ASP.NET MVC-applikation?

Inledning

[Källa]

[GitHub repo]

Hur laddar man upp filer i en AngularJS – ASP.NET MVC-applikation?

Steg

  1. Skapa tabell i databas

    Öppna databas > Högerklicka på Table > Add New Table > Add Columns > Save > Ange tabellnamn [i denna laboration används namnet Files]

    CREATE TABLE [dbo].[Files]
    (
        [FileId] INT NOT NULL PRIMARY KEY, 
        [FileName] VARCHAR(100) NOT NULL, 
        [Description] VARCHAR(300) NULL, 
        [FilePath] VARCHAR(300) NOT NULL, 
        [FileSize] INT NOT NULL
    )
    Table Files
  2. Uppdatera dataentitetsmodellen

    Gå till Solution Explorer > Öppna dataentitetsmodellen [här ContactsModel.edmx] > Högerklicka på en tom yta för kontextmenyn > Update Model From Database… > Ett popupfönster visas (Entity Data Model Wizard) > Välj Tables > Finish

    Kontextmenyn
    Entity Data Model Wizard
  3. Skapa en mapp där vi kan lägga upladdade filer

    Gå till Solution Explorer > Högerklicka på projektet > Add > New Folder > Ange ett namn på mappen som ska skapas [här: UploadedFiles]

    UploadedFiles
  4. Skapa en ny Action som som tar emot och lagrar filerna som vi vill ladda upp

    Metoden SaveFiles

    [HttpPost]
    public JsonResult SaveFiles(string description)
    {
        string Message, fileName, actualFileName;
        Message = fileName = actualFileName = string.Empty;
        bool flag = false;
        if (Request.Files != null)
        {
            var file = Request.Files[0];
            actualFileName = file.FileName;
            fileName = Guid.NewGuid() + Path.GetExtension(file.FileName);
            int size = file.ContentLength;
     
            try
            {
                file.SaveAs(Path.Combine(Server.MapPath("~/UploadedFiles"), fileName));
     
                UploadedFile f = new UploadedFile
                {
                    FileName = actualFileName,
                    FilePath = fileName,
                    Description = description,
                    FileSize = size
                };
                using (MyDatabaseEntities dc = new MyDatabaseEntities())
                {
                    dc.UploadedFiles.Add(f);
                    dc.SaveChanges();
                    Message = "File uploaded successfully";
                    flag = true;
                }
            }
            catch (Exception)
            {
                Message = "File upload failed! Please try again";
            }
     
        }
        return new JsonResult { Data = new { Message = Message, Status = flag } };
    }
  5. Lägg till en ny .js-fil med logik för att hantera uppladdningen på klientsidan (Controller + Factory)

    angular.module('MyApp') // extending angular module from first part
    .controller('Part8Controller', function ($scope, FileUploadService) {
        // Variables
        $scope.Message = "";
        $scope.FileInvalidMessage = "";
        $scope.SelectedFileForUpload = null;
        $scope.FileDescription = "";
        $scope.IsFormSubmitted = false;
        $scope.IsFileValid = false;
        $scope.IsFormValid = false;
        //validera formuläret
        $scope.$watch("f1.$valid", function (isValid) {
            $scope.IsFormValid = isValid;
        });
        // Det är nödvändigt att vi lägger till dessa manuella kontroller eftersom File Control inte stöds av AngularJS
        //filvalidering
        $scope.ChechFileValid = function (file) {
            var isValid = false;
            if ($scope.SelectedFileForUpload != null) {
                if ((file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif') && file.size <= (512 * 1024)) {
                    $scope.FileInvalidMessage = "";
                    isValid = true;
                }
                else {
                    $scope.FileInvalidMessage = "Den valda filen är inte godkänd. (endast filer av typen png, jpeg resp gif och 512 kb storlek är tillåtna)";
                }
            }
            else {
                $scope.FileInvalidMessage = "En bild krävs!";
            }
            $scope.IsFileValid = isValid;
        };
        //File Select event 
        $scope.selectFileforUpload = function (file) {
            $scope.SelectedFileForUpload = file[0];
        }
        //SaveFile() (den här metoden anropas när vi klickar på submit i formuläret)
        $scope.SaveFile = function () {
            $scope.IsFormSubmitted = true;
            $scope.Message = "";
            $scope.ChechFileValid($scope.SelectedFileForUpload);
            if ($scope.IsFormValid && $scope.IsFileValid) {
                FileUploadService.UploadFile($scope.SelectedFileForUpload, $scope.FileDescription).then(function (d) {
                    alert(d.Message);
                    ClearForm();
                }, function (e) {
                    alert(e);
                });
            }
            else {
                $scope.Message = "Samtliga fält måste vara ifyllda.";
            }
        };
        //Rensa formuläret
        function ClearForm() {
            $scope.FileDescription = "";
            //Det finns inget inbyggt stöd i AngularJS för filuppladdningskontrollen så vi måste göra på det här viset
            angular.forEach(angular.element("input[type='file']"), function (inputElem) {
                angular.element(inputElem).val(null);
            });
            $scope.f1.$setPristine();
            $scope.IsFormSubmitted = false;
        }
    })
    .factory('FileUploadService', function ($http, $q) {
        var fac = {};
        fac.UploadFile = function (file, description) {
            var formData = new FormData();
            formData.append("file", file);
            //vi kan skicka mer information till servern genom att använda append         
            formData.append("description", description);
            var defer = $q.defer();
            $http.post("/Data/SaveFiles", formData,
                {
                    withCredentials: true,
                    headers: { 'Content-Type': undefined },
                    transformRequest: angular.identity
                })
            .success(function (d) {
                defer.resolve(d);
            })
            .error(function () {
                defer.reject("File Upload Failed!");
            });
            return defer.promise;
        }
        return fac;
    });
    Part8Controller.js
  6. Lägg till en ny Action i backend Controller som renderar View

    public ActionResult Part8() // Ladda upp filer och data
    {
        return View();
    }
  7. Lägg till View som visar filuppladdningskontrollen

    Skapa filen Views\Home\Part8.cshtml
    @{
        ViewBag.Title = "Part8";
    }
    <h2>Part8 - Ladda upp filer med AngularJS</h2>
    
    {{Message}}
    <table> <tr> <td>Select File : </td> <td> <input type="file" name="file" accept="image/*" onchange="angular.element(this).scope().selectFileforUpload(this.files)" required /> <span class="error" ng-show="(f1.file.$dirty || IsFormSubmitted) && f1.file.$error.required">Image required!</span> <span class="error">{{FileInvalidMessage}}</span> </td> </tr> <tr> <td>Description : </td> <td> <input type="text" name="uFileDescription" ng-model="FileDescription" class="{{(IsFormSubmitted?'ng-dirty' + (f1.uFileDescription.$invalid?' ng-invalid':''):'')}}" autofocus /> </td> </tr> <tr> <td></td> <td> <input type="submit" value="Upload File" /> </td> </tr> </table> </form> </div> @section Scripts{ http://~/Scripts/AngularController/Part8Controller.js }
  8. Kör projektet!

Annonser