Develop Reference

file count is always zero in web API when trying to upload a document with angular 2

I'am trying to upload a file using a web API in C#. For that the code I have used in as follows.
httpRequest.Files.Count value always gets zero when i'm trying to upload a document.
What am I doing wrong?
mcDocuments.ts file
fileChange(event) {
debugger;
let fileList: FileList = event.target.files;
if (fileList.length > 0) {
let file: File = fileList[0];
let formData: FormData = new FormData();
formData.append('uploadFile', file, file.name);
let token = JSON.parse(Cookie.get('currentUser')).token
let headers = new Headers();
headers.append('Access-Control-Allow-Origin', '*');
headers.append('Authorization', 'bearer ' + token);
headers.append('UserName',
JSON.parse(Cookie.get('currentUser')).username);
headers.append('Content-Type', 'multipart/form-data');
let options = new RequestOptions({ headers: headers });
let apiUrl1 = "http://localhost:53732/api/UploadFileApi";
this.http.post(apiUrl1, formData, options)
.map(res => res.json())
.catch(error => Observable.throw(error))
.subscribe(
data => console.log('success'),
error => console.log(error)
)
}
window.location.reload();
}
mcDocuments.html file
<input type="file" id="btnUpload" value="Upload" (change)="fileChange($event)" class="upload" />
web Api
using System.Net.Http;
using System.Web;
using System.Web.Http;
namespace FileUpload_WebAPI_Angular2.Controllers
{
public class UploadFileApiController : ApiController
{
[HttpPost]
public HttpResponseMessage UploadJsonFile()
{
HttpResponseMessage response = new HttpResponseMessage();
var httpRequest = HttpContext.Current.Request;
if (httpRequest.Files.Count > 0)
{
foreach (string file in httpRequest.Files)
{
var postedFile = httpRequest.Files[file];
var filePath =
HttpContext.Current.Server.MapPath("~/UploadFile/" + postedFile.FileName);
postedFile.SaveAs(filePath);
}
}
return response;
}
}
}
module.ts file
declarations: [ McDocumentsComponent,],
providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }],
bootstrap: [McDocumentsComponent]

Check if your inteceptor class set a content-type. If so, remove it.

Try using Request.Files or Request.Form.Files instead of HttpContext.Current.Request.Files. A similar issue was experienced here: Request.Files is always null

This works for me:
component.html:
<input type="file" id="file" (change)="handleFileInput($event.target.files)">
Interface
export interface UploadDoc {
LlojiKampanjesId: number;
FileToUpload: File; }
component.ts
listToUpload: UploadDoc = {LlojiKampanjesId:0, FileToUpload:null};
handleFileInput(files: FileList) {
this.listToUpload.FileToUpload = files.item(0);}
public uploadList() {
this.disableSubmit = true;
this.rastetService.uploadFile(this.listToUpload, this.userInfo.Token).subscribe((result: string) => {
this.thisDialogRef.close('close');
this.disableSubmit = false;
},
error => {
if (error instanceof HttpErrorResponse) {
}
else {
}
this.spinnerService.hide();
this.disableSubmit = false;
});}
service.ts
uploadFile (listToUpload:UploadDoc,token: string ) {
let headers= new HttpHeaders({'Authorization':'Bearer ' + token});
const formData: FormData = new FormData();
formData.append('UploadDoc', listToUpload.FileToUpload, listToUpload.FileToUpload.name);
return this.$http
.post(this.endpointUploadFile, formData, {headers:headers})}
web api:
[System.Web.Http.HttpPost]
public HttpResponseMessage UploadList()
{
HttpResponseMessage response = new HttpResponseMessage();
var httpRequest = HttpContext.Current.Request;
//
// -----------------
//
return response;
}

C# Razor Upload File

