Upload image ionic


#1

Hai,
i doing on working with uploading file to my backend use php.
if i just upload file that is working .
and now . is it posible to send image within form
my code like this right now
i have 2 function create and create2 if create2 the image not sending if function create that is not working for everything
please help me

create() {
    // Destination URL
    var url = "http://yoururl/upload.php";

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

    // File name only
    var filename = this.lastImage;

    var options = {
        fileKey: "file",
        fileName: filename,
        chunkedMode: true,
        mimeType: "multipart/form-data",
        params: {
            'photos': filename,
            'name': this.name,
            'weight': this.weight,
            'dimension': this.dimension,
            'point': this.point,
            'status': this.status,
            'description': this.description,
            'deposit': '150',
            'category': '1',
        }
    };

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

    this.loading = this.loadingController.create({
        content: 'Uploading...',
    });
    this.loading.present();

    // Use the FileTransfer to upload the image
    fileTransfer.upload(targetPath, AppSettings.API_ENDPOINT + '/product', options).then(data => {
        this.loading.dismissAll()
        this.presentToast('Image succesful uploaded.');
    }, err => {
        this.loading.dismissAll()
        this.presentToast('Error while uploading file.');
    });
}
create2() {
    let loader = this.loadingController.create({
        content: "Loading..."
    });
    loader.present();
    var targetPath = this.pathForImage(this.lastImage);

    var data =  'name=' + this.name + 
    			'&weight=' + this.weight + 
    			'&dimension=' + this.dimension + 
    			'&point=' + this.point +
    			'&status=' + this.status +
    			'&description=' + this.description +
    			'&deposit=150'+
    			'&category=1' +
                '&photos=' + targetPath
    			;

    let headers = new Headers({
        'Content-Type': 'application/x-www-form-urlencoded',
        'Authorization': localStorage.getItem("token")
    });
    let options = new RequestOptions({
        headers: headers
    });

    this.http.post(AppSettings.API_ENDPOINT + '/product', data, options).map(res => res.json())
        .subscribe(
            data => {
                loader.dismiss().then(() => {
                    this.navCtrl.setRoot(SellerProductListPage);
                });
            },
            err => {
                loader.dismiss().then(() => {
                    let alert = this.alertCtrl.create({
                        title: 'Information',
                        subTitle: err.statusText,
                        buttons: ['OK']
                    });
                    alert.present();
                });
                console.log(err);
                // alert(err);
            }
        );
}
public presentActionSheet() {
    let actionSheet = this.actionSheetCtrl.create({
        title: 'Select Image Source',
        buttons: [{
                text: 'Load from Library',
                handler: () => {
                    this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
                }
            },
            {
                text: 'Use Camera',
                handler: () => {
                    this.takePicture(this.camera.PictureSourceType.CAMERA);
                }
            },
            {
                text: 'Cancel',
                role: 'cancel'
            }
        ]
    });
    actionSheet.present();
}
public takePicture(sourceType) {
  // Create options for the Camera Dialog
  var options = {
    quality: 100,
    sourceType: sourceType,
    saveToPhotoAlbum: true,
    correctOrientation: true
  };
 
  // Get the data of an image
  this.camera.getPicture(options).then((imagePath) => {
    // Special handling for Android library
    console.log(imagePath);
    if (this.platform.is('android') && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY) {
      this.filePath.resolveNativePath(imagePath)
        .then(filePath => {
          let correctPath = filePath.substr(0, filePath.lastIndexOf('/') + 1);
          let currentName = imagePath.substring(imagePath.lastIndexOf('/') + 1, imagePath.lastIndexOf('?'));
          this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
        });
    } else {
      var currentName = imagePath.substr(imagePath.lastIndexOf('/') + 1);
      var correctPath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1);
      this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
    }
  }, (err) => {
    this.presentToast('Error while selecting image.');
  });
}
// Create a new name for the image
private createFileName() {
    var d = new Date(),
        n = d.getTime(),
        newFileName = n + ".jpg";
    return newFileName;
}

// Copy the image to a local folder
private copyFileToLocalDir(namePath, currentName, newFileName) {
    this.file.copyFile(namePath, currentName, cordova.file.dataDirectory, newFileName).then(success => {
        this.lastImage = newFileName;
        console.log(newFileName);
    }, error => {
        this.presentToast('Error while storing file.');
    });
}

private presentToast(text) {
    let toast = this.toastCtrl.create({
        message: text,
        duration: 3000,
        position: 'top'
    });
    toast.present();
}

// Always get the accurate path to your apps folder
public pathForImage(img) {
    if (img === null) {
        return '';
    } else {
        return cordova.file.dataDirectory + img;
    }
}

#2

I don’t understand. What is working and what isn’t? Try to explain a bit clearer please.