14

I am doing project in android phonegap and I want to upload pic to the server.

But I am not getting idea, where should I put this code.

I can't show any buttons to upload photos, please help.

I am new in this. I refereed this code from phonegap documentation.

I am trying this for hours, but can't get the better solution.

It's my first android phonegap project.

Code:

 <head> <script type="text/javascript" charset="utf-8" src="cordova-2.4.0.js"></script> <script type="text/javascript" charset="utf-8"> document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { navigator.camera.getPicture(uploadPhoto, function(message) { alert('get picture failed'); }, { quality: 50, destinationType: navigator.camera.DestinationType.FILE_URI, sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY } ); } function uploadPhoto(imageURI) { var options = new FileUploadOptions(); options.fileKey="file"; options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1); options.mimeType="image/jpeg"; var params = {}; params.value1 = "test"; params.value2 = "param"; options.params = params; var ft = new FileTransfer(); ft.upload(imageURI, encodeURI("http://some.server.com/upload.php"), win, fail, options); } function win(r) { console.log("Code = " + r.responseCode); console.log("Response = " + r.response); console.log("Sent = " + r.bytesSent); } function fail(error) { alert("An error has occurred: Code = " + error.code); console.log("upload error source " + error.source); console.log("upload error target " + error.target); } </script> </head> <body> <h1>Example</h1> <p>Upload File</p> </body>
Improve this question
1
  • 1
    Error: Can't find variable: FileUploadOptions Commented Apr 28, 2014 at 13:00

5 Answers 5

Reset to default
10

You solve your problem using the next code:

<script type="text/javascript"> function uploadFromGallery() { // Retrieve image file location from specified source navigator.camera.getPicture(uploadPhoto, function(message) { alert('get picture failed'); }, { quality: 50, destinationType: navigator.camera.DestinationType.FILE_URI, sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY } ); } function uploadPhoto(imageURI) { var options = new FileUploadOptions(); options.fileKey="file"; options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1)+'.png'; options.mimeType="text/plain"; var params = new Object(); options.params = params; var ft = new FileTransfer(); ft.upload(imageURI, encodeURI("http://some.server.com/upload.php"), win, fail, options); } function win(r) { console.log("Code = " + r.responseCode); console.log("Response = " + r.response); console.log("Sent = " + r.bytesSent); } function fail(error) { alert("An error has occurred: Code = " + error.code); console.log("upload error source " + error.source); console.log("upload error target " + error.target); } </script> </head> <body> <a data-role="button" onClick="uploadFromGallery();">Upload from Gallery</a> </body>

See more info on this post: https://stackoverflow.com/a/13862151/1853864

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Thanks. Its correctly worked out. But we need to upload multiple images. Please give me a idea to upload multiple images using this cordova file transfer.
Sorry bro :( I can't help you but I think you cannot upload multiple images using file transfer. When I found this solution, I used a plugin and some native code to Android and iOS.
i am also facing the similar issue but not able to fix it. can you please check this question stackoverflow.com/questions/40514847
Dear Sathiyaraj, for multiple image u can use this link its working 100% stackoverflow.com/questions/29405404/…
5

Try the following code.

// A button will call this function // To capture photo function capturePhoto() { // Take picture using device camera and retrieve image as base64-encoded string navigator.camera.getPicture(uploadPhoto, onFail, { quality: 50, destinationType: Camera.DestinationType.FILE_URI }); } // A button will call this function // To select image from gallery function getPhoto(source) { // Retrieve image file location from specified source navigator.camera.getPicture(uploadPhoto, onFail, { quality: 50, destinationType: navigator.camera.DestinationType.FILE_URI, sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY }); } function uploadPhoto(imageURI) { //If you wish to display image on your page in app // Get image handle var largeImage = document.getElementById('largeImage'); // Unhide image elements largeImage.style.display = 'block'; // Show the captured photo // The inline CSS rules are used to resize the image largeImage.src = imageURI; var options = new FileUploadOptions(); options.fileKey = "file"; var userid = '123456'; var imagefilename = userid + Number(new Date()) + ".jpg"; options.fileName = imagefilename; options.mimeType = "image/jpg"; var params = new Object(); params.imageURI = imageURI; params.userid = sessionStorage.loginuserid; options.params = params; options.chunkedMode = false; var ft = new FileTransfer(); var url = "Your_Web_Service_URL"; ft.upload(imageURI, url, win, fail, options, true); } //Success callback function win(r) { alert("Image uploaded successfully!!"); } //Failure callback function fail(error) { alert("There was an error uploading image"); } // Called if something bad happens. // function onFail(message) { alert('Failed because: ' + message); }

Create a button in your HTML page, on it's onclick event call following functions as per your requirement.

  • Call capturePhoto() function to capture and upload photo.
  • Call getPhoto() function to get image from gallery.

HTML should contain a buttons like:

<input name="button" type="button" onclick="capturePhoto()" value="Take Photo"/> <input name="button" type="button" onclick="getPhoto();" value="Browse" />

Hope that helps.

Improve this answer

3 Comments

how, where and when to call uploadPhoto(imageURI) function and what will be the value in imageURI parameter ???
@jolly.exe uploadPhoto() get's called automatically in capturePhoto() success callback and the imageURI will be sent automatically. You do not have to call it explicitly anywhere.
i am also facing the similar issue but not able to fix it. can you please check this question stackoverflow.com/questions/40514847
0

This is one sample application which I did to upload a pic to server

function getphoto() { navigator.camera.getPicture(uploadPhoto, function(message) { alert('get picture failed'); }, { quality: 10,destinationType:navigator.camera.DestinationType.FILE_URI,sourceType:navigator.camera.PictureSourceType.PHOTOLIBRARY }); } function uploadPhoto(imageURI) { alert("imageURI: " + imageURI); document.getElementById("myimg").src = imageURI; alert("imageURI : " + imageURI); var options = new FileUploadOptions(); options.chunkedMode = false; options.fileKey = "recFile"; var imagefilename = imageURI; options.fileName = imagefilename; options.mimeType = "image/jpeg"; var ft = new FileTransfer(); ft.upload(imageURI, "http://192.168.5.109:86/YourService.svc/SaveImage", win, fail, options); } function win(r) { alert("Sent = " + r.bytesSent); } function fail(error) { switch (error.code) { case FileTransferError.FILE_NOT_FOUND_ERR: alert("Photo file not found"); break; case FileTransferError.INVALID_URL_ERR: alert("Bad Photo URL"); break; case FileTransferError.CONNECTION_ERR: alert("Connection error"); break; } alert("An error has occurred: Code = " + error.code); }

Hope this helps

Thanks AB

Improve this answer

3 Comments

plz proive me some buttons to call dis upload function
Bind that function to some button ! Create one ! ;)
sry got two errors...photo file not found...and code=error code 1
0

Well, It's work for me.

trustAllHosts: Optional parameter, defaults to false. If set to true, it accepts all security certificates. This is useful since Android rejects self-signed security certificates. Not recommended for production use. Supported on Android and iOS. (boolean)

The last parameter add true how boolean.

Before

var ft = new FileTransfer(); ft.upload(fileURL, encodeURI("http://some.server.com/upload.php"), win, fail, options);

After

var ft = new FileTransfer(); ft.upload(fileURL, encodeURI("http://some.server.com/upload.php"), win, fail, options, true);
Improve this answer

Comments

0

enter link description here

This is a link for 100% working method for uploading multiple image to server via cordova or phonegap function using html java script

Multiple Image upload to server in Cordova

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.