Upload in ionic 3


#1

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


#2

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.


#3
<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>

#4

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