I am using cshtml as view
this is my input:
#Html.TextArea("DESCRIPTION", null, new { #class = "field-longtext", #cols = 100, #rows = 5, maxlength = 255 })
#Html.TextBox("DOC_TYPE", null, new { #class = "field-longtext", maxlength = 10 })
#Html.TextBox("DOC_FILE", null, new { #class = "field-longtext", #type = "file" })
and using ajax post
function UploadFile() {
var url = '#Url.Action("CreateUploadFile")';
var data = {};
var result = false;
$('##ViewBag.FormName').find('input, textarea').each(function () {
data[$(this).attr('name')] = $(this).val();
});
data.PROBLEM_CALL_ID = #Model.Model.PROBLEM_CALL_ID;
$.ajax({
type: 'POST',
url: url,
data: data,
async: false,
success: function (data) {
if (data.result) {
var selectedRow = SubFormService.tableList['##ViewBag.TableName'].selectedRow;
result = true;
} else {
alert(data.errorMsg);
result = false;
}
}
});
return result;
}
My Controller:
[HttpPost]
public ActionResult CreateUploadFile(Models.Shared.DocumentModel vm)
{
var id = -1;
var result = string.Empty;
var json = new BasicJsonResult();
var file = vm.DOC_FILE;
LogUtility.Debug(file.ContentLength.ToString());
if (file != null && file.ContentLength > 0)
{
var fileName = Path.GetFileName(file.FileName);
LogUtility.Debug(fileName);
LogUtility.Debug(Server.MapPath("~/Images/"));
var path = Path.Combine(Server.MapPath("~/Images/"), fileName);
file.SaveAs(path);
}
return Json(json, JsonRequestBehavior.AllowGet);
}
the code var file = vm.DOC_FILE; warns me (Object reference not set to an instance of an object.), but I can get another control value (vm.DESCRIPTION, vm.DOC_TYPE).
Please help.
Also, I want to download file when that file is uploaded.

With the introduction of XHR2 it is now possible to upload files using AJAX. You could use FormData to achieve this. Assuming that your input elements are inside a <form> you may try this (also include in this form a hidden input for the PROBLEM_CALL_ID field so that it gets sent to the server):
function UploadFile() {
var url = '#Url.Action("CreateUploadFile")';
var formData = new FormData($('form')[0]);
var result = false;
$.ajax({
type: 'POST',
url: url,
data: formData,
async: false,
success: function (data) {
...
}
});
return result;
}
So just make sure that you have wrapped your input elements inside a form tag (preferably with an id so that you can more specifically select it):
<form id="myForm">
#Html.TextArea("DESCRIPTION", null, new { #class = "field-longtext", #cols = 100, #rows = 5, maxlength = 255 })
#Html.TextBox("DOC_TYPE", null, new { #class = "field-longtext", maxlength = 10 })
#Html.TextBox("DOC_FILE", null, new { #class = "field-longtext", #type = "file" })
#Html.HiddenFor(x => x.PROBLEM_CALL_ID)
</form>
and then select the form like this:
var formData = new FormData($('#myForm')[0]);
Also please, please, please don't do that:
async: false
By doing this you are defeating the whole purpose of an asynchronous call to the server. If you set this flag the browser will freeze during the file upload which is an absolutely horrible user experience. If you do this, then you'd better use a normal HTML form submit to upload the file - you are loosing all the benefits of AJAX and there's no point to be making an AJAX request with this flag set to true.

If you want to able upload a file using ajax, you should use iframe.
<iframe name="upload-data" id="upload-data" frameborder="0" width="0" height="0"></iframe>
<form id="frm-add-update" enctype="multipart/form-data" method="post" target="upload-data">
// HTML Code
</form>
In my case, my Controller would return a code, "0x001" if the upload process successful, otherwise it will return "0x00".
When document is ready
$("#upload-data").hide();
$("#upload-data").load(function () {
var data = $.parseJSON($("#upload-data").contents().text());
if (data != null) {
if (data.code != "0x001") {
// you got a problem
}
else {
// you got no problem
}
}
});
In Controller
[Authorize, HttpPost]
private JsonResult ActionNAme(ModelClass modelObj, HttpPostedFileBase htmlFileTagName)
{
string code = "0x001";
string message = "";
try
{
// your process here
}
catch(Exception)
{
code = "0x000";
message = ex.Message;
}
return new JsonResult()
{
Data = new
{
code = code,
message = message
}
};
}
For downloading the uploaded file, i think you should change the Action return type. You will get the information from this link.
Hope it can solve your problem :)

