moxie Provide documentation

Please provide documentation, something like that here

https://github.com/moxiecode/plupload2/blob/master/examples/custom.html

to indicate how to use this library.

May 17 '13 11:05 cburgmer

Here's my take on a polyfill usage with Flash fallback for IE < 10:


<!DOCTYPE HTML>
<html>
<head>
    <meta charset='utf-8'/>
    <script type="text/javascript" src="lib/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="lib/moxie.js"></script>
    <script>
    $(function () {
        window.mOxie.Env.swf_url = "lib/Moxie.min.swf";

        if (!window.FileReader) {
            window.FileReader = mOxie.FileReader;
            window.XMLHttpRequest = mOxie.XMLHttpRequest;
            window.getFile = function (file) {
                return file;
            };
        } else {
            window.getFile = function (file) {
                return file.getSource();
            }
        }

        var ajax = function (method, url, data, successCallback, errorCallback) {
            var ajaxRequest = new XMLHttpRequest();
            ajaxRequest.onload = function () {
                if (ajaxRequest.status === 200 || ajaxRequest.status === 0) {
                    successCallback(ajaxRequest.response);
                } else {
                    errorCallback(ajaxRequest.status);
                }
            };

            ajaxRequest.onerror = function (e) {
                errorCallback(e);
            };

            ajaxRequest.open(method, url, true);
            ajaxRequest.setRequestHeader('Content-Type', 'application/octet-stream');
            ajaxRequest.send(data);
        };

        var showPreview = function (file, elem) {
            var $elem = $(elem);

            var reader = new FileReader();
            var img = document.createElement("img");

            img.onload = function () {
                console.log(img);
                $elem.append(img);
            };
            reader.onload = function (e) {
                img.src = e.target.result;
            };

            reader.readAsDataURL(file.getSource());
        };

        fileInput = new mOxie.FileInput({
            browse_button: "button"
        });
        fileInput.onchange = function (e) {
            var file = e.target.files[0];

            showPreview(file, "#preview");

            ajax("post", "/something", getFile(file), function () {
                console.log("success");
            }, function (e) {
                console.log("error", JSON.stringify(e));
            });
        };
        fileInput.init();
    });
    </script>
</head>
<body>
    <div id="button">The button</div>
    <div id="preview"></div>
</body>
</html>

What's in here?

Adding mOxie elements to the window overwriting the default implementations if any
Registering the source of the Flash fallback globally
FileInput that allows theming of the "input field" (not necessary in HTML5 mode if you don't need theming) and finally preview and upload for HTML5 support and for fallback.

What I don't like is the need for the getFile() method to work around the fact that for the HTML5 case file is not a HTML5 File instance.

May 22 '13 16:05 cburgmer

That's quite an in-depth take on mOxie I'd say. getFile() definitely ruins the joy, but for now it's the only way to have it all straight. Suggestions are always welcome.

One thing that we could do though and I even think that was meant to work (need to check) is to use mOxie wrappers for FileReader and XMLHttpRequest in all cases, be there native FileReader or XMLHttpRequest or not. Internally those wrappers will use native facilities (if those are available) anyway.

May 25 '13 07:05 jayarjo

Better documentation for FileInput: https://github.com/moxiecode/moxie/wiki/File-Picker

May 25 '13 10:05 jayarjo

The linked documentation is missing critical bits, especially how to set the swf_url. Without this example from @cburgmer this would have been very hard to figure out. Also would be good to explain at a high level that if you are using any one of these polyfills, you probably have to use them all because the File objects that get passed around are of the wrong type otherwise.

Jun 04 '13 08:06 eagsalazar

+1, it's nigh on impossible to discover how to use moxie with the current documentation. this issue is the only thing that has given me hints. there's currently nothing documenting how to get started, how to run tests, etc, in the documentation. this makes contributing and writing meaningful issues very difficult because it's impossible to know if you're hitting a bug or if you're just missing something that was undocumented (expected behavior and usage is completely undocumented as of now?!)

Nov 05 '13 12:11 jonpacker

I've created a simple API on top of moxie to help (at least it does help ME) working with file uploads and upload queues. So, until we can get better documentation on moxie, feel free to take a look (test, pull request, etc...) at https://github.com/reinaldoarrosi/fileupload

Dec 10 '13 16:12 reinaldoarrosi