Carga iónica de la image de la aplicación desde la camera / biblioteca de fotos

Estoy trabajando en una aplicación de chat iónico donde el usuario puede upload una foto como parte de su post. Estoy buscando una forma de upload la image a mi server webhost para que pueda recuperarla más adelante a través de una URL.

El problema es que no puedo uploadlo a mi server web.

Estoy usando estos dos complementos:

  • org.apache.cordova.file-transfer
  • cordova-plugin-camera

Cuando ejecuto la aplicación en el simulador xcode y selecciono una image de la biblioteca fotográfica del dispositivo, la console me ofrece los siguientes posts:

  • File Transfer Finished with response code 200
  • void SendDelegateMessage(NSInvocation *): delegate (webView:runJavaScriptAlertPanelWithMessage:initiatedByFrame:) failed to return after waiting 10 seconds. main run loop mode: kCFRunLoopDefaultMode>
  • SUCCESS: ""

Este es el código que utilizo actualmente:

 app.controller('HomeController', function($rootScope, $scope, $cordovaCamera, $ionicActionSheet, $cordovaFileTransfer){ ... // open PhotoLibrary $scope.openPhotoLibrary = function() { var options = { quality: 100, destinationType: Camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.PHOTOLIBRARY, allowEdit: true, encodingType: Camera.EncodingType.JPEG, popoverOptions: CameraPopoverOptions, saveToPhotoAlbum: false }; $cordovaCamera.getPicture(options).then(function(imageData) { //console.log(imageData); //console.log(options); var url = "http://mydomein.com/upload.php"; //target path may be local or url var targetPath = imageData; var filename = targetPath.split("/").pop(); var options = { fileKey: "file", fileName: filename, chunkedMode: false, mimeType: "image/jpg" }; $cordovaFileTransfer.upload(url, targetPath, options).then(function(result) { console.log("SUCCESS: " + JSON.stringify(result.response)); alert("success"); alert(JSON.stringify(result.response)); }, function(err) { console.log("ERROR: " + JSON.stringify(err)); alert(JSON.stringify(err)); }, function (progress) { // constant progress updates $timeout(function () { $scope.downloadProgress = (progress.loaded / progress.total) * 100; }) }); }, function(err) { // error console.log(err); }); } 

Este es mi file upload.php:

 <?php // move_uploaded_file($_FILES["file"]["tmp_name"], $cwd . '/fileshttp://sofes.miximages.com'); move_uploaded_file($_FILES["file"]["tmp_name"], "/files/images"); ?> 

Después de algunas excavaciones y muchos bashs, finalmente lo puse en funcionamiento.

Este es el código que se me ocurrió:

 // open PhotoLibrary $scope.openPhotoLibrary = function() { var options = { quality: 50, destinationType: Camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.PHOTOLIBRARY, allowEdit: true, encodingType: Camera.EncodingType.JPEG, popoverOptions: CameraPopoverOptions, saveToPhotoAlbum: false }; $cordovaCamera.getPicture(options).then(function(imageData) { //console.log(imageData); //console.log(options); var image = document.getElementById('tempImage'); image.src = imageData; var server = "http://yourdomain.com/upload.php", filePath = imageData; var date = new Date(); var options = { fileKey: "file", fileName: imageData.substr(imageData.lastIndexOf('/') + 1), chunkedMode: false, mimeType: "image/jpg" }; $cordovaFileTransfer.upload(server, filePath, options).then(function(result) { console.log("SUCCESS: " + JSON.stringify(result.response)); console.log('Result_' + result.response[0] + '_ending'); alert("success"); alert(JSON.stringify(result.response)); }, function(err) { console.log("ERROR: " + JSON.stringify(err)); //alert(JSON.stringify(err)); }, function (progress) { // constant progress updates }); }, function(err) { // error console.log(err); }); } 

Y el código en upload.php en el server de dominio:

 <?php // if you want to find the root path of a folder use the line of code below: //echo $_SERVER['DOCUMENT_ROOT'] if ($_FILES["file"]["error"] > 0){ echo "Error Code: " . $_FILES["file"]["error"] . "<br />"; } else { echo "Uploaded file: " . $_FILES["file"]["name"] . "<br />"; echo "Type: " . $_FILES["file"]["type"] . "<br />"; echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kilobytes<br />"; if (file_exists("/files/".$_FILES["file"]["name"])) { echo $_FILES["file"]["name"] . " already exists. No joke-- this error is almost <i><b>impossible</b></i> to get. Try again, I bet 1 million dollars it won't ever happen again."; } else { move_uploaded_file($_FILES["file"]["tmp_name"],"/var/www/vhosts/yourdomain.com/subdomains/domainname/httpdocs/foldernamehttp://iosberry.com".$_FILES["file"]["name"]); echo "Done"; } } ?> 

la aplicación que estoy creando para una empresa tuvo el mismo problema, lo que hicimos fue publicar la image en nuestro server como una cadena base64. Entonces puede simplemente extraer la cadena de la database y mostrarla en un div. Usamos la camera NgCordova y luego simplemente pasamos los datos de la function takePhoto.

 $scope.takePhoto = function () { $ionicScrollDelegate.scrollTop(); console.log('finetworking camera'); $scope.uploadList = false; $ionicPlatform.ready(function() { var options = { quality: 100, destinationType: Camera.DestinationType.DATA_URL, sourceType: Camera.PictureSourceType.CAMERA, allowEdit: false, encodingType: Camera.EncodingType.PNG, targetWidth: 800, targetHeight: 1100, popoverOptions: CameraPopoverOptions, saveToPhotoAlbum: false }; $cordovaCamera.getPicture(options).then(function (imageData) { $ionicLoading.show({ template: 'Processing Image', duration: 2000 }); $scope.image = "data:image/png;base64," + imageData; if (ionic.Platform.isAndroid() === true) { $scope.Data.Image = LZString.compressToUTF16($scope.image); $scope.Data.isCompressed = 1; } else { $scope.Data.Image = $scope.image; $scope.Data.isCompressed = 0; } if ($scope.tutorial) { $scope.showAlert("Instructions: Step 3", '<div class="center">Now that you have taken a photo of the POD form, you must upload it to the server. Press the upload doc button in the bottom right of the screen.</div>'); } $scope.on('') }, function (err) { console.log(err); }); }, false); }; $scope.UploadDoc = function () { var req = { method: 'POST', url: ffService.baseUrlAuth + 'cc/upload', headers: { 'x-access-token': ffService.token }, data: $scope.Data }; if ($scope.Data.Image === null || $scope.Data.Value === '') { $scope.showAlert("Uh Oh!", '<div class="center">Please take a photo of your document before attempting an upload.</div>'); } else { $http(req).success(function (data, status, headers, config) { localStorage.setItem('tutorial', false); $scope.tutorial = false; $scope.getUploads($scope.PODOrder.OrderNo); $scope.showAlert("Success!", '<div class="center">Your Document has been successfully uploaded!</div>'); $scope.uploadList = true; }).error(function (data, status, headers, config) { $rootScope.$broadcast('loading:hide'); $scope.showAlert("Something went wrong!", '<div class="center">Please make sure you have an internet connection and try again.</div>'); }).then(function(data, status, headers, config){ $scope.Data.Image = null; }); } };