asp.net mvc - angular-file-upload drag and drop not working in angularjs /mvc application -
i trying implement angular-file-upload in angularjs/mvc i using https://github.com/nervgh/angular-file-upload
this javascript component code
(function () { app.component('fileuploadercomponent', fileuploadercomponent()); function fileuploadercomponent() { fileuploadercontroller.$inject = ['$scope', 'constants', 'fileuploader', 'documentsservice', '$stateparams', '$state']; //controller function fileuploadercontroller($scope, constants, fileuploader, documentsservice, $stateparams, $state) { var ctrl = this; ctrl.$oninit = function () { ctrl.title = []; ctrl.uploader = null; ctrl.services = { documentsservice: documentsservice, constants: constants, $scope: $scope, $state: $state, $stateparams: $stateparams, fileuploader: fileuploader } ctrl.load(); } }; fileuploadercontroller.prototype.load = function () { var ctrl = this; var baseurl = ctrl.services.documentsservice.uploadurl(); ctrl.uploader = new ctrl.services.fileuploader({ url: baseurl, method: "post", }); } return { templateurl: '/app/components/widgets/fileuploader/fileuploader.component.html', bindings: {}, controller: fileuploadercontroller } } })();and cshtml mark up
<!doctype html> <html> <head> <title>simple example</title> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /> </head> <body nv-file-drop="" uploader="$ctrl.uploader"> <div class="container"> <div class="row"> <div class="col-md-3"> <h3>select files</h3> <div ng-show="$ctrl.uploader.ishtml5"> <div class="well my-drop-zone" nv-file-over="" uploader="$ctrl.uploader"> base drop zone </div> <div nv-file-drop="" uploader="$ctrl.uploader" > <div nv-file-over="" uploader="$ctrl.uploader" over-class="another-file-over-class" class="well my-drop-zone"> drop zone own settings </div> </div> </div> multiple <input type="file" nv-file-select="" uploader="$ctrl.uploader" multiple accept="application/pdf" /><br /> </div> <div class="col-md-9" style="margin-bottom: 40px"> <h3>upload queue</h3> <p>queue length: {{ $ctrl.uploader.queue.length }}</p> <table class="table"> <thead> <tr> <th width="50%">name</th> <th ng-show="$ctrl.uploader.ishtml5">size</th> <th ng-show="$ctrl.uploader.ishtml5">progress</th> <th>title</th> <th>status</th> <th>actions</th> </tr> </thead> <tbody> <tr ng-repeat="item in $ctrl.uploader.queue"> <td><strong>{{ item.file.name }}</strong></td> <td ng-show="$ctrl.uploader.ishtml5" nowrap>{{ item.file.size/1024/1024|number:2 }} mb</td> <td ng-show="$ctrl.uploader.ishtml5"> <div class="progress" style="margin-bottom: 0;"> <div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div> </div> </td> <td> <input type="text" required ng-model="$ctrl.title[$index]" /> </td> <td class="text-center"> <span ng-show="item.issuccess">success</span> <span ng-show="item.iscancel">cancelled</span> <span ng-show="item.iserror">error</span> <span ng-show="item.isadd">added</span> <span ng-show="item.isupdate">updated</span> </td> <td nowrap> <button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isready || item.isuploading || item.issuccess"> <span class="glyphicon glyphicon-upload"></span> upload </button> <button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()"> <span class="glyphicon glyphicon-trash"></span> remove </button> </td> </tr> </tbody> </table> <div> <button type="button" class="btn btn-success btn-s" ng-click="$ctrl.uploader.uploadall()" ng-disabled="!$ctrl.uploader.getnotuploadeditems().length"> <span class="glyphicon glyphicon-upload"></span> upload </button> <button type="button" class="btn btn-danger btn-s" ng-click="$ctrl.uploader.clearqueue()" ng-disabled="!$ctrl.uploader.queue.length"> <span class="glyphicon glyphicon-trash"></span> remove </button> </div> </div> </div> </div> </body> </html>my angular script referencen in mvc
@html.bundledscripts(new[] { "angular-1.5.8/angular.js", "angular-1.5.8/angular-resource.js", "angular-1.5.8/angular-sanitize.js", "angular-1.5.8/angular-animate.js", "angular-1.5.8/angular-messages.js", "angular-idle-1.0.2/angular-idle.js", "ui-router-0.2.15/angular-ui-router.js", "angular-strap-2.3.10/angular-strap.js", "angular-strap-2.3.10/angular-strap.tpl.js", "ng-csv-0.3.1/ng-csv.js", "analytics/agentportalanalytics.js", "angular-file-upload/dist/angular-file-upload.js" })this uploader component 
the multiple file select working without issue when try drag , drop files drop zone not working , not seeing errors in console
i seeing below black invalid symbol when try drag , drop files on drop zone can please make drag , drop working
i think issue occurring in mvc(cshtml) when test in plain html drag , drop working fine, can please tell me how can make work in mvc
Comments
Post a Comment