How to Upload camera and gallery images in Ionicframework with Angularjs

Question

Am new to ionicFramework and Angularjs and have been able to set up my application with this controller to capture images with camera or from device photo gallery. But my problem is how to include the image caption in and input field then send php file in my server to handle the business logic:

    $scope.takePhoto = function(){
    var options = {
        quality: 80,
        destinationType: Camera.DestinationType.FILE_URI,
        sourceType: Camera.PictureSourceType.CAMERA,
        allowEdit: true,
        encodingType: Camera.EncodingType.JPEG,
        targetWidth: 500,
        targetHeight: 500,
        popoverOptions: CameraPopoverOptions,
        correctOrientation: true,
        saveToPhotoAlbum: false
    };

    $cordovaCamera.getPicture(options).then(function(imageData) {
        $scope.srcImage = imageData;
    }, function(err) {
        // error
    });
};

//Photo from gallery
$scope.selectPhoto = function(){
    var options = {
        quality: 80,
        destinationType: Camera.DestinationType.FILE_URI,
        sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
        allowEdit: true,
        encodingType: Camera.EncodingType.JPEG,
        targetWidth: 500,
        targetHeight: 500,
        correctOrientation: true
    };

    $cordovaCamera.getPicture(options).then(function(imageData) {
        $scope.srcImage = imageData;
    }, function(err) {
        // error
    });
};



$scope.uploadPhoto = function(){
    $scope.photoDetails = {};
    $scope.photoDetails.desc = "";
    var fileURL = $scope.srcImage;
    var uploadOptions = new FileUploadOptions();
    uploadOptions.fileKey = "file";
    uploadOptions.fileName = fileURL.substr(fileURL.lastIndexOf('/') + 1);
    uploadOptions.mimeType = "image/jpeg";
    uploadOptions.chunkedMode = false;

    $cordovaFile.uploadFile('www.mydomain.com/upload_user_photo.php', fileURL, uploadOptions).then(
        function(result) {
            // Success!
        }, function(err) {
            // Error
        });     
}

Please I need how to include caption input variable to my upoad and how to also get them in php file. Am I getting them with post or what?

tanveer ahmad dar · Accepted Answer · 2015-11-08 18:29:23Z

1

you can include it in params in options like this

$scope.uploadPhoto = function(){
var fileURL = $scope.srcImage;
var caption = $scope.caption;

    var filename = fileURL.substr(fileURL.lastIndexOf('/') + 1);
    var options = {
        fileKey: "file",
        fileName: filename,
        chunkedMode: false,
        mimeType: "image/jpeg",
        params : {'directory':'upload', 'fileName':filename, 'caption':caption}
    };
    $cordovaFileTransfer.upload(AppData.get("siteUrl") + 'upload.php', fileURL, options).then(function(result) {
        alert(result.response);
    }, function(err) {
        console.log("ERROR: " + JSON.stringify(err));
        alert(err);
    }, function (progress) {
        // constant progress updates
    });

  };

answered Nov 8, 2015 at 18:29

tanveer ahmad dar

3,3921 gold badge29 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to Upload camera and gallery images in Ionicframework with Angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related