Returning original image using NATIVE_URI, instead of stripped copy

[hanssens]

The plugin works great. However, it creates a copy of the image file for further processing. This strips out the original metadata of the image, like the EXIF details. Is it possible to not create a copy, and simply return theCamera.DestinationType.NATIVE_URI instead?

By using the NATIVE_URI, the original file (path) is returned - e.g., assets-library:// on iOS or content:// on Android - and allows processing of the native file, including EXIF data. This has also been fixed in recent Cordova updates, so it's obvious this hasn't been used before.

Ideally, an option like for example useOriginal: true, or the quality: 100 to preserve backwards compatability would be a nice solution in my opinion,.

@wymsee: I'm also interested in digging through the code here a bit, but would love some input if this is advisable (and perhaps a bit of a tip where to fix this). Any tips?

[hanssens]

Sidenote: this proposed feature would perhaps also be a resolution for issue #21? If so, @lembasgithub would perhaps also like to have a look at this as well?

[mrvamsidhar]

Hello, Thanks for providing such a wonderful control. one question from me is, this control provides copy of actual file. Say, I need contents of actual file (like date created). Is there any way to get this?

[enricodeleo]

Any news on this feature?

[pixxio]

Yes! Finally found the solution.

If someone struggles with the lost metadata of the selected images via the ImagePicker plugin, try this awesom plugin:

https://github.com/ratkop/-cordova-imagePickerEx

It's the extended version of the ImagePicker but you get the native URIs AND the optimized URIs.

"The goal was that we needed to use the actual images for upload and the optimized for display on the screen."

Regards, pixxio

[clarklight]

Hi Pixxio, i am wondering how does that imagePickerEx works, because their doc says it returns double the URI, 1 set is the Native, and another set is the Optimized. How can i just use the Native ones?

[pixxio]

Hi clarklight,

the plugin returns an array with native and optimized URIs. The even entries are the originals and the odd entries are the optimized ones. So if you just need the original ones for upload, you could use for example a for-loop with step 2. I hope i could help you.

Regards

[clarklight]

Hi pixxio,

I tried to use the Native, URI to combine with the file-transfer script, it is calling error for file not found. Not sure why. It seems like the URI being called isnt where the file is?

[pixxio]

I'll have a quick check in my code and be right back ;-)

[clarklight]

Thanks, because for some odd reason, mine is returning the correct URI, "the same URI as when i open the image from gallery and click detail - Path". But when i use that combined with the file-transfer script. It gives me an error_code1. File not found when the file size is above a certain size. Then when the size is small, it can upload with no problem.

[pixxio]

file:///storage/emulated/0/myApp/output/de/uploads/Shell.jpg file:///storage/emulated/0/DCIM/Camera/20150628_151735.jpg

The above URIs are two example native URIs i get from the plugin. Both work fine for me.

You said (in the other post) that your URIs look like this: file:///data/data/com.phonegap.testapp/cache/20150706_1917211404084718.jpg file://storage/emulated/0/DCIM/Camera/20150706_1191721.jpg

I think your second URI should work fine if you add an extra "/" after "file://" (i think there must be 3 slashes).

However i dont modify the native URIs for upload...i just take the ones i get from the plugin and add them to cordova upload as "uploadFrom":

This is a slightly modified part of my upload script:

var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = "myTestUpload.jpg";
options.mimeType = "image/jpeg";
options.chunkedMode = false;

var params = {};
params.keywords = 'mobile,upload';
options.params = params;

var transfer = new FileTransfer();
transfer.upload(
    "file:///storage/emulated/0/DCIM/Camera/20150628_151735.jpg",
    encodeURI('PATH/TO/MY/UPLOADSCRIPT'),
    function(response) {
        console.log('it worked!');
    },
    function(error) {
        console.log('ERROR FILEUPLOAD');

    console.log("An error has occurred: Code = " + error.code);
    console.log("upload error source " + error.source);
    console.log("upload error target " + error.target);
    },
    options
);

[clarklight]

Yer my upload script is basically like yours, but some reason, it isnt uploading when the size is just above 700kb, and 1.2mb on another phone, the size seems to be different for different phones.

Here is my script

 window.imagePicker.getPictures(
   function(results) {
      for (var i = 0; i < results.length; i++) {

        alert(results[i]);

        var imageURI =results[i];
   var options = new FileUploadOptions();
    options.fileKey = "file";
    options.fileName = "myTestUpload.jpg";
        options.mimeType = "image/jpeg";
        options.chunkedMode = false;
        var params = new Object();
     options.params = params;

     var ft = new FileTransfer();

      ft.upload(imageURI, encodeURI('http://test.com/setImage'), win, fail,
    options);

     function win(r) {

          alert("Response = " + r.response);

       }

    function fail(error) {
   alert("An error has occurred: Code = " + error.code);
    alert("upload error source " + error.source);
    alert("upload error target " + error.target);
  }

    }
}, function (error) {
    console.log('Error: ' + error);
}

);

[pixxio]

This is completely untested code, but maybe it helps you:

window.imagePicker.getPictures(
  function(results) {
    console.log('start!');
        function loopThroughImages(i) {
            if (i < results.length) {
                var origURI = results[i];
                var tmpURI = results[i+1];

                var options = new FileUploadOptions();
                options.fileKey = "file";
                options.fileName = "myTestUpload_"+i+".jpg";
                options.mimeType = "image/jpeg";
                options.chunkedMode = false;

                var params = {};
                params.keywords = 'mobile,upload';
                options.params = params;

                var transfer = new FileTransfer();
                transfer.upload(
                    origURI,
                    encodeURI('PATH/TO/MY/UPLOADSCRIPT'),
                    function(response) {
                        console.log('it worked!');

                            i = i+2;
                            loopThroughImages(i);
                    },
                    function(error) {
                        console.log('ERROR FILEUPLOAD');
                        console.log("An error has occurred: Code = " + error.code);
                        console.log("upload error source " + error.source);
                        console.log("upload error target " + error.target);
                    },
                    options
                );
            }
            else {
                console.log('done!');
            }
        }
        loopThroughImages(0);
  }, function (error) {
    console.log('Error: ' + error);
  }, {
    maximumImagesCount: 50
  }
);

[clarklight]

I just tried it, but still the same problem. I am wondering if there might be a conflict in some of my codes. Did you have to set specific preference in the config.xml?? And running on singletop mode/phonegap 3.7?

[pixxio]

This is my config.xml:

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.pixx.pixxio" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>pixx.io</name>
    <description>
        Upload Helper for pixx.io
    </description>
    <author email="info@pixx.io" href="http://www.pixx.io">
        pixx.io Team
    </author>
    <content src="index.html" />
    <plugin name="cordova-plugin-whitelist" version="1" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>

    <preference name="Fullscreen" value="true" />
    <preference name="Orientation" value="portrait" />

    <icon src="myResources/icons/icon@3x.png" />

        <platform name="android">
            <!-- you can use any density that exists in the Android project -->
            <splash src="myResources/splashscreens/splash@3x.png" density="port-hdpi"/>
            <splash src="myResources/splashscreens/splash@3x.png" density="port-ldpi"/>
            <splash src="myResources/splashscreens/splash@3x.png" density="port-mdpi"/>
            <splash src="myResources/splashscreens/splash@3x.png" density="port-xhdpi"/>
        </platform>

        <platform name="ios">
            <!-- images are determined by width and height. The following are supported -->
            <splash src="myResources/splashscreens/splash@3x.png" width="320" height="480"/>
            <splash src="myResources/splashscreens/splash@3x.png" width="640" height="960"/>
            <splash src="myResources/splashscreens/splash@3x.png" width="768" height="1024"/>
            <splash src="myResources/splashscreens/splash@3x.png" width="1536" height="2048"/>
            <splash src="myResources/splashscreens/splash@3x.png" width="640" height="1136"/>
            <splash src="myResources/splashscreens/splash@3x.png" width="750" height="1334"/>
            <splash src="myResources/splashscreens/splash@3x.png" width="1242" height="2208"/>

            <preference name="BackupWebStorage" value="local"/>
            <preference name="KeyboardDisplayRequiresUserAction" value="false"/>
        </platform>
</widget>

This is my plugin list (cordova plugin ls)

cordova plugin ls
com.synconset.ImagePickerExt 1.0.24 "ImagePickerExt"

I installed the plugin with:

cordova plugin add https://github.com/ratkop/-cordova-imagePickerEx.git

No special settings in config.xml or elsewhere.

[clarklight]

Thanks for the help, i think i will have to break my app apart, and test it bit by bit.

[pixxio]

You're welcome. Maybe you should create a new app, install the plugin, add the platforms, set up a testcase and try it again. Sometimes cordova is f*cked up.

[clarklight]

YUp, thats what i am going to do, just set an index.html that only 1 button which is the multi-image select, and see if it can upload successfully first. Hopefully it will work with just 1 button. Then will figure out what is going on.

[clarklight]

