Ionic-v5 File Transfer error 3

[Marcel64]

At the beginning, all worked fine to tranfer files to MongoDB-db but after an upgrade of Android (to Android 10) I can’t tranfer any picture to my MongoDB-db.

async uploadImages(images: string[]){
    for (let i = 0; i< images.length; i++){
      const element: string = images[i];
      let elementName: string = element.substr(element.lastIndexOf('/')+1);
      console.log('elementName', elementName);

      let fileTransfer: FileTransferObject =  this.transfer.create();
      const url: string = `${environement.api_url}/Containers/photos/upload`;
      console.log('url', url);

      let options: FileUploadOptions = {
        fileKey: 'Clothy',
        fileName: elementName,
        //chunkedMode: false,
        mimeType: 'image/jpeg',
        headers: {}
      }
      if (!this.imgUploaded){
        let data = await fileTransfer.upload(element, url, options);
        console.log('data', data);
        let id: string = JSON.parse(data.response)._id
        console.log('id', id);
        console.log('typeof id', typeof id);
        this.article.pictures.push(id);
        this.numImgUpload += 1;
      }
      if (this.numImgUpload === images.length){
        this.imgUploaded = true;
      }
    }
    return true;
  }

and I raise this error :

I read File Transfer was deprecated and I tried this https://github.com/silkimen/cordova-plugin-advanced-http
But I get an error :

Cannot find module '@ionic-native/http/ngx'.

My config

If someone can help

[rapropos]

You don’t need any plugins for this. Just use ordinary HttpClient.

[Marcel64]

@rapropos

HttpClient .

Thank you for your answer !
But like I am a rookie can I try to describe a bit more you answer …?

I just have to :

import { HttpClient } from '@angular/common/http';

and use the methode post/put applied to my picture ?

[rapropos]

Pretty much, yes. You can feed HttpClient a Blob or ArrayBuffer.

[Marcel64]

OK thank you…I did this :

async getCamera(){
    let options: CameraOptions = {
      sourceType: 1,
      destinationType: this.camera.DestinationType.FILE_URI,
      quality: 10,
      encodingType: this.camera.EncodingType.PNG,
      mediaType: this.camera.MediaType.PICTURE
    }
    return this.camera.getPicture(options);
  }

 this.getCamera().then(image => {
              console.log('image : ', image);
              const url: string = `${environement.api_url}/Containers/photos/upload`;
              console.log('url', url);
              const blob = new Blob([image], {type : 'image/png'});
              console.log('type de : ', typeof blob);
              const formData = new FormData();
              formData.append('file', blob, 'coucou');
              this.http.post(url,formData)
                .subscribe(
                  (data) => {
                    console.log('data ', data);

                  },
                  (error) => {
                    console.log('error : ', error);
                  }
                );

I get this answer :

So all seem perfectly worked…But after I am unable to display my picture…because “it has errors”

any clues ?

[indraraj26]

here is readymade for your need

@indraraj26/ion-camera

[Marcel64]

Ok thank you @indraraj26
Let’s try it !

[Marcel64]

I get this error

Cannot find module '@indraraj26/ion-camera'.

Is there a “ionic cordova plugin” command to import this module ?

[indraraj26]

did you import that IonCameraModule in feature module.ts if you are using lazyloading
Here is demo application : https://github.com/indraraj26/ionic5-starter-tabs-sidemenu/tree/ionic-camera-demo

Branch: ionic-camera-demo

[Marcel64]

Yes I did and I don’t the link with your link…:\

[Marcel64]

Is that possible to provide more specific informations ?

[rapropos]

That’s what I wanted to ask you when you said “it has errors”.

[Marcel64]

OK good !
I needed time to present correctly the code :

The purpose is to change the default avatar (image) of Marcel

ngOnInit() {
    const Ownerid= this.activatedRoute.snapshot.paramMap.get('idOwner');
    this.loadOwner(Ownerid)
    .subscribe((data: Owner) => {
      console.log('owner_mon : ', data);
      console.log('owner_mon_profil : ', data.id);
      console.log('owner_mon_profil_avatar : ', data.avatar);
    //  console.log('owner_mon_profil_id : ', data["_id"]); NE MARCHE PAS
      this.owner = data;
      console.log('nom 1: ', this.owner);
      if (this.owner.avatar === "" ) {
        console.log("avatar");
        this.owner.avatar = "https://ionicframework.com/docs/demos/api/avatar/avatar.svg";
        this.urlImage = "https://ionicframework.com/docs/demos/api/avatar/avatar.svg";
        console.log('nom 2: ', this.owner);
      }
      else {
        this.urlImage = `${this.owner.avatar}`;
        console.log('urlImage : ', this.urlImage;

      }
    })
  }

So when owner.avatar is empty : NO PROBLEM the avatar is a default image.

      <ion-avatar slot="start">
        <ion-img [src]="urlImage"></ion-img>
      </ion-avatar>

This is way to change to take a picture with the camera and to upload this picture into MongoDB

async getCamera(){
    let options: CameraOptions = {
      sourceType: 1,
      destinationType: this.camera.DestinationType.FILE_URI,
      quality: 10,
      encodingType: this.camera.EncodingType.PNG,
      mediaType: this.camera.MediaType.PICTURE
    }
    return this.camera.getPicture(options);
  }

this.getCamera().then(image => {
              console.log('image picture : ', image);
              let src = this.webview.convertFileSrc(image);
              //this.owner.avatar = src;
              //instanciation formData
              const formData = new FormData();
              //creation du Blob
              var blob = new Blob([image]);
              //on rempli le formData avec le Blob
              formData.append('file', blob, 'sisi');
              const url: string = `${environement.api_url}/Containers/photos/upload`;
              console.log('url', url);
              const Ownerid= this.activatedRoute.snapshot.paramMap.get('idOwner');
              this._httpClient.post(url, formData)
                .subscribe(
                  (data)=> {
                    console.log('picture sent : ',data);
                    console.log('type data : ',typeof data);

                    //this.stringifiedData = JSON.stringify(data);
                    console.log('res data id : ', data["_id"]);
                    this.owner.avatar = `${environement.api_url}/Containers/photos/download/${data["_id"]}`;
                    console.log('this.owner.avatar : ',this.owner.avatar);
                    const url2: string = `${environement.api_url}/Owners/${Ownerid}`;
                    console.log('url2 : ', url2);
                    console.log(' update owner : ', this.owner);
                    this._httpClient.put(url2,this.owner)
                      .subscribe(
                        (data) => {
                          console.log('data_owner : ',data);
                        },
                        (error) => {
                          console.log('error  ', error);
                        }
                      )
                  },
                  (error) => {
                    console.log('erreur : ',error);
                  }
                );
            })

When I use the camera the log is :

all clear : no erreur ! (and the file is in MongoDB)

And when I reload the page, the log is :

So no pb…
BUT :

Now the image seems unreadable : my the process of BLOBING but I don’t how to handle that…

Any idea ?

Thank you

[rapropos]

Have you read about DOMSanitizer and the general Angular security guide?