cssquirrel · January 25, 2019 11:49 · Apr 10, 2015 · Apr 10, 2015
diff --git a/file.upload.api.service.js b/file.upload.api.service.js
@@ -2,7 +2,7 @@
 
 (function (app) {
 
-    var fileApiService = function ($http, $q) {
+    var fileApiService = function ($http) {
 
         var fileApiFactory = {};
 

diff --git a/FileUploadApiController.cs b/FileUploadApiController.cs
@@ -0,0 +1,36 @@
+// Use whatever namespacing works for your project.
+namespace YourSite.Web.Controllers.Api
+{
+    using System.IO;
+    using System.Linq;
+    using System.Net;
+    using System.Net.Http;
+    using System.Threading.Tasks;
+    using System.Web;
+    using System.Web.Http;
+
+    using Umbraco.Web.WebApi;
+
+    // If you want this endpoint to only be accessible when the user is logged in, 
+    // then use UmbracoAuthorizedApiController instead of UmbracoApiController
+    public class FileUploadApiController : UmbracoApiController
+    {
+        public async Task<HttpResponseMessage> UploadFileToServer()
+        {
+            if (!Request.Content.IsMimeMultipartContent())
+            {
+                throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
+            }
+
+            // Make this directory whatever makes sense for your project.
+            var root = HttpContext.Current.Server.MapPath("~/App_Data/Temp/FileUploads");
+            Directory.CreateDirectory(root);
+            var provider = new MultipartFormDataStreamProvider(root);
+            var result = await Request.Content.ReadAsMultipartAsync(provider);
+
+            // Build a list of the filenames of the files saved from your upload, to return to sender.
+            var fileName = result.FileData.Aggregate(string.Empty, (current, file) => current + ("," + file.LocalFileName));
+            return Request.CreateResponse(HttpStatusCode.OK, fileName);
+        }
+    }
+}
diff --git a/file.upload.api.service.js b/file.upload.api.service.js
@@ -0,0 +1,49 @@
+// The Angular service that will handle the API call to initialize the file upload to the server.
+
+(function (app) {
+
+    var fileApiService = function ($http, $q) {
+
+        var fileApiFactory = {};
+
+        /**
+         * @ngdoc method
+         * @name importFile
+         * @function
+         * 
+         * @param {file} file - File object acquired via File Upload API.
+         * @description - Upload a file to the server.
+         */
+        fileApiFactory.uploadFileToServer = function (file) {
+            var request = {
+                file: file
+            };
+            return $http({
+                method: 'POST',
+                url: "/umbraco/api/FileUploadApi/UploadFileToServer",
+                // If using Angular version <1.3, use Content-Type: false.
+                // Otherwise, use Content-Type: undefined
+                headers: { 'Content-Type': undefined },
+                transformRequest: function (data) {
+                    var formData = new FormData();
+                    formData.append("file", data.file);
+                    return formData;
+                },
+                data: request
+            }).then(function (response) {
+                if (response) {
+                    var fileName = response.data;
+                    return fileName;
+                } else {
+                    return false;
+                }
+            });
+        };
+
+        return fileApiFactory;
+
+    };
+
+    app.factory('fileApiService', fileApiService);
+
+}(angular.module(appName)));
diff --git a/file.upload.controller.js b/file.upload.controller.js
@@ -0,0 +1,92 @@
+// The Angular controller to bind to your view.
+
+(function (app) {
+
+    var fileUploadController = function ($scope, fileApiService) {
+
+        /*-------------------------------------------------------------------
+         * Initialization Methods
+         * ------------------------------------------------------------------*/
+
+        /**
+         * @ngdoc method
+         * @name init
+         * @function
+         * 
+         * @description - Called when the $scope is initalized.
+         */
+        $scope.init = function () {
+            $scope.setVariables();
+        };
+
+        /**
+         * @ngdoc method
+         * @name setVariables
+         * @function
+         * 
+         * @description - Sets the initial states of the $scope variables.
+         */
+        $scope.setVariables = function () {
+			$scope.file = false;
+			$scope.isUploading = false;
+        };
+
+        /*-------------------------------------------------------------------
+         * Event Handler Methods
+         *-------------------------------------------------------------------*/
+
+        /**
+         * @ngdoc method
+         * @name fileSelected
+         * @function
+         * 
+         * @param {array of file} files - One or more files selected by the HTML5 File Upload API.
+         * @description - Get the file selected and store it in scope. This current example restricts the upload to a single file, so only take the first.
+         */
+        $scope.acceptSelectedFile = function (files) {
+            if (files.length > 0) {
+                $scope.file = files[0];
+            }
+        };
+
+        /*-------------------------------------------------------------------
+         * Helper Methods
+         * ------------------------------------------------------------------*/
+
+        /**
+         * @ngdoc method
+         * @name uploadFile
+         * @function
+         * 
+         * @description - Uploads a file to the backend.
+         */
+        $scope.uploadFile = function () {
+            if (!$scope.isUploading) {
+                if ($scope.file) {
+                    $scope.isUploading = true;
+                    var promise = fileApiService.uploadFileToServer($scope.file);
+                    promise.then(function (response) {
+                        if (response) {
+                            console.info('Saved to server with the filename ' + response);
+                        }
+						$scope.isUploading = false;
+                    }, function (reason) {
+                        console.info("File import failed.");
+                        console.info(reason.message);
+                        $scope.isUploading = false;
+                    });
+                } else {
+                    console.info("Must select a file to import.");
+                    $scope.isUploading = false;
+                }
+            }
+        };
+
+        /*-------------------------------------------------------------------*/
+
+        $scope.init();
+
+    };
+
+    app.controller('FileUploadController', ['$scope', 'fileApiService', fileUploadController]);
+}(angular.module(appName)));
diff --git a/fileUpload.html b/fileUpload.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<head>
+    <title>File Upload</title>
+</head>
+<body>
+  <!-- Example view to bind to your Angular -->
+  <div id="content" data-ng-app="exampleApp" data-ng-controller="FileUploadController">
+    <h1>Upload a file</h1>
+    <!-- using ng-file-upload by Danial Farid -->
+    <!-- See for https://github.com/danialfarid/ng-file-upload documentation on configuration -->
+    <button ng-file-select ng-model="files" ng-file-change="fileSelected(files)" class="file button btn-primary" ng-multiple="false" accept=".jpg,.png,.gif" ng-show="!isUploading">
+      Choose File
+    </button>
+    <button type="button" data-ng-click="uploadFile()">Upload</button>
+  </div>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
+    <!-- the ng-file-upload directive by Danial Farid https://github.com/danialfarid/ng-file-upload -->
+    <script src="angular-file-upload.js"></script>
+    <script src="ng.app.js"></script>
+    <script src="file.upload.api.service.js"></script>
+    <script src="file.upload.controller.js"></script>
+</body>
+</html>
diff --git a/ng.app.js b/ng.app.js
@@ -0,0 +1,10 @@
+// Example Angular app declaration.
+// This example makes use of the ng-file-upload directive by Danial Farid https://github.com/danialfarid/ng-file-upload
+// It needs to be injected into the Angular app.
+// You could probably use the native HTML5 file upload API if you didn't want to rely on any external directives.
+
+var appName = 'exampleApp';
+
+(function () {
+    var app = angular.module(appName, ['angularFileUpload']);
+}());
No results found