Please provide documentation, something like that here <a href="http

Better documentation for FileInput : <a href="https://

Provide documentation about moxie HOT 6 OPEN

moxiecode commented on September 16, 2024

Provide documentation

from moxie.

Comments (6)

cburgmer commented on September 16, 2024

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.

from moxie.

jayarjo commented on September 16, 2024

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.

from moxie.

jayarjo commented on September 16, 2024

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

from moxie.

eagsalazar commented on September 16, 2024

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.

from moxie.

jonpacker commented on September 16, 2024

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

from moxie.

reinaldoarrosi commented on September 16, 2024

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

from moxie.

Provide documentation about moxie HOT 6 OPEN

Comments (6)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent