TASK: PhoneGap application uploading photos to filepicker.

I managed to use Filepicker within the app.
I managed to use other uploader with native input: http://blueimp.github.io/jQuery-File-Upload/
What didn't manage though is to upload to Filepicker using native (for iOS6) input type="file"

<!DOCTYPE html>
<html>
    <head>
        <title>Filepicker PhoneGap iOS6</title>
    </head>

    <script type="text/javascript" src="cordova-2.2.0.js"></script>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="ChildBrowser.js"></script>
    <script type="text/javascript" src="filepicker.js"></script>
    <script type="text/javascript">

    function useFilepicker() {
        /* snippet from: http://stackoverflow.com/questions/13369249/filepicker-io-with-phone-gap-on-ios/14525181#14525181 */      
        cb = window.plugins.childBrowser;
        if(cb!=null){
            cb.onLocationChange = function(loc){
                if (loc != "about:blank"){
                    console.log(loc);
                    if(loc.indexOf("fpurl") > -1) {
                        cb.close();
                    }
                    var n = loc.split("fpurl=");
                    fpurl = n[1];
                    alert(fpurl);
                }
            };
            cb.showWebPage("https://www.filepicker.io/dialog/open/?m=image/*&key=______YOUR_KEY_HERE______&referrer=&modal=false&redirect_url=https://www.filepicker.io/dialog/phonegap_done/");
        }
    }

    $(function(){
     $("input#file").on("change", function() {
        ("textarea#base64").val($(this).val());

        /* _____WHAT TO PUT HERE_____ */

     });
    });

    </script>

    <body>
    <h3>function calling Filepicker API</h3>
    <a href="#" onClick="useFilepicker(); return false">Use Filepicker</a> 
    <!-- this works, but user experience suffers - I don't want to open extra window, I would like to have take photo / choose existing -->


    <h3>input type=&quot;filepicker&quot;</h3>
    <input type="filepicker"/>
    <!-- Doesn't work, created issue here: https://github.com/Filepicker/filepicker-phonegap/issues/1 -->

    <h3>input type=&quot;file&quot;</h3>
    <form action="_____WHAT TO PUT HERE_____">
        <input id="file" type="file"/>
    </form>
    <textarea id="base64">Here c:/fakepath/image.jpg path with be</textarea>

    </body>
</html>

Note: this code uses ChildBrowser plugin, you may want to follow these instructions: https://github.com/alunny/ChildBrowser/issues/28#issuecomment-15941458

Extra points: how to use library like - https://gokercebeci.com/dev/canvasresize (plugin for client side image resizing) to reduce filesize before transmiting data using fleaky 3G connection?

Thank you in advance for any suggestions ans support.

回答1:

You can use the filepicker.store function to store native input types, for instance:

var input = document.getElementById("my-file-input");
filepicker.store(input, {location:'S3'}, function(fpfile){
    console.log(JSON.stringify(fpfile));
});

回答2:

Here is a minimal snippet that works (uploading large photos take time and there is no progress bar so be patient)

<!DOCTYPE html>
<html>
    <head>
        <title>Filepicker PhoneGap iOS6</title>
    </head>

    <script type="text/javascript" src="cordova-2.2.0.js"></script>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="filepicker.js"></script>
    <script type="text/javascript">

    filepicker.setKey('l5uQ3k7FQ5GoYCHyTdZV'); // No worries: used filepicker's

    $(function(){

     $("input#file").on("change", function() {

        filepicker.store(this, {location:'S3'}, function(fpfile){

            $("<a>", {
                href: fpfile.url,
                text: "See me!"
            }).appendTo("body");

        });
     });
    });
   </script>

    <body>
        <input id="file" type="file"/>
    </body>
</html>