Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Provide documentation #26

Open
cburgmer opened this issue May 17, 2013 · 6 comments
Open

Provide documentation #26

cburgmer opened this issue May 17, 2013 · 6 comments

Comments

@cburgmer
Copy link

Please provide documentation, something like that here

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

to indicate how to use this library.
@cburgmer
Copy link
Author

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.

@jayarjo
Copy link
Contributor

jayarjo commented May 25, 2013

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.

@jayarjo
Copy link
Contributor

jayarjo commented May 25, 2013

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

@eagsalazar
Copy link

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.

@jonpacker
Copy link

+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?!)

@reinaldoarrosi
Copy link

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

@irbian irbian mentioned this issue Aug 5, 2017
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@cburgmer @jayarjo @eagsalazar @jonpacker @reinaldoarrosi