ooo sorry, just 1 quick question, your cordova.file-transfer, what version is that?

My version is 0.4.6.... maybe thats the problem?

I think its something to do with some plugins not up to date, as i am using phonegap build. Because i cant even upload the photo when the app is just 1 button.

[pixxio]

The filetransfer version i'm using is:

cordova-plugin-file-transfer 1.1.0 "File Transfer"

[clarklight]

I am referencing the latest file-transfer now, and just testing with 1 button on a helloworld app, and it is still not working. Wrote to Phonegap forum. Hope they will be able to help me there.

So you have no problem combining the multi-image pickers with an upload script?

[pixxio]

Did you use the latest cordova + latest filetransfer + latest imagepickerex? Everything works fine for me...

[clarklight]

Yes, i did, i created a testing app, with just 1 button,latest file-transfer, latest file, Phonegap build 3.7, latest Imagepicker and that upload script, and it still doesnt work.

I checked with my colleagues on the backend, not even the parameters are sending through. Also tested with static Parameters, not even those are sent through either.

[clarklight]

Pixxio, i finally figured out the problem...... It has nothing to do with Transfer or what so ever, it is because if the Image is too large, it uses up the InApp memory, and that crashes the Plugins. But not the app. So then the plugin does not return anything, and says file not found. I set a specific width/height, and now it all works fine. Thanks for trying to help me, really appreciate it!

[DanceSC]

Should I have ImagePicker 1.0.7 installed? Whenever I try to install ImagePickerEx it gives me an error

[pixxio]

@DanceSC Why would you want to have ImagePicker 1.0.7 installed if you want to use ImagePickerEx? If you could provide a bit more information, I am sure the developers can help you ;-) Which Cordova/Phonegap Version? Which command did you use? What does the error look like?

Try providing as many details as possible...

I think your problem belongs to the ImagePickerEx site (https://github.com/ratkop/-cordova-imagePickerEx). Maybe you should open a new issue if you think that the error is not on your site

[DanceSC]

@pixxio I was unaware that ImagePickerEx existed when I first installed ImagePicker and then found out that the FileTransfer Upload does not work with ImagePicker. The documentation says nothing about removing one or the other, just that it is an 'add-on'.

I believe I am using Cordova 4.0.2 I have tried a bunch of variations but here is the steps that I took and the errors I got when I uninstall ImagePicker and then install ImagePickerEx:

cordova plugin add https://github.com/ratkop/-cordova-imagePickerEx.git (If I remove ImagePicker first, the command prompt doesn't give me any errors)

However when I open Android Studios I get an error on this line: "missing one of the key attributes 'action#name category#name' on element.." in AndroidManifest.xml

    <activity android:label="@string/multi_app_name" android:name="com.synconset.MultiImageChooserActivity" android:theme="@android:style/Theme.Holo.Light">
        <intent-filter />
    </activity>

If I remove <intent-filter /> It allows me to launch the app and open up the gallery, however I am unable to press the OK button

The "android:theme="@android:style/Theme.Holo.Light" underlines with an error that says to set my minsdk version to 11 or greater. When I do that the warning goes away but the OK button still doesn't work.

I'll paste this on there too.

[pixxio]

@DanceSC check this out:

Did you try to select > 20 Images? If not, this may be the solution: https://github.com/ratkop/-cordova-imagePickerEx/issues/5

An other issue might be that imagePickerEx is no compatible with your cordova version.

[DanceSC]

@pixxio Thank you! I removed both cases of the && fileNames.size() > 19 and it now works.

[DanceSC]

@pixxio I am trying to use both imageURI's and my php page print_($_FILES) returns empty both times. Any Idea? ft.upload("file:///storage/emulated/0/Pictures/Instagram/IMG_123123123.jpg", "http://website.com/dir/upload", win, fail, options)

[pixxio]

@DanceSC As said, i think you should not post your problems with ImagePickerEx in this repository. Maybe the developers of ImagePickerEx can help you. Post your issues here: https://github.com/ratkop/-cordova-imagePickerEx/issues

[lopradi]

@DanceSC you have to update the updateAcceptButton method of MultiImageChooserActivity.java to enable if there are images selected. This is the code that works:

private void updateAcceptButton() {

    ((TextView) getActionBar().getCustomView().findViewById(fakeR.getId("id",  "actionbar_done_textview"))).setEnabled(fileNames.size() != 0);

    getActionBar().getCustomView().findViewById(fakeR.getId("id", "actionbar_done")).setEnabled(fileNames.size() != 0 );        

}