@codesalsa wrote:
I have buildup an IONIC application using cordova-plugin-camera, cordova-plugin-file and cordova-plugin-file-transfer library. The camera works perfectly, but uploading the image to the server using fileTransfer doesn't work. Need help in fixing this. Below is my code:
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *"> <title></title> <link rel="manifest" href="manifest.json"> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <script src="lib/ionic/js/ionic.bundle.js"></script> <script src="lib/ngCordova/dist/ng-cordova.js"></script> <script src="cordova.js"></script> <script src="js/app.js"></script> </head> <body ng-app="starter" ng-controller="ImageCtrl"> <ion-content> <div class="main-content"> <div class="fld" ng-if="pictureURL"> <div class="picture-cont"> <img ng-src="{{pictureURL}}" width="300" height="auto"> {{image}}<br> {{filename}} </div> </div> </div> </ion-content> <ion-footer-bar class="bar bar-assertive"> <div class="button-bar"> <button class="button icon-left ion-camera" ng-click="takePicture()">Take Photo</button> <button class="button icon-left ion-upload" ng-click="uploadImage()" ng-disabled="assuForm.$invalid">Submit</button> </div> </ion-footer-bar> </body> </html>app.js
angular.module('starter', ['ionic', 'ngCordova']) .run(function($ionicPlatform) { $ionicPlatform.ready(function() { if(window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); cordova.plugins.Keyboard.disableScroll(true); } if(window.StatusBar) { StatusBar.styleDefault(); } }); }) .controller('ImageCtrl', function ($scope, $cordovaCamera, $cordovaFile, $cordovaFileTransfer, $cordovaDevice, $ionicPopup, $cordovaActionSheet) { $scope.pictureURL = ""; $scope.image = null; $scope.filename = null; $scope.showAlert = function(title, msg) { var alertPopup = $ionicPopup.alert({ title: title, template: msg }); }; $scope.takePicture = function(){ var options = { quality: 72, targetWidth: 320, targetHeight: 180, destinationType: Camera.DestinationType.DATA_URL, encodingType: Camera.EncodingType.JPEG } $cordovaCamera.getPicture(options) .then(function(imagePath){ $scope.pictureURL = "data:image/jpeg;base64," + imagePath; // Grab the file name of the photo in the temporary directory var currentName = imagePath.replace(/^.*[\\\/]/, ''); //Create a new name for the photo var d = new Date(), n = d.getTime(), newFileName = n + ".jpg"; $scope.image = newFileName; var namePath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1); // Move the file to permanent storage $cordovaFile.moveFile(namePath, currentName, cordova.file.dataDirectory, newFileName).then(function(success){ $scope.image = newFileName; }, function(error){ $scope.showAlert('Error', error.exception); }); }, function(err){ console.log('Camera Error' + angular.toJson(data)); }); }; $scope.pathForImage = function(image) { if (image === null) { return ''; } else { return cordova.file.dataDirectory + image; } }; $scope.uploadImage = function() { // Destination URL var url = "http://themesalsa.net/imgupload/upload.php"; // File for Upload var targetPath = $scope.pathForImage($scope.image); // File name only var filename = $scope.image; $scope.filename = filename; var options = { fileKey: "file", fileName: filename, chunkedMode: false, mimeType: "multipart/form-data", params : {'fileName': filename} }; $cordovaFileTransfer.upload(url, targetPath, options).then(function(result) { $scope.showAlert('Success', 'Image upload finished.'); }); } });upload.php
<?php header('Access-Control-Allow-Origin: *'); $target_path = "uploads/"; $target_path = $target_path . basename( $_FILES['file']['name']); if(move_uploaded_file($_FILES['file']['tmp_name'], $target_path)) { echo "Upload and move success"; } else{ echo $target_path; echo "There was an error uploading the file, please try again!"; } ?>Any help will be highly appreciable.
Posts: 1
Participants: 1