Today, I will show you how to upload a picture using AngularJS with ASP.NET 5. First, you must create a new project and then write the following code:
Web.config File
<appSettings>
<add key="Filesize" value="50KB"/>
<add key="ChartImageHandler" value="storage=file;timeout=20;dir=c:\TempImageFiles\;" />
</appSettings>
Asp File
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Try
Response.Clear()
Dim fileid As String = System.Guid.NewGuid.ToString()
Dim imgsize As String = ConfigurationManager.AppSettings("Filesize")
Dim a As String = Context.Request.Files.Get(0).ContentLength.ToString
Dim b As String = Math.Round(a / 1024)
Dim c As String = imgsize.Replace(("KB").ToString, "")
If Val(b) < Val(c) Then
Context.Request.Files.Get(0).SaveAs("D:\manish\Project\Project\upload\" & fileid & ".jpg")
Response.Write("True|" & fileid)
Else
Response.Write("False|Select File Less Then " + imgsize + " || Your File Size is " + b + " KB")
End If
Response.End()
Catch ex As ArgumentOutOfRangeException
MsgBox("'Select A File' Then Click On Upload Button")
End Try
End Sub
JS File
var myApp = angular.module('myApp', ['ui.bootstrap']);
//upload a file code
myApp.directive('fileModel', ['$parse', function($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function() {
scope.$apply(function() {
modelSetter(scope, element[0].files[0]);
});
});
}
};
}]);
myApp.service('fileUpload', ['$http', function($http) {
this.uploadFileToUrl = function(file, uploadUrl) {
var fd = new FormData();
fd.append('file', file);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {
'Content-Type': undefined
}
})
.success(function(data) {
if (data.split("|")[0] == "True") {
$("#getimg").attr('src', 'upload/' + data.split("|")[1] + '.jpg');
$("#hid").val(data.split("|")[1] + ".jpg");
var img = $("#hid").val();
if (img == "noimage.jpg") {
$("#Remov").hide();
} else {
$("#Remov").show();
}
} else if (data.split("|")[0] == "False") {
alert(data.split("|")[1]);
var ab = $("#hid").val();
$("#getimg").attr('src', 'upload/' + ab);
var img = $("#hid").val();
if (img == "noimage.jpg") {
$("#Remov").hide();
} else {
$("#Remov").show();
}
}
})
.error(function() {
if ($(myFile).val() == "") {
alert("Select a file");
} else {
alert("Select a image file");
}
});
}
}]);
$scope.uploadFile = function() {
var fileval = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];
if ($(myFile).val() == "") {
alert("Select a file");
} else if ($.inArray($(myFile).val().split('.').pop().toLowerCase(), fileval) == -1) {
alert("Select a image file");
$(myFile).val('');
$("#hid").val("noimage.jpg");
} else {
var file = $scope.myFile;
var uploadUrl = "Image_Upload.aspx";
fileUpload.uploadFileToUrl(file, uploadUrl);
$scope.myFile = "";
$scope.remove = true;
var reader = new FileReader();
reader.onload = function(e) {
scope.image = e.target.result;
scope.$apply();
}
}
elem.on('change', function() {
reader.readAsDataURL(elem[0].files[0]);
});
return false;
};
I hope this post wil works for you. Good luck!
AngularJS with Free ASP.NET Hosting
Try our AngularJS with Free ASP.NET Hosting today and your account will be setup soon! You can also take advantage of our Windows & ASP.NET Hosting support with Unlimited Domain, Unlimited Bandwidth, Unlimited Disk Space, etc.
