I am currently working on my first Ionic project. There is a page which requires user registration, wherein one is asked to upload an image. But I’m not able to figure out how to accept the input using Angular. I was wondering if Ionic itself had an easy way to upload images to a server.
Here is my current code:
HTML code:
<ion-content padding class="no-scroll">
<ion-list>
<ion-item>
<ion-label floating>Name</ion-label>
<ion-input type="text" [(ngModel)]="name"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Email</ion-label>
<ion-input type="email" [(ngModel)]="email"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Password</ion-label>
<ion-input type="password" [(ngModel)]="password"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Phone Number</ion-label>
<ion-input type="text" [(ngModel)]="phone"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Profile Picture</ion-label>
<ion-input type="file" [id]="pic"></ion-input>
</ion-item>
</ion-list>
<button ion-button (click)='userreg();'>Register</button>
</ion-content>
TS code:
export class Register {
public name: string;
public email: string;
public password: string;
public phone: string;
public pic: any;
constructor(public navCtrl: NavController, private alertCtrl: AlertController) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad Register');
}
userreg() {
var picURL;
var user = new Backendless.User();
user.email=this.email;
user.password=this.password;
user.name=this.name;
user.phone=this.phone;
var picture=this.pic;
Backendless.Files.upload( picture, "my-folder" )
.then( function( fileURL ) {
console.log( "File successfully uploaded. Path to download: " + fileURL.fileURL );
picURL = fileURL.fileURL;
})
.catch( function( error ) {
console.log( "error - " + error.message );
})
user.picture=picURL;
Backendless.UserService.register( user ).then( this.userRegistered ).catch( this.gotError );
}
gotError( err ) // see more on error handling
{
console.log( "error message - " + err.message );
console.log( "error code - " + err.statusCode );
}
userRegistered( user )
{
console.log("User registered");
alert("User Registered.")
}
}