Click here to Skip to main content
15,921,226 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I am bit confused how to upload and download file using Angular Js and Asp.net MVC,I have tried a lot but not acheived the task.I have tried different Methdologies and one of them is
*SFTP File Upload Using ASP.NET Web API and AngularJS[^]*
So help me

What I have tried:

I have tried but in above example.when i aplpied Js and add dependancy to Js.Then I Have Faced faced errors are:

*
WARNING: Tried to load angular more than once.
require.js:1895 GET http://localhost:11953/FileUploader.js 
req.load @ require.js:1895
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
callGetModule @ require.js:1170
completeLoad @ require.js:1544
onScriptLoad @ require.js:1671
require.js:166 Uncaught Error: Script error for: FileUploader
http://requirejs.org/docs/errors.html#scripterror
    at makeError (require.js:166)
    at HTMLScriptElement.onScriptError (require.js:1681)
makeError @ require.js:166
onScriptError @ require.js:1681
appPage.html:258 Uncaught TypeError: Cannot read property 'style' of null
    at appPage.html:258
(anonymous) @ appPage.html:258

*
But these files and their refernce are exist already....

Thanks
Posted
Updated 5-Jan-17 23:01pm
Comments
Andy Lanng 5-Jan-17 8:45am    
The first line of the message is telling you that you have linked angular scripts more than once. This is not great, but angular should be able to handle this and only load once.
I would suggest ensuring that you have only one of each script linked.
The next error suggests an issue in the loading of the FileUploader script. I can't tell you any more without seeing the code

1 solution

Andy Langg,This Is my JS:
"use strict";

define(['application-configuration' ,'FileUploader','accountsService', 'alertsService'], function (app) {

app.register.controller('AppController', ['$scope', '$rootScope', 'FileUploadController', 'accountsService', 'alertsService',
function ($scope, $rootScope, FileUploader, accountsService, alertsService) {

alert('File Upload');
var uploader = $scope.uploader = new FileUploader({
url: window.location.protocol + '//' + window.location.host + window.location.pathname + '/api/Upload/UploadFile'
});

// FILTERS

uploader.filters.push({

name: 'extensionFilter',
fn: function (item, options) {
debugger;
var filename = item.name;
var extension = filename.substring(filename.lastIndexOf('.') + 1).toLowerCase();
if (extension == "pdf" || extension == "doc" || extension == "docx" || extension == "rtf")
return true;
else {
alert('Invalid file format. Please select a file with pdf/doc/docs or rtf format and try again.');
return false;
}
}
});

uploader.filters.push({
name: 'sizeFilter',
fn: function (item, options) {
debugger;
var fileSize = item.size;
fileSize = parseInt(fileSize) / (1024 * 1024);
if (fileSize <= 20)
return true;
else {
alert('Selected file exceeds the 20MB file size limit. Please choose a new file and try again.');
return false;
}
}
});

uploader.filters.push({
name: 'itemResetFilter',
fn: function (item, options) {
debugger;
if (this.queue.length < 20)
return true;
else {
alert('You have exceeded the limit of uploading files.');
return false;
}
}
});

// CALLBACKS

uploader.onWhenAddingFileFailed = function (item, filter, options) {
console.info('onWhenAddingFileFailed', item, filter, options);
};
uploader.onAfterAddingFile = function (fileItem) {
debugger;
alert('Files ready for upload.');
};

uploader.onSuccessItem = function (fileItem, response, status, headers) {
debugger;
$scope.uploader.queue = [];
$scope.uploader.progress = 0;
alert('Selected file has been uploaded successfully.');
};
uploader.onErrorItem = function (fileItem, response, status, headers) {
debugger;
alert('We were unable to upload your file. Please try again.');
};
uploader.onCancelItem = function (fileItem, response, status, headers) {
debugger;
alert('File uploading has been cancelled.');
};

uploader.onAfterAddingAll = function (addedFileItems) {
debugger;
console.info('onAfterAddingAll', addedFileItems);
};
uploader.onBeforeUploadItem = function (item) {
debugger;
console.info('onBeforeUploadItem', item);
};
uploader.onProgressItem = function (fileItem, progress) {
console.info('onProgressItem', fileItem, progress);
};
uploader.onProgressAll = function (progress) {
console.info('onProgressAll', progress);
};

uploader.onCompleteItem = function (fileItem, response, status, headers) {
debugger;
console.info('onCompleteItem', fileItem, response, status, headers);
};
uploader.onCompleteAll = function () {
console.info('onCompleteAll');
};

console.info('uploader', uploader);


}]);
});



Thats It.
Now Plaese Help me.
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900