File upload with F7 using cordova cordova-plugin-camera 4.0.3, file upload is always null

1

I am using cordova with phonegap to upload camara images to my app so user can select from gallery or camara roll, the problem is:

the posted file is always null :frowning: i tried all options and all the time the same problem!

here my code

using cordova upload camara plugin i create the following method: openFilePicker

  openFilePicker: function (selection) {

var srcType = Camera.PictureSourceType.SAVEDPHOTOALBUM;
var options = this.setOptions(srcType);
var func = this.createNewFileEntry;

navigator.camera.getPicture(function cameraSuccess(imageUri) {

    console.log(imageUri); // image path is printed OK!

//showing the the console: file:///var/mobile/Container/Data/Applications/377050-7113-4519-9ACB-3C85B1FC6385/tmp/cdv_photo_006.jpg

            app.request( {
            url: serverPath+"_g.up.php", //here I call the php file to upload the file
            dataType: "application/json",
            method: "POST",           
            cache: false,
            contentType: false, //using false or multipart.... no difference
            processData: false, // using true or false no any difference
            data : {file:imageUri}, 
            crossDomain: true, 
            preloader: true,
            statusCode: {
                404: function(xhr) {
                    console.log('page not found');
                }
            },
            beforeSend: function() {
                console.log('beforeSend');
            },
            complete: function() {
                console.log('complete');
            },
            success: function(response) {
                console.log('success');
                console.log(response); 

            },
            error: function(xhr) {
                console.log('error');
                console.log(xhr.status);
                console.log(xhr.code);
            }
        });




}, function cameraError(error) {
    console.debug("Unable to obtain picture: " + error, "app");

}, options);

},

the php code

header(‘Access-Control-Allow-Origin: *’);
$images = $_FILES[“file”][“name”];
echo json_encode(array(“status”=>$images)); // always $images is null

//print_r(json_encode($_FILES)); // always $images is null
$new_image_name = urldecode($_FILES[“file”][“name”]).".jpg";
move_uploaded_file($_FILES[“file”][“tmp_name”], “upload/”.$new_image_name);

phonegap console:

file:///var/mobile/Container/Data/Applications/377050-7113-4519-9ACB-3C85B1FC6385/tmp/cdv_photo_006.jpg
_g.up.php
beforeSend
success
{“status”:null}
complete

any ideas what I am doing wrong? why the $_FILES[“file”] is always null? :frowning:

thanks

2

https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file-transfer/

3

I had this problem too. Assuming you’re doing things according to the plugin instructions, make sure your server upload size limit is set high enough. I am using php for my server side upload. There is a setting in php.ini that sets the size limit.

1 Like
4

thanks I just verified this and images are very small!!! same problem if you find a solution to this issue let me know!!

thanks a lot for replying

5

Check if you are really sending a binary data?
Maybe make test with a string or base64 and see if it works?

1 Like
6

OK I will do that then thanks! :slight_smile: let you know if working…

7

Do you have a working no error sample you have tested ?

8

First test: Try to open the image in the inAppBrower if it shows up then you know you have the image

var ref = cordova.InAppBrowser.open('pathToYour.jpg', '_blank', 'location=yes');

In my app its bite different I take a picture then put in a canvas, edit it then make a base64 and send it back to the server.

This takes the image from the camera then adds it to the canvas tag then turns it into a base64.

<!- -add the canvas tag to the html doc -->
<canvas id="canvas-id"></canvas>

function onSuccess(imageData) {
 let ctx = document.getElementById(canvas-id).getContext("2d");
 let newWidth = $$(window).width();
 let newHeight = newWidth / 0.75;
 //only if you are using cordova-plugin-ionic-webview plugin use this slice method
 //let image = imageData.slice(7);
 //else just use imageData
 let image = imageData;

 //Add the image to the canvas
 let img = new Image();
 img.src = image;
 img.onload = function() {
   ctx.drawImage(img, 0, 0, newWidth, newHeight); 
 };
}

Get the base64

let base64Img = document.getElementById(canvas-id).toDataURL("image/jpeg", 0.5);
//send base64Img back to the server.

Hope it helps!

1 Like
9

thanks i will try to do some tests too :slight_smile: