How to upload an image from an Ionic 3 app to a webserver built in ASP.NET CORE?

Question

(I've got say it in advance, sorry for my bad english) below is my typescript code in which is working perfectly. The takephoto method opens the device gallary and let the user choose one of pictures stored in the device and the uploadFile method tranfers the data image to the restfull api that I'm developing in asp.net core :

export class SelecionarAvatarPage {
  imgrc:any ='assets/imgs/blank-profile-picture-973460_640-300x300.png';
  imgurl: any =' ';
  imgname: string;
  constructor(public navCtrl: NavController, private transfer: FileTransfer,  public loadingCtrl: LoadingController, private camera: Camera, public navParams: NavParams, private platform: Platform, public toastCtrl: ToastController) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SelecionarAvatarPage');
  }
  takePhoto(sourceType:number) {
    const options: CameraOptions = {
      quality: 50,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      correctOrientation: true,
      sourceType:sourceType,
    }
    this.camera.getPicture(options).then((imageData) => {
      this.imgname = imageData;
      let base64Image = 'data:image/jpeg;base64,' + imageData;
      this.imgrc = base64Image;
      this.imgurl = imageData;
    }, (err) => {
      // Handle error
    });
  }
  presentToast(msg) {
    let toast = this.toastCtrl.create({
      message: msg,
      duration: 3000,
      position: 'bottom'
    });

    toast.onDidDismiss(() => {
      console.log('Dismissed toast');
    });

    toast.present();
  }
  uploadFile() {
    let loader = this.loadingCtrl.create({
      content: "Uploading..."
    });
    loader.present();
  const fileTransfer: FileTransferObject = this.transfer.create();
  loader.dismiss();
    let options: FileUploadOptions = {
      fileKey: 'ionicfile',
      fileName: 'ionicfile',
      chunkedMode: false,
      mimeType: "image/jpeg",
      headers: {}
    }

    fileTransfer.upload(this.imgurl, 'http://192.168.0.000:5000/api/image', options)
      .then((data) => {
      console.log(data);
      this.presentToast("Imagem foi enviada");
    }, (err) => {
      console.log(err);
      loader.dismiss();

    }); 
  }

I want to know how I could upload image sent from an ionic app by File Transfer plugin in ASP.NET Core

You want a ASP.Net Core implementation of /api/image? What did you try and did you read any documentation? — Jeroen Heier
– Jeroen Heier, Commented Jul 27, 2018 at 3:44
Yes, An action method of a controller which stores the image — Igor Matheus
– Igor Matheus, Commented Jul 27, 2018 at 3:46
I've searched some examples, but all of them use ASP.NET Web Api and I'm using ASP.NET Core. And Well, I've tried to search how to upload an image with ASP.NET Core and even so it didn't work out — Igor Matheus
– Igor Matheus, Commented Jul 27, 2018 at 3:54

rashmi ranjan · Accepted Answer · 2018-07-27 04:06:57Z

Code for Upload: ` postFile(imageData,id) {

          this.commonService.showLoader("Uploading........");
          let currentName = imageData.substr(imageData.lastIndexOf('/') + 1);
          let correctPath = imageData.substr(0, imageData.lastIndexOf('/') + 1);


          let base64Image = imageData;

          this.filePath.resolveNativePath(imageData)
          .then(filePath =>base64Image)
          .catch(err => console.log(err));



          console.log(base64Image);
          const fileTransfer = this.transfer.create();
          let imageName = base64Image;

          var options: FileUploadOptions = {
            fileKey: "file",
            fileName: imageName.substr(imageName.lastIndexOf('/') + 1),
            mimeType: "image/png/jpeg",
            chunkedMode: false,
            params:{'Id': id},
            headers: { 'Authorization':'Bearer '+ sessionStorage.getItem("token")   }
          }
          return new Promise((resolve, reject) => {


            fileTransfer.upload(imageName,encodeURI( this.MainURL + "/UploadMedia"), options)
              .then((data) => {



                console.log(data);
                resolve(200);
              }, (err) => {
                this.commonService.hideLoader();
                reject(500);
              })
          })
        }

Code for Getting Image :private OpenCamera(): void { const options: CameraOptions = { quality: 50, destinationType: this.camera.DestinationType.FILE_URI, encodingType: this.camera.EncodingType.JPEG, mediaType: this.camera.MediaType.PICTURE, correctOrientation: true, sourceType: this.camera.PictureSourceType.CAMERA, saveToPhotoAlbum: true }

this.camera.getPicture(options).then((imageData) => {
  //   let base64Image = 'data:image/jpeg;base64,' + imageData;
  let s = imageData;
  this.AddIssueObj.file.push(s);
  this.uploadcount = this.AddIssueObj.file.length;
}, (err) => {
  // Handle error
});

}

Use destinationType: this.camera.DestinationType.DATA_URI, Becasue URL wont help you to send data to server but URI does. Plugins u need to use.import { FileUploadOptions } from '@ionic-native/file-transfer'; import { File } from '@ionic-native/file';`

Igor Matheus · Accepted Answer · 2018-07-27 20:21:02Z

0

I got it, I solved this problem by replacing the destination type to this.camera.DestinationType.FILE_URI instead of this.camera.DestinationType.DATA_URL

const options: CameraOptions = {
      quality: 50,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      correctOrientation: true,
      sourceType:sourceType,
    }

answered Jul 27, 2018 at 20:21

Igor Matheus

11 bronze badge

Collectives™ on Stack Overflow

How to upload an image from an Ionic 3 app to a webserver built in ASP.NET CORE?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related