Created
May 2, 2017 15:31
-
-
Save weeksdev/a4dd38bbf3d1df0f9c9f5a9409130f43 to your computer and use it in GitHub Desktop.
Angular / C# Web Api File Upload
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<style type="text/css"> | |
.btn-file { | |
position: relative; | |
overflow: hidden; | |
} | |
.btn-file input[type=file] { | |
position: absolute; | |
top: 0; | |
right: 0; | |
min-width: 100%; | |
min-height: 100%; | |
font-size: 100px; | |
text-align: right; | |
filter: alpha(opacity=0); | |
opacity: 0; | |
outline: none; | |
background: white; | |
cursor: inherit; | |
display: block; | |
} | |
.btn-file-label { | |
display: inline-block; | |
width: 400px; | |
margin-left: 10px; | |
} | |
</style> | |
<div class="form-group"> | |
<div class="col-lg-12"> | |
<label class="btn btn-default btn-file pull-right"> | |
Upload Files | |
<input type="file" style="display: none;" onchange="angular.element(this).scope().$ctrl.fileChanged(this)" multiple> | |
</label> | |
<spinkit-three-bounce ng-show="$ctrl.loading"></spinkit-three-bounce> | |
<div class="row" ng-show="$ctrl.selectedFiles.length > 0 && !$ctrl.loading"> | |
<div class="col-md-12" ng-repeat="file in $ctrl.selectedFiles">{{file}}</div> | |
<div class="col-md-12"> | |
<input type="button" class="btn btn-success pull-right" value="Save" ng-click="$ctrl.submit()"/> | |
</div> | |
</div> | |
</div> | |
</div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
angular.module('app').component('myComponent', { | |
templateUrl: 'my-component.html', | |
controller: function ($http, $scope, $element, $attrs) { | |
var ctrl = this; | |
ctrl.selectedFiles = []; | |
ctrl.fileEl = null; | |
ctrl.fileChanged = function (el) { | |
ctrl.fileEl = el; | |
if (el && el.files && el.files.length > 0) { | |
ctrl.selectedFiles = []; | |
angular.forEach(el.files, function (file) { | |
ctrl.selectedFiles.push(file.name.toString()); | |
}) | |
$scope.$apply(); | |
} else { | |
ctrl.selectedFiles = []; | |
} | |
} | |
ctrl.submit = function () { | |
console.log(ctrl.fileEl.files); | |
//if file el was never set then user never picked files so skip | |
if (ctrl.fileEl) { | |
ctrl.error = null; | |
ctrl.loading = true; | |
var formData = new FormData(); | |
var index = 1; | |
angular.forEach(ctrl.fileEl.files, function (file) { | |
formData.append('file' + index, file); | |
index = index + 1; | |
}) | |
$http.post('api/test/upload-file', formData, { | |
withCredentials: true, | |
headers: { 'Content-Type': undefined }, | |
transformRequest: angular.identity | |
}).then(function (response) { | |
console.log(response); | |
ctrl.selectedFiles = []; | |
if (ctrl.onUpload) { | |
ctrl.onUpload(); | |
} | |
}).catch(function (error) { | |
ctrl.error = error; | |
}).finally(function () { | |
ctrl.loading = false; | |
}) | |
} | |
} | |
} | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
using System; | |
using System.Collections.Generic; | |
using System.Linq; | |
using System.Net; | |
using System.Net.Http; | |
using System.Web.Http; | |
using System.Web; | |
namespace App.controller | |
{ | |
[RoutePrefix("api/test")] | |
public class TestController : ApiController | |
{ | |
[Route("upload-file"), HttpPost] | |
public HttpResponseMessage UploadFile([FromUri] string path) | |
{ | |
string root = HttpContext.Current.Server.MapPath("~/App_Data/Uploads"); | |
if (!System.IO.Directory.Exists(root)) | |
{ | |
System.IO.Directory.CreateDirectory(root); | |
} | |
var httpRequest = HttpContext.Current.Request; | |
if (httpRequest.Files.Count < 1) | |
{ | |
return Request.CreateResponse(HttpStatusCode.BadRequest); | |
} | |
foreach (string file in httpRequest.Files) | |
{ | |
var postedFile = httpRequest.Files[file]; | |
var filePath = System.IO.Path.Combine(root, postedFile.FileName); | |
postedFile.SaveAs(filePath); | |
} | |
return Request.CreateResponse(HttpStatusCode.Created); | |
} | |
} | |
} |
maurotambasco
commented
Apr 11, 2020
yutyut
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment