Image uploading via native Filetransfer

Ionic Framework ionic-v3
1

Hi everyone,

I am using Node-Mongo Backend for uploading my Image. So that I tried to use native Filetransfer. Unfortunately it doesn’t work properly. I tested my backend with postmon. My backend is working perfectly. Even In Ionic I can fetch my Image from serve. But I can’t upload my image data to server. I couldn’t figure out where is the problem. Please guide me if anyone have time.

My provider is

image.ts

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { Http } from '@angular/http';
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';
@Injectable()
export class ImagesProvider {
   apiURL = 'http://localhost:3000/';
 
  constructor(public http: Http, private transfer: FileTransfer) { }
 
  getImages() {
    return this.http.get(this.apiURL + 'images').map(res => res.json());
  }
 
  deleteImage(img) {
    return this.http.delete(this.apiURL + 'images/' + img._id);
  }
 
  uploadImage(img, desc) {
 
    // Destination URL
  var url = encodeURI(this.apiURL+'images');

    // File for Upload
    var targetPath = img;
 
    var options: FileUploadOptions = {
      fileKey: "file",
      fileName: "filename",
      chunkedMode: false,
      mimeType: 'multipart/form-data',
      params: { 'desc': desc },
      httpMethod: "POST",
    };
 
    const fileTransfer: FileTransferObject = this.transfer.create();
 
    // Use the FileTransfer to upload the image
    return fileTransfer.upload( url,targetPath, options, true).then((res)=>{
      //console.log(JSON.stringify(res)); 
    },(err)=>{
      console.log(err); 
    
    });
  }
}

I am pretty sure above upload method is not working perfectly.

Below is my takePicture function

 public takePicture(sourceType) {
    // Create options for the Camera Dialog
    var options = {
      quality: 100,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      sourceType: sourceType,
      saveToPhotoAlbum: false,
      correctOrientation: true
    };
 
    // Get the data of an image
    this.camera.getPicture(options).then((imagePath) => {
     
      let modal = this.modalCtrl.create('UploadModalPage', { data: imagePath });
      modal.present();
      modal.onDidDismiss(data => {
        if (data && data.reload) {
          this.reloadImages();
        }
      });
    }, (err) => {
      console.log('Error: ', err);
    });
  }

I think above function would be not any major issue.
And the my saveImage method is

 saveImage() {
   
    this.imagesProvider.uploadImage(this.imageData, this.desc).then(res => {
      this.viewCtrl.dismiss({reload: true});
    }, err => {
      this.dismiss();
    });
  }

And error of uploadImage method from provider

Object { code: 1, source: "iVBORw0KGgoAAAANSUhEUgAAAUAAAADwCAYAAABxLb1rAAAgAElEQVR4nEy7V5Pb5ra165tzaqe1l63QmTmAAAMIMAcwZzabuZkzu9lBaiUrZ0u2JIe1q74//JwLavs7F0+9KFQRBabxjjnmxA9HZhsHFuFvds0Cd00Odk1OdiwSexY7BxaBI6sDnU3EJDgxOSSMDhtHdj2Hdj1HohGj24rRbeXIaeLQ4eDQIXFgd7LjcLLr8LAvyew4VHYEmV3Rw77Ty6FLRSf70cl+9j0h7sphbnt8/OTy8KPo4pZD4rbk5JYrwJHTj1nwYRRUTI4gZjGCRYxhEqKYhCgWRxKrmMJmj2KzhhAccQRXFJsrilXyIYgSgtOFXfZgVd2YVDcW2YnFLWHzuLGrHswBGZPfi9XrYUf28g9F5UAOI3hiOGQNSYniVNKI3hQOOYnDk0bwJhG8SURvEqeaxuXLIPlSSP4E7oCG7E+g+ON4/SHcih+3N4w3EMcfTqEGNHzBFIFIknA4RyCQIhBME4lniCaLBJJVAskiAS2LGk2hxDV86TShTJZwtkQwWyKUyRNK5fBpWZR4Gm8gjccVRRSDCEIAu92PzaZgNXswWkQMNgmT4MQiuLBZRexmB3azA6tFwmyyYzRYMZksWOwCdsGJ2e7CaHdisDvQWa0cmYW/0ZkljqxOdGYvBpMXg1HFaPZhsvgxmnwc6d3cNXr4T5vCbauHA5PMvtnNvk3hwK6yb/Fzx6TwT7OT/zbb+dHi4LZFYM9iR28T0NtsHFlMHFr0HFn0HJhM7BlM7OqN29Vg447Owx29zK5BYc/g4e6RxN1DA3cP9ezpjewZDOzodOzodOzqjzgw6Dgw6Ng1HLFj0LOrM7Kj03FXb+COzsDtIz13j/QcHBnRHRg5urvP0a1dDLf3Md89wnjnCONPe1h+3EH4aR+fxUqrmGHUPWFUz9OKO1kVAjw8TfJiUuP1vMGbRYuX8xYv501eLVo8n7d5Nmny…", target: "http://localhost:3000/images", http_status: null, body: null, exception: null }

this is console log(err). Can anyone please tell me? Is there something that I missed? I am pondering that my uploadeImage filetransfer is not connecting via http request.

Thanks for your support

1 Like