Image from Camera is not uploading to server with FileTransfer

Ionic Native
1

I am trying to pick a image from photo gallary and upload to the server.

I have a PHP script to receive the file and copy to the server location. I have tested this script with Postman. It works perfectly.

I have a provider to upload the image to the PHP script. The code snippet for upload function is below.

upload(imageData) {
    let posturl = APIURL + 'message/upload';

    const fileTransfer: FileTransferObject = this.transfer.create();

    let options1: FileUploadOptions = {
        fileKey: 'file',
        fileName: 'name.jpg',
        headers: {}    
    }

    return new Promise((resolve, reject) => {
        fileTransfer.upload(imageData, posturl, options1)
        .then((data) => {       
            resolve(data);
        }, (err) => {
            alert(JSON.stringify(err));
            reject(err.message);
        });
    }); 
}

TS code for picking the image and calling the provider is:

pickimage()
{
    const options: CameraOptions = {
    quality: 100,
    destinationType: this.camera.DestinationType.FILE_URI,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE,
    sourceType : this.camera.PictureSourceType.PHOTOLIBRARY
    };

    this.camera.getPicture(options).then((imageData) => {
        this.imageURI = imageData;              
    }, (err) => {
        // Handle error
    });
}

TS code for picking the image and calling the provider:

this.messageService.upload(this.imageURI).then((result) => {
        this.responseData = result;
        if (this.responseData.status=="success")
        {
                this.mediaurl = this.responseData.mediaurl;
        }
    }, 
    (err) => {
                        alert("Not able to send image");                            
    });

The file is not getting uploaded. The alert(JSON.stringify(err)) in the provider returns null.

I am testing this with DevApp.

Any help?

2

I haven’t used the done transfer plugin because it’s deprecated, but you probably want the actual image file not just the uri right?

3

I just need to upload the image to the server.

I have seen examples doing the same way. But it is not working for me.

4

I wrote a tutorial just for this reason, file upload from mobile is pretty confusing to figure out. If you follow this though you should be good: http://roblouie.com/article/574/learn-ionic-cordova-file-upload/

5

I am following your blog. I am getting ‘Class not found’ error in the TS code JSON.stringify(err).

TS code:

	this.messageService.upload(this.imageURI).then((result) => {
						this.responseData = result;
						alert(JSON.stringify(result));
						if (this.responseData.status=="success")
						{
						}
						}, 
						(err) => {
							alert(JSON.stringify(err));
							alert("Not able to send image");							
					});

Provider:

async upload(imagePath) {
		let posturl = APIURL + 'message/upload';

		const imageFile = await this.getSingleFile(imagePath);
		
		const formData = new FormData();
		formData.append('file', imageFile, imageFile.name);
	
		return new Promise((resolve, reject) => {
			this.http.post(posturl, formData, {
			headers: new HttpHeaders()
			.set('Content-Type', 'application/x-www-form-urlencoded')
			})
			.subscribe(data => {
				resolve(data);
			}, (err: HttpErrorResponse) => {
				reject(err.message);
			});
		});
	}

async getSingleFile(filePath: string): Promise<File> {
    // Get FileEntry from image path
    const fileEntry: FileEntry = await this.ionicFileService.resolveLocalFilesystemUrl(filePath) as FileEntry;

    // Get File from FileEntry. Again note that this file does not contain the actual file data yet.
    const cordovaFile: IFile = await this.convertFileEntryToCordovaFile(fileEntry);

    // Use FileReader on each object to populate it with the true file contents.
    return this.convertCordovaFileToJavascriptFile(cordovaFile);
  }

  private convertFileEntryToCordovaFile(fileEntry: FileEntry): Promise<IFile> {
    return new Promise<IFile>((resolve, reject) => {
      fileEntry.file(resolve, reject);
    })
  }

  private convertCordovaFileToJavascriptFile(cordovaFile: IFile): Promise<File> {
    return new Promise<File>((resolve, reject) => {
      const reader = new FileReader();
      reader.onloadend = () => {
        if (reader.error) {
          reject(reader.error);
        } else {
          const blob: any = new Blob([reader.result], { type: cordovaFile.type });
          blob.lastModifiedDate = new Date();
          blob.name = cordovaFile.name;
          resolve(blob as File);
        }
      };
      reader.readAsArrayBuffer(cordovaFile);
    });
  }