ios - mis - icloud para windows

Carga de imágenes de aplicaciones iónicas desde la cámara/biblioteca de fotos

Question

Estoy trabajando en una aplicación de chat iónico donde el usuario puede cargar una foto como parte de su mensaje. Estoy buscando una forma de cargar la imagen a mi servidor de alojamiento web para poder recuperarla más tarde a través de una URL.

El problema es que no puedo hacer que se cargue en mi servidor web.

Estoy usando estos dos complementos:

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

Cuando ejecuto la aplicación en el simulador de xcode y selecciono una imagen de la fotolibrería del dispositivo, la consola me da los siguientes mensajes:

• 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 uso 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 archivo upload.php:

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

Answer 1

Después de un poco de excavación y de intentarlo, finalmente lo hice funcionar.

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 servidor 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/foldername/images/".$_FILES["file"]["name"]);
echo "Done";
}
}
?>

Answer 2

La aplicación que estoy creando para una empresa tuvo el mismo problema. Lo que hicimos fue publicar la imagen en nuestro servidor como una cadena base64. Luego puede simplemente extraer la cadena de la base de datos y mostrarla en un div. Usamos la cámara NgCordova y luego pasamos los datos de la función 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;
});
}
};