README.md

Opa Binding

• Follow the tutorial: https://github.com/MLstate/opalang/wiki/Hello%2C-reCaptcha%2C-and-the-rest-of-the-world
• Read the source of the demo: https://github.com/MLstate/hello_recaptcha

Note: the demo uses the old bypass syntax, but you can use the new one with opa --js-bypass-syntax jsdoc (we will release it in a future version). Example: https://github.com/MLstate/opalang/blob/master/lib/plugins/opabsl/jsbsl/bslClient.js

3 plugins:

 - filepickerClientOnly.js // functions that works only on the cient side
 - filepicker.js           // functions that can be both on the server and the client side
 - filepicker.nodejs       // just a symlink to filepicker.js:
                           // having a .nodejs file is currently the only way to create a server-side js plugin.
                           // (to be improved later in Opa)

Then:

 - filepicker.opa          // calls Filepicker or FilepickerClientOnly plugins module
                           // the Opa Slicer will automatically compile for the client and server,
                           // and automate the calls between client and server (for example for the setKey function)

Compile:

 $ opa filepickerClientOnly.js filepicker.js filepicker.nodejs filepicker.opa test.opa

test.opa

/**
    The following import automatically add the filepicker <script> tag
    (similar to "import stdlib.themes.bootstrap.css" importing automatically the css)

    => call Resource.register_external_js at top level in the package
*/
import ui.filepicker

/*
    This registers the apiKey on the server side (use Mutable module), on application startup.
    It can also be an application cmd line option.

    The client version of the Filepicker module automatically uses this key.
*/
Filepicker.setKey(apiKey);

function read(fpfile){
    fpfile = {url : fpfile.url, filename : fpfile.data.filename, mimetype: 'text/plain', isWriteable: true, size: 100};
    Filepicker.read(fpfile, function(data){
        Logger.notice("FP", data);
    });
}

function new_files(Dom.event e){
   List.iter(read, e.fpfiles);
}

// input turned automagically into a picker:
function page(){
    <div>
        <h1>Widget test</h1>
        <input onchange={ new_files } type="filepicker" name="myName"/> 
    </div>
}


Server.start(
    Server.http,
    [ { register : { doctype : { html5 } } },
      { title : "Filepicker.io tests", page : page }
    ]
)