Caricamento di immagini app ioniche dalla fotocamera/libreria fotografica

Question

Sto lavorando a un'app di chat ionica in cui l'utente può caricare una foto come parte del messaggio. Sto cercando un modo per caricare l'immagine sul mio server webhost in modo che possa recuperarla in un secondo momento tramite un URL.

Il problema è che non riesco a farlo caricare sul mio server web.

sto usando questi due plugin:

• org.apache.cordova.file trasferimento
• Cordova-plugin-fotocamera

Quando eseguo l'applicazione in simulatore di Xcode e selezionare una foto dalla libreria del dispositivo, la console mi dà i seguenti messaggi:

• 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: ""

Questo è il codice che attualmente uso:

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); 
     }); 
    } 

Questo è il mio file upload.php:

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

Answer 1

Dopo un po 'di scavo intorno e il lotto di provare finalmente ho capito di lavoro.

Questo è il codice mi si avvicinò con:

// 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); 
     }); 
    } 

E il codice nel upload.php sul server di 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/foldername/images/".$_FILES["file"]["name"]); 
    echo "Done"; 
    } 
} 
?> 

Answer 2

app Sono buildi ng per una società aveva lo stesso problema, quello che abbiamo fatto è che abbiamo appena postato l'immagine sul nostro server come una stringa base64. Quindi puoi semplicemente estrarre la stringa dal database e visualizzarla in un div. Abbiamo usato la fotocamera NgCordova e quindi abbiamo appena passato i dati dalla funzione takePhoto.

$scope.takePhoto = function() { 
      $ionicScrollDelegate.scrollTop(); 
      console.log('fired 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; 
       }); 
      } 
     };