ajax call (to send file) to call c# function not working(webmethod)

This form i want to send using ajax call with file, but it is not calling the c# function and not showing any error.
//form to submit
<form id="formfile" enctype="multipart/form-data">
<div class="modal-body">
<input type="file" id="fileupload1"/>
</div>
<div class="modal-footer">
<input type="submit" id="savefiles" class="buttonType" onclick="saveFile();return false" value="Save File" />
</div>
</form>
This ajax call is used to call c# code and also send file(.pdf)
//ajax call in .aspx file
function saveFile() {
debugger;
var file = $('input[type="file"]').val();
var exts = ['pdf', 'PDF'];
var formData = new FormData();
formData.append("imageFile", $('#fileupload1')[0].files[0]);
if (file) {
var extension = file.substring(file.lastIndexOf('.') + 1, file.length);
if ($.inArray(extension, exts) > -1)
{
//var formData = new FormData($('#form1')[0]);
var fileUpload = $('#fileupload1').get(0);
var files = fileUpload.files;
for (var i = 0; i < files.length; i++) {
formData.append(files[i].name, files[i]);
}
formData.append(fileUpload.name, fileUpload);
//alert('File Uploaded Successfully!');
}
else
{
alert('Invalid file, Only pdf files can be uploaded!!!');
}
}
//var str = "abc";
$.ajax({
url: "FileUploader.aspx/savepdfFiles",
type: "POST",
//cache: false,
contentType: false,
processData: false,
data: formData,
success: function (data) {
debugger;
},
error: function (data) {
debugger
}
});
}
It will come into success section also, but not calling following method.
//c# code
[webMethod]
public static void savepdfFiles()
{
//code
}
In ajax call it goes into success. but not calling savepdfFiles() method.

EDIT 24/08/2016
You can convert your blob data to base 64 and send it in JSON
var filesLength = 0;
function SaveFileToTemp() {
var file = $('input[type="file"]').val();
var exts = ['pdf', 'PDF'];
var pdfList = [];
// var pdfFile = { FileName: '', B64Data: '' };
if (file) {
var extension = file.substring(file.lastIndexOf('.') + 1, file.length);
if ($.inArray(extension, exts) > -1) {
var fileUpload = $('#fileupload1').get(0);
var files = fileUpload.files;
filesLength = files.length;
for (var i = 0; i < files.length; i++) {
var reader = new window.FileReader();
reader.myFileIndex = i;
reader.onloadend = function () {
base64data = reader.result;
pdfList.push({ FileName: files[this.myFileIndex].name, B64Data: base64data.substr(base64data.indexOf(',') + 1) });
console.log(base64data);
filesLength--;
if (filesLength === 0) {
$.ajax({
url: "/FileUploader.aspx/savepdfFiles",
type: "POST",
//cache: false,
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify({ listPdf: pdfList }),
success: function (data) {
//alert('File Uploaded Successfully!');
debugger;
},
error: function (data) {
debugger
}
});
}
}
reader.readAsDataURL(files[i]);
}
}
else {
alert('Invalid file, Only pdf files can be uploaded!!!');
}
}
}
and in C#
[WebMethod]
public static void savepdfFiles(List<PdfFile> listPdf)
{
//code
foreach (var item in listPdf)
{
byte[] data = Convert.FromBase64String(item.B64Data);
System.IO.File.WriteAllBytes(string.Format("d:\\temp\\{0}",item.FileName), data) ;
}
}
this is my clas PdfFile for info
public class PdfFile
{
public string FileName { get; set; }
public string B64Data { get; set; }
}
Maybe you have to add this to your web.config to allow big json serialization :
<system.web.extensions>
<scripting>
<webServices>
<jsonSerialization maxJsonLength="10240000"/>
</webServices>
</scripting>
</system.web.extensions>
You have to set the appropiate value for maxJsonLength
Previous answer
I think I had this problem before from what i remember there is mechanism that doesn't allow you to this.
Maybe I'm wrong but I share you a link.
You will have to handle this with an ashx.
here is a built-in validation layer of protection that ASP.NET
enforces for both GET and POST based ASP.NET AJAX web methods, which
is that regardless of the HTTP verb being used, ASP.NET always
requires that the HTTP Content-Type header is set to the value
application/json. It this content type header is not sent, ASP.NET
AJAX will reject the request on the server.

