Reputation: 33
I created a page to take an image or select an image from phone gallery and works normally, but i want to upload this photo selected to my server on Godaddy. I used Cordova file transfer to upload, install file transfer by command line :
cordova plugin add https://github.com/apache/cordova-plugin-file-transfer.git
and I put a small code to upload this photo but no message alert(No error and no Success).
the code to select an image:
function onPhotoURISuccess(imageURI) {
// Uncomment to view the image file URI
// console.log(imageURI);
// Get image handle
//
var largeImage = document.getElementById('largeImage');
// Unhide image elements
//
largeImage.style.display = 'block';
// Show the captured photo
// The in-line CSS rules are used to resize the image
//
largeImage.src = imageURI;
upload();
}
Code Upload function:
function upload() {
alert('large');
var uploadingImage = document.getElementById('largeImage');
var imgUrl = uploadingImage.src;
window.resolveLocalFileSystemURI(imgUrl, resolveOnSuccess, fsFail);
options = new FileUploadOptions();
// parameter name of file:
options.fileKey = "my_image";
// name of the file:
options.fileName = imgUrl.substr(imgUrl.lastIndexOf('/') + 1);
// mime type:
options.mimeType = "image/jpeg";
params = {val1: "some value", val2: "some other value"};
options.params = params;
ft = new FileTransfer();
ft.upload(fileuri, "http://siencelb.org/raycoding/insurance/avatar", success, fail, options);
}
function resolveOnSuccess(entry) {
fileuri = entry.toURL();
//use fileuri to upload image on server
}
function fsFail(message) {
alert("Error Message: " + message + "Error Code:" + message.target.error.code);
}
I have two buttons first to select an image and put it into div largeImage and this works. second button to upload this image selected Note: the alert('large') is displayed.
Upvotes: 0
Views: 2790
Reputation: 33
I solve my Error and I want to publish it
function takePicture() {
navigator.camera.getPicture(function(uri) {
var img = document.getElementById('camera_image');
img.style.visibility = "visible";
img.style.display = "block";
img.src = uri;
document.getElementById('camera_status').innerHTML = "Success";
}, function(e) {
console.log("Error getting picture: " + e);
document.getElementById('camera_status').innerHTML = "Error getting picture.";
}, {quality: 50, destinationType: navigator.camera.DestinationType.FILE_URI});
}
;
/** * Select picture from library */
function selectPicture() {
navigator.camera.getPicture({quality: 50, destinationType: navigator.camera.DestinationType.FILE_URI, sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY});
}
;
function uploadPicture() { // Get URI of picture to upload
var img = document.getElementById('camera_image');
var imageURI = img.src;
if (!imageURI || (img.style.display == "none")) {
document.getElementById('camera_status').innerHTML = "Take picture or select picture from library first.";
return;
} // Verify server has been entered
server = "upload.php";
if (server) { // Specify transfer options
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);
options.mimeType = "image/jpeg";
options.chunkedMode = false; // Transfer picture to server
var ft = new FileTransfer();
ft.upload(imageURI, server, function(r) {
document.getElementById('camera_status').innerHTML = "Upload successful: " + r.bytesSent + " bytes uploaded.";
}, function(error) {
document.getElementById('camera_status').innerHTML = "Upload failed: Code = " + error.code;
}, options);
}
}
the PHP code of upload.php
<?php
// Directory where uploaded images are saved
$dirname = "/avatar/";
// If uploading file
if ($_FILES) {
print_r($_FILES);
mkdir ($dirname, 0777, true);
move_uploaded_file($_FILES["file"]["tmp_name"],$dirname."/".$_FILES["file"]["name"]);}
?>
Upvotes: 0