how to send any type of file in ionic along with extra form fields in ionic 3 to an api with content type multipart/form-data
This has nothing to do with ionic-native. Please describe what you have tried so far, with relevant reproducible code, how it behaves, how you expect it to behave, and what the difference is.
<ion-navbar>
<ion-title>Assignment Form</ion-title>
</ion-navbar>
<div class="col-xs-12">
<p>Fields with
<span>
<b style="color:red">*</b>
</span> are required</p>
<div class="box box-info col-xs-12 col-lg-12 no-padding">
<form (ngSubmit)="onSubmit()" [formGroup]="myForm1" enctype="multipart/form-data">
<ion-item style="background-color:transparent">
<ion-label required class="label">Class
<span>
<b style="color:red">*</b>
</span>
</ion-label>
<ion-select [selectOptions]="selectOptions1" placeholder="Select Class" formControlName="course_id">
<ion-option *ngFor="let class of EmpBatchListList.course.class; let i = index" (ionSelect)="setClassIndex(i)" value="{{class.id}}">{{class.course_name}}</ion-option>
</ion-select>
</ion-item>
<ion-item style="background-color:transparent">
<ion-label required class="label">Section
<span>
<b style="color:red">*</b>
</span>
</ion-label>
<ion-select [selectOptions]="selectOptions3" placeholder="Select Section" formControlName="batch_id">
<div *ngIf="getClassIndex() != -1">
<ion-option *ngFor="let class1 of EmpBatchListList.course.class[getClassIndex()].section; let i = index" (ionSelect)="setSectionIndex(i,class1.id)"value="{{class1.id}}">{{class1.name}}</ion-option>
</div>
</ion-select>
</ion-item>
<ion-item style="background-color:transparent">
<ion-label required class="label">Subject
<span>
<b style="color:red">*</b>
</span>
</ion-label>
<ion-select [selectOptions]="selectOptions2" placeholder="Select Subject" formControlName="subject_id">
<div *ngIf="getSectionIndex() != -1">
<ion-option *ngFor="let class2 of EmpBatchListList.course.class[getClassIndex()].section[getSectionIndex()].subject"value={{class2.id}}>{{class2.name}}</ion-option>
</div>
</ion-select>
</ion-item>
<ion-label required class="label">Assignment Name<span><b style="color:red">*</b></span></ion-label>
<input type="text" class="options" formControlName="assignment_name" [class.invalid]="!myForm1.controls.assignment_name.valid && (myForm1.controls.assignment_name.dirty || submitAttempt)">
<p *ngIf="!myForm1.controls.assignment_name.valid && (myForm1.controls.assignment_name.dirty || submitAttempt)" class="para">
Assignment Name cannot be Blank.
</p>
<ion-label required class="label">Description</ion-label>
<input type="text" class="options" formControlName="description" [class.invalid]="!myForm1.controls.description.valid && (myForm1.controls.description.dirty || submitAttempt)">
<p *ngIf="!myForm1.controls.description.valid && (myForm1.controls.description.dirty || submitAttempt)" class="para">
Description Name cannot be Blank.
</p>
<ion-label required class="label">Assignment Marks<span><b style="color:red">*</b></span></ion-label>
<input type="number" class="options" formControlName="assignment_mark" [class.invalid]="!myForm1.controls.assignment_mark.valid && (myForm1.controls.assignment_mark.dirty || submitAttempt)">
<p *ngIf="!myForm1.controls.assignment_mark.valid && (myForm1.controls.assignment_mark.dirty || submitAttempt)" class="para">
Assignment Marks cannot be Blank.
</p>
<ion-item style="background-color:transparent">
<ion-label required class="label">Student
<span>
<b style="color:red">*</b>
</span>
</ion-label>
<ion-select [selectOptions]="selectOptions4" placeholder="Select Student" formControlName="student_id" multiple="true" >
<ion-option *ngFor="let stuName of studentList.total_users" value="{{stuName.id}}" >{{stuName.name}}</ion-option>
</ion-select>
</ion-item>
<!-- <ion-item style="background-color:transparent">
<ion-label required class="label">Student<span><b style="color:red">*</b></span></ion-label>
<select name="category" class="options4" style="background-color: white" formControlName="student_id" [class.invalid]="!myForm1.controls.student_id.valid && (myForm1.controls.student_id.dirty || submitAttempt)">
<option [selected]="true">-- select Student --</option>
<ion-option *ngFor="let stuName of studentList.total_users" value="{{stuName.id}}">{{stuName.name}}</ion-option>
</select> </ion-item> -->
<ion-label required class="label">Submission Date <span><b style="color:red">*</b></span></ion-label>
<input type="date" class="day" formControlName="submission_date" [class.invalid]="!myForm1.controls.submission_date.valid && (myForm1.controls.submission_date.dirty || submitAttempt)">
<p *ngIf="!myForm1.controls.submission_date.valid && (myForm1.controls.submission_date.dirty || submitAttempt)" class="para">
Submission Date cannot be blank.
</p> <br/>
<!-- <ion-label required class="label">Submission Date <span><b style="color:red">*</b></span></ion-label>
<input type="date" class="day" formControlName="day" [class.invalid]="!myForm1.controls.day.valid && (myForm1.controls.day.dirty || submitAttempt)">
<p *ngIf="!myForm1.controls.day.valid && (myForm1.controls.day.dirty || submitAttempt)" class="para">
Submission Date cannot be blank.
</p> -->
<!-- <ion-item style="background-color:transparent">
<ion-label>Select PDF</ion-label>
<ion-icon name="md-add-circle" item-end color="secondary" (click)="selectPDF()"></ion-icon>
</ion-item>
<ion-item style="background-color:transparent">
<ion-label>Take a Photo</ion-label>
<ion-icon name="md-add-circle" item-end color="secondary" (click)="presentActionSheet()"></ion-icon>
</ion-item> -->
<ion-label required class="label" >File<span><b style="color:red">*</b></span></ion-label>
<input type="file" id="selectFile" name="file" formControlName="assignment_file" >
<button ion-button small type="submit" [disabled]="!myForm1.valid" class="buttn1">Create</button>
<!-- <button ion-button (click)="choosePdf()">Choose pdf</button> -->
<!-- <input type="file" name="file" id="selectFile" > -->
<!-- <input type="button" (click)="Upload()" value="upload File"> -->
</form>
</div>
</div>
onSubmit(){
console.log(this.myForm1.value)
if(this.networkcheck.online==true){
this.dassignment.createEmpAssignment(this.uid,this.myForm1.value).then((result)=>{
this.assignmentList = result;
console.log(“com”+this.assignmentList );
this.aler(this.assignmentList);
},(err) => {
this.aler(err);
});
}
else if(this.networkcheck.online==false){
let alert = this.alertCtrl.create({
title: 'Network Status' ,
subTitle: 'Check your netwotk and try after sometime',
buttons: ['OK']
});
alert.present();
}
}
pls check my html and ts and give some suggetion