I know this problem and it's easy to solve just you have to use Generic Handler.
Using generic handler with your AJAX call you can send any file to asp.net C# function.
In Generic Handler you have to write following c# code.
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
namespace UploadFile
{
/// <summary>
/// Summary description for UploadFileHandler
/// </summary>
public class UploadFileHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
//context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");
if (context.Request.Files.Count > 0)
{
HttpFileCollection files = context.Request.Files;
for (int i = 0; i < files.Count; i++)
{
HttpPostedFile file = files[i];
string fname;
if (HttpContext.Current.Request.Browser.Browser.ToUpper() == "IE" || HttpContext.Current.Request.Browser.Browser.ToUpper() == "INTERNETEXPLORER")
{
string[] testfiles = file.FileName.Split(new char[] { '\\' });
fname = testfiles[testfiles.Length - 1];
}
else
{
fname = file.FileName;
}
fname = Path.Combine(context.Server.MapPath("~/Uploads/"), fname);
file.SaveAs(fname);
}
}
context.Response.ContentType = "text/plain";
context.Response.Write("File Uploaded Successfully!");
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
Here is the example...
If you want Full Example Click here!

Adding image to AngularJS model for upload

I am new to this wonderful framework AngularJS. I have a C# API controller where I would like to upload data from a form that includes an image. Normally (razor) I would upload a form as json and include the image as a HttpPostedFileBase:
public ArtWork SaveArtWork(ArtWork artWork, HttpPostedFileBase file)
{ // save in db and return object }
I have found a lot of different ways for uploading the file wrapped in a FormData object ([AngularJS Uploading An Image With ng-upload):
$scope.uploadFile = function(files) {
var fd = new FormData();
//Take the first selected file
fd.append("file", files[0]);
$http.post(uploadUrl, fd, {
withCredentials: true,
headers: {'Content-Type': undefined },
transformRequest: angular.identity
}).success( ...all right!... ).error( ..damn!... );
};
But I have some other properties I have parsed to a json object, and now I would like to upload it all in a bundle. Or is it possible to get the image data as a base64 and add it to my json object? I know that a base64 is 1/3 bigger than a byte stream, but it's so easy to work with :)
Here's my Angular Controller:
'use strict';
(function () {
// Factory
angular.module('umbraco').factory('artworkResource', function ($http) {
return {
getById: function (id) {
return $http.get("backoffice/Trapholt/ArtWorkApi/GetById/" + id);
},
save: function (artwork) {
return $http.post("backoffice/Trapholt/ArtWorkApi/SaveArtWork", angular.toJson(artwork));
},
save2: function (artwork, fd) {
return $http.post("backoffice/Trapholt/ArtWorkApi/SaveArtWork", angular.toJson(artwork), fd);
}
};
});
// Controller
function artworkController($scope, $routeParams, artworkResource, $http) {
$scope.categories = ['Keramik', 'Maleri', 'Møbel', 'Skulptur'];
artworkResource.getById($routeParams.id).then(function (response) {
$scope.curatorSubject = response.data;
});
var fd;
$scope.uploadFile = function(files) {
fd = new FormData();
fd.append("file", files[0]);
};
$scope.save = function (artwork) {
artworkResource.save(artwork, fd).then(function (response) {
$scope.artwork = response.data;
alert("Success", artwork.Title + " er gemt");
});
};
};
//register the controller
angular.module("umbraco").controller('ArtworkTree.EditController', artworkController);
})();
So how can I combine my image and the other properties in one json object or two arguments? Please leave a comment if I need to explain some more, any help would really be appreciated :)

I found a solution, where I added the file and the model to the form data. So it was actually pretty easy to expand solution from here. This is my Angular controller:
function artworkController($scope, $routeParams, artworkResource, $http) {
$scope.categories = ['Keramik', 'Maleri', 'Møbel', 'Skulptur'];
artworkResource.getById($routeParams.id).then(function (response) {
$scope.curatorSubject = response.data;
});
var fd;
$scope.uploadFile = function(files) {
fd = new FormData();
fd.append("file", files[0]);
};
$scope.save = function (artwork) {
fd.append("ArtWork", angular.toJson(artwork));
$http.post("backoffice/Trapholt/ArtWorkApi/Post", fd, {
transformRequest: angular.identity,
headers: { 'Content-Type': undefined }
});
};
};
And this i my C# mvc API controller:
public HttpResponseMessage Post()
{
HttpResponseMessage result = null;
var httpRequest = HttpContext.Current.Request;
if (httpRequest.Files.Count > 0)
{
var file = httpRequest.Files[0];
var artworkjson = httpRequest.Form[0];
var artwork = JsonConvert.DeserializeObject<ArtWork>(artworkjson);
if (artwork == null)
{
return Request.CreateResponse(HttpStatusCode.BadRequest, "No saved");
}
using (var binaryReader = new BinaryReader(file.InputStream))
{
artwork.Picture = binaryReader.ReadBytes(file.ContentLength);
}
result = Request.CreateResponse(HttpStatusCode.Created, "ok");
}
else
{
result = Request.CreateResponse(HttpStatusCode.BadRequest);
}
return result;
}
The html view is a normal form where all the inputs are bound with the model, expect the file input field:
<input type="file" id="file" name="picture" onchange="angular.element(this).scope().uploadFile(this.files)"/>

download data as .xls format file

I need to download list data as .xls file.My controller code is follows.
[HttpGet]
public void AttendeeListToExport()
{
string campaign_id = string.Empty;
campaign_id = ((MemberProfile)HttpContext.Current.Profile).HOWCampaignID;
AutoCRM.Services.HOW.Attendee.Manage manage = new AutoCRM.Services.HOW.Attendee.Manage();
DataSet lst = manage.AttendeeListToExport(campaign_id);
if (lst != null)
{
if (lst.Tables[0].Rows.Count > 0)
{
DataTable dt = lst.Tables[0];
// Export all the details to Excel
string filename = campaign_id + "_" + DateTime.Now.ToString("ddMMyyyy") + ".xls";
Export objExport = new Export();
objExport.ExportDetails(dt, Export.ExportFormat.Excel, filename);
}
}
}
js code
$('#exportToExcel').on("click", function () {
alert('hi');
$.ajax({
url: "/api/Attendee/AttendeeListToExport",
async: true,
cache: false,
success: function (result) {
alert(result);
}
});
});
code executing correctly but file not downloading

You can download file through javascript in following both ways :
Using HiddenIFrame :
var downloadURL = function downloadURL(url) {
var iframe;
var hiddenIFrameID = 'hiddenDownloader';
iframe = document.getElementById(hiddenIFrameID);
if (iframe === null) {
iframe = document.createElement('iframe');
iframe.id = hiddenIFrameID;
iframe.style.display = 'none';
document.body.appendChild(iframe);
}
iframe.src = url;
}
Using Jquery :
$('a').click(function(e) {
e.preventDefault(); //stop the browser from following
window.location.href = 'uploads/file.doc';
});
Download now!

If your Controller action returned a FileResult, you could download this from your javascript function like this:
$('#exportToExcel').on("click", function () {
window.open("/api/Attendee/AttendeeListToExport", "_blank");
});

You can't download files using ajax. You have to use a hidden iframe or link directly to the file.