Sending image to post rest api

Ionic Native
1

I have spent a lot of time reading ionic documentations and many online tutorials and questions everywhere but could not get it to work.

constructor(public navCtrl: NavController, private alertCtrl: AlertController, private formBuilder: FormBuilder, private camera : Camera, private http: HttpClient, private storage: Storage, private transfer: Transfer, private file: File, private filePath: FilePath, public toastCtrl: ToastController, public platform: Platform) {
   .
   .
}

openGallery () {
		let cameraOptions = {
			sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
			destinationType: this.camera.DestinationType.FILE_URI,      
			quality: 100,
			allowEdit : true,
			targetWidth: 1000,
			targetHeight: 1000,
			encodingType: this.camera.EncodingType.JPEG,      
			correctOrientation: true
		}

		this.camera.getPicture(cameraOptions)
		.then((file_uri) => {
			this.data = file_uri;
			var sourceDirectory = file_uri.substring(0, file_uri.lastIndexOf('/') + 1);
			var sourceFileName = file_uri.substring(file_uri.lastIndexOf('/') + 1, file_uri.length);
			sourceFileName = sourceFileName.split('?').shift();
			this.file.copyFile(sourceDirectory, sourceFileName, cordova.file.externalApplicationStorageDirectory, sourceFileName).then((result: any) => {
		        this.imagePath = file_uri;
		        this.imageChosen = 1;
		        this.imageNewPath = result.nativeURL;
		        setTimeout(()=>{
		        	this.setAvatar();
		        },200);
			})
		}, 
		err => console.log(err));   
	}

	setAvatar(){
		// File for Upload
		var targetPath = this.pathForImage(this.lastImage);

		// let filename = this.imagePath.split('/').pop();
		// let headers = {'Authorization': this.auth };
	     //    let options = {
	   //      fileKey: "file",
	   //      fileName: filename,
	   //      mimeType: "image/jpg",
	   //      httpMethod: "POST",
	   //      headers: headers,
	 //    };

		// const fileTransfer: TransferObject = this.transfer.create();

		// fileTransfer.upload(this.imageNewPath, url,
	 //      options).then((entry) => {
	 //        this.imagePath = '';
	 //        this.imageChosen = 0;
	 //        console.log('succ',entry);
	 //      }, (err) => {
	 //        console.log('fail',err);
	 //    });

	     let headers = new HttpHeaders({'Content-Type': 'multipart/form-data', 'Authorization': this.auth });
		if (this.data) {
			this.http.post(url,
				{avatar: this.imageNewPath},
				{headers: headers}
			)
			.subscribe(
				res => {
				    this.imagePath = '';
	        		    this.imageChosen = 0;
				    console.log(res);
				    this.getUserInfo();
				},
				err => {
				    console.log(err.status);
				}
			);
		}
	}

the open gallery part works just fine and i do see the opened image in the UI. in the set avatar function none of the commented part(ionic native file transfer) and the http.post work… i tried changing the options or removing/adding some of them in the file transfer… and all of possible Content-Types even with no Content-Type for the http.post request… and none worked… i mostly get 404 response… but the image path is current and i can see the image preview in chrome developer tools in network section.
P.S i must send the image file… not the base64 file format… i would really appreciate any help…

2

You must use the File Transfer Plugin . You can call the rest api via this plugin and post any object like pdf, images. Also you can download files.