Upload Uploading files

Upload Excel File Code Demo:

Download upload js file: Bower install Ng-file-uploa; JS file;

Angular.module (' Dc.workflow ', [
    ' Ngfileupload '
]);

JS Code:
var data=this.data={file:null};
The definition of data.file is empty;

This.selectimage = function (file) {
    This.errorfiletype = false;
    if (file[0].type! = ' Application/vnd.openxmlformats-officedocument.spreadsheetml.sheet ') {
        This.errorfiletype = true;
    }
};
Determine the upload file type, define Errorfiletype as False,if () inside for the judging condition, the judgment condition is non-time (that is, the condition is not established), Errorfiltertype is true;
Upload the file correctly (that is, the condition is set up) to obtain all the information of the uploaded file, including the file name, size, format, etc., stored in file;

this.importfile = function (ev) {
if (This.errorfiletype | |!data.file) {
This.errorfiletype = true;
return
    }
//Here is to judge the above conditions are not set when the direct return, do not execute the following code;
Upload.upload ({
url:commonSvc.baseURlForDCBulk + ' api/import/' + TemplateID,
data: {ExcelFile:data.file}
Conditional, upload file to fixed interface address, and get upload file
}). Then (function (Result) {
Code executed after the file is uploaded successfully
$mdDialog. Hide ();
$mdDialog. Show ({
Controller: ' Tabledataimportsuccessmodalctrl ',
Controlleras: ' $ctrl ',
Templateurl: ' modal/data-import-export/table-data-import-success-modal.html ',
Parent:angular.element (Document.body),
Targetevent:ev,
Locals: {},
Clickoutsidetoclose:false,
Fullscreen:false//Only For-xs,-SM breakpoints.
}). Then (function (Result) {

});
}). catch (Commonsvc.translatehttperror);
};

HTML code:

<md-dialog style= "min-width:30%" aria-label= "CREATE TABLE" >
<md-toolbar style= "Font-weight:bold;" > #fff; Color: #000; " >
<div class= "Md-toolbar-tools" >
{' Select-file ' | translate}}
<span style= "color: #9A9A9A; font-size:12px; margin-left:5px; " > Please upload Excel file </span>
<span flex></span>
</div>
</md-toolbar>

<md-dialog-content>
<div class= "md-dialog-content" style= "padding-top:0" >
<div layout= "Row" >
<md-input-container class= "No-margin no-padding" flex>
<input aria-label= "Input" name= "FileName"ng-model= "$ctrl. Data.file.name"Disabled
Style= "HEIGHT:38PX; border:1px solid #ccc; " />
 　　　　　　　　　　　　　　　　　　　　 //ng-model Gets the name of the uploaded file and displays it in the text box
</md-input-container>
<md-button aria-label= "Upload" class= "select-file-btn"
                           ngf-select= "$ctrl. Selectimage ($files)"//execute Selectimage function $files passed as a parameter to the function file
                           accept= "Application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                           ngf-pattern= "' Application/vnd.openxmlformats-officedocument.spreadsheetml.sheet '"
 　　　　　　　　　　　　　　　　 //These two lines of code are settings for the type of upload file
                           ng-model= "$ctrl. Data.file"//ng-model get upload file stored in template>
Select File
</md-button>
</div>
<span ng-if= "$ctrl. Errorfiletype" class= "errors" >* please upload Excel file .</span>

<p style= "color: #9A9A9A; margin-top:10px; "class=" No-margin ">*{{' import-file-temp ' | translate}}</p>
<p style= "color: #9A9A9A;" class= "No-margin" >*{{' import-file-temp-content ' | translate}}</p>
<p style= "color: #9A9A9A;" class= "No-margin" >* file must not exceed 20m</p>
</div>
</md-dialog-content>

<md-dialog-actions layout= "Row" >
<md-button aria-label= "button" class= "Md-warn no-padding" ng-click= "$ctrl. Closedialog ()" >
Cancel
</md-button>
<md-button aria-label= "button" class= "Md-primary md-raised no-padding"ng-click= "$ctrl. ImportFile ($EVEMT)"//click upload directly upload file function>
Upload
</md-button>
</md-dialog-actions>
</md-dialog>

Upload Uploading files