moxiecode/moxie

Pollyfills for XHR2 and File API

mOxie

mOxie is combined name for XHR2 and File API pollyfills that we've extracted from Plupload in order to make it more flexible and give it opportunity for further growth. But now that pollyfills are separate, they can be used independently.

XHR2 and File API pollyfills are multi-runtime, which means that they will fallback to Flash and SilverLight (additionally there's Java runtime in production) or even "good old" HTML4, when there are no HTML5 capabilities found in current browser.

Table of Contents

• Building Instructions
  • Prerequisites
  • Compile JavaScript
  • Compile Flash
  • Compile Silverlight
  • Generate API Documentation
  • Build Packages
• Getting Started
• API Reference
• Support
• Contribute
• License

Building Instructions

It may sound a bit odd, but the best building environment for mOxie is Windows computer. Mainly because it is not currently possible to build Silverlight component on alternative platforms. There used to be a Moonlight project, which was meant to fill in the gap for *nix systems, but there was no noticeable activity on the site since 2009, its feature-set has freezed somewhere in the mid-Silverlight 4, and more importantly, a component that is produced after compilation is not exactly a Silverlight component, hence the alternative name and all the compatibility issues in the latest browsers.

So, although these instructions are quite generic, they still have Windows workstation in mind. If you do not have Windows workstation, you can easily virtualize one.

Prerequisites

The best way to start is to clone the mOxie repository, with all it's submodules:

git clone --recursive https://github.com/moxiecode/moxie.git

Building environment is based on Node.js, mainly because it is cool and easy, but even more importantly, because it is powered by JavaScript (we love JavaScript :). Node.js binaries (as well as Source) are available for all major operating systems.

In addtion to Node.js some additional modules are required, simply change your working directory to where you have extracted mOxie package and run: npm install. All dependencies will be downloaded and installed automatically.

Note: currently for unknown reason, locally installed Node.js modules on Windows, may not be automatically added to the system PATH. So if jake commands below are not recognized you will need to add them manually:

set PATH=%PATH%;%CD%\node_modules\.bin\

Compile JavaScript

Plupload runtimes - the main source for these pollyfills historically came in monolithic state. Nothing could have been added to them or removed. This wasn't convenient enough, since not everybody required all the functionality and resulting JS file still got quite big for mere file uploader. Taking this into account we made pollyfills granular. There are still some internal dependencies that cannot be broken, but several big components (such as image manipulation logic, for example) can easily be separated now.

Basic JavaScript compiler can be invoked with: jake mkjs. It will compile all the components and runtimes into several versions of one monolithic moxie.js file (minified and development versions among them). Results will be written to bin/js.

But as I mentioned it doesn't have to be monolithic anymore and you can include only the parts that you require. For example basic file uploader, without progress indication support can get as small as 12kb gzipped. In order to leverage that granularity you must invoke JavaScript compiler with the list of components that you absolutely want to use and list of runtimes to fallback to. For example:

jake mkjs[file/FileInput,xhr/XMLHttpRequest] runtimes=html5,flash

This will compile JavaScript file having support for the file picker and XMLHttpRequest Level 2 pollyfill with two runtimes - HTML5 and Flash (resulting file size ?).

Currently there are only several major components that you should care about (the rest will be pulled in as dependecies automatically). These are:

• file/FileInput
• file/FileDrop
• file/FileReader
• xhr/XMLHttpRequest
• image/Image

And several runtimes (Java is in production right now):

• html5
• flash
• silverlight
• html4
• googledrive
• dropbox

Use combination of these in jake mkjs to acquire customized JavaScript file.

To compile all available runtimes, run:

jake mkjs runtimes=all

Compile Flash

To build Flash component you will also need Flex 4.x SDK, which is freely available from Adobe site. Flex SDK comes as a package, not binary. So you will have to manually extract it somewhere and ensure that compiler is available across the system. Depending on a platform you might also require to install Java Runtime Environment (JRE). To put Flex compiler (mxmlc) into the system PATH, execute the following in your command-prompt window:

For Windows (we assume here that SDK was extracted to Program Files\flex_sdk_4.x, use your own path if it was different):

set PATH=%PATH%;%PROGRAMFILES%\flex_sdk_4.x\bin

*For nix (replace /opt/flex_sdk_4.x with the path to extracted SDK)

export PATH=$PATH:/opt/flex_sdk_4.x/bin

Although be warned, as this will set the system PATH for current session only, in order to set it forever, check your platform specific documentation.

Once you have it, you can run jake mkswf in your command-prompt, from mOxie directory and corresponding component files will get compiled and written to bin/flash/ directory. There will be two versions: Moxie.swf, which includes client-side image manipulation logic, and Moxie.min.swf, twice as small, but without it.

Compile Silverlight

To build Silverlight component you need .NET Framework 4 and Silverlight 4 SDK (and of course, as we mentioned above, a Windows PC). These are binary packages so you will not have to extract them manually, but you will still need to set the PATH to make compiler (msbuild.exe) available across the system. So after you install both, open your command prompt and type in something like this:

set PATH=%PATH%;%WINDIR%\Microsoft.NET\Framework\v4.x

Make sure that version suffix (v4.x) corresponds to actual .NET Framework version and physical folder where msbuild executable resides. Again be warned, that this will set the system PATH for current session only, in order to set it forever, check documentation specific to your platform.

Once you have msbuild.exe in the system PATH you can run jake mkxap and two Silverlight components will be compiled to bin/silverlight directory: Moxie.xap, a version with image manipulation logic compiled in and much smaller Moxie.min.xap - without it.

Generate API Documentation

JavaScript files contain descriptions for all public classes and methods as well as the examples of their typical usages. All of these informations can be easily extracted into a linked HTML-based API reference (thanks to YUIDoc).

To get the documentation, execute: jake docs. Reference will appear under docs/ folder.

Build Packages

It is also possible to build fully packacged releases, customized or not, zipped and ready to be shared or shipped, containing JS files, Flash/Silverlight shims and documentation.

All of the following commands will generate packages under tmp/ folder.

• jake release - Generates full user and development packages.
• jake package - Generates full user package.
• jake package[comma-separated-list-of-components-to-include] runtimes=comma-separated-list-of-runtimes-to-use (see all available options)

Getting started

You can customize various parameters, such as the path the the Moxie.swf file by changing properties on mOxie.Env after the script is loaded:

<script src="moxie.js"></script>
<script>moxie.core.utils.Env.swf_url = './flash/Moxie.min.swf';</script>

Also see the File Picker example on the wiki.

Support

We are actively standing behind our products. We ask you to file bug reports if you encounter any. We may not react to them instantly, but we constantly bear them in my mind as we extend the code base.

Contributing

We are open to suggestions and code revisions, however there are some rules and limitations that you might want to consider first.

• Code that you contribute will automatically be licensed under the AGPLv3, but will not be limited to AGPLv3.
• Although all contributors will get the credit for their work, copyright notices will be changed to Ephox.
• Third party code will be reviewed, tested and possibly modified before being released.

These basic rules help us earn a living and ensure that code remains Open Source and compatible with AGPLv3 license. All contributions will be added to the changelog and appear in every release and on the site.

License

Copyright 2016, Ephox Released under AGPLv3 License.

moxie's Issues

Add readAsArrayBuffer and drop support for readAsBinaryString

It appears that readAsBinaryString is no longer supported by the HTML5 spec. Although implemented in some browsers (Chrome, Firefox) it will likely be removed in future releases. In addition IE10 was released late enough that they never needed to support it (but they do support readAsArrayBuffer and readAsText and readAsDataURL).

The end result of the current situation is that:

• If I use readAsBinaryString it seems to work most places. But I get an error in IE10 (complaining about the method not existing). I imagine future version of Firefox and Webkit will behave the same.
• If I use readAsArrayBuffer it will work on all modern browsers (including IE10) but it will not work on browsers using the flash fallback since the flash fallback doesn't provide support for readAsArrayBuffer.
• readAsText should work everywhere. But if you plan to use interact with the data you might get issues since it will apply character encoding mojo. I don't need to interact with the data in a meaningful way (just doing a hash of some of the data) so I will probably try this one.
• readAsDataURL also should work everywhere. But since it is base64 encoded I think it will increase the file size by 37% which could affect performance.

Starting upload in plupload2

Hi,

I have a question regarding the new plupload-API.
I do not see a way, to send the uploaded Files.

I used this to successfully instantiate the uploading mechanism:

    uploader = new o.FileInput({
        browse_button: 'pickfiles',
        container: 'container',
        accept: [
            {title: "Image files", extensions: "jpg,gif,png"} // accept only images
        ],
        multiple: true
    }); 

I tried something similar as this:

$('#uploadfiles').click(function() {
    var request = new o.XMLHttpRequest();
    request.open('POST', '/bilder/inline/plupload');
    request.send();
    return false; 
}); 

But nothing happens.

Any suggestions, as how to accomplish a separate fileupload as in the previous plupload version?

Thank you in advance
Markus

html5 runtime does not work in ie 10

it initializes but when i click the container image, file dialog does not open. I think there is an issue with event listener.

Uploading a o.File through o.XMLHttpRequest does not work in IE9

While the following example works well in Chrome, an unspecified error event is returned in IE9.

How to reproduce:
Open the page in the browser and click on "The button" and select a file. Output is logged to the console.

<!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 () {
        var ajax = function (method, url, data, successCallback, errorCallback) {
            var ajaxRequest = new mOxie.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, {
                swf_url: "lib/Moxie.min.swf"
            });
        };

        fileInput = new mOxie.FileInput({
            browse_button: "button",
            swf_url: "lib/Moxie.min.swf"
        });
        fileInput.onchange = function (e) {
            console.log("change", e.target.files[0]);

            ajax("put", "/something", e.target.files[0].getSource(), function () {
                console.log("success");
            }, function (e) {
                console.log("error", JSON.stringify(e));
            });
        };
        fileInput.init();
    });
    </script>
</head>
<body>
    <div id="button">The button</div>
</body>
</html>

Silverlight fixes

I got the latest moxie and plupload code today as I plan to use the HTML5 and Silverlight runtimes for very large (>4gb) file uploads. HTML5 worked, but I had some errors with Silverlight, so I debugged them and this is what I had to do to get it to work for me.

First, when the Blob destroy method is getting called it is getting passed an argument. The current Blob.cs code destroy method does not have any arguments so reflection was unable to locate the method and throwing and error. To fix, all I had to do was change the method to include an argument like public void destroy(object obj=null) and that allowed me to start uploading.

Next, I noticed that while it was uploading silverlight was throwing an NotImplementedException for every Blob that was uploaded. I tracked this down to the XMLHttpRequest _responseCallback method. The line if (response.Headers is WebHeaderCollection) can be changed to if (response.SupportsHeaders && response.Headers is WebHeaderCollection) to prevent these exceptions from being thrown. The exception is thrown as soon as the response.Headers property is accessed when using the BrowserHttp client.

The last issue I found was an integer / long issue that causes an error to occur when silverlight tries to slice a file beyond the int32 limit. This was fixed easily by changing the private Blob _slice(int start, int end, string type) method to private Blob _slice(long start, long end, string type) and this line Blob blob = _slice(Convert.ToInt32(start), Convert.ToInt32(end), (string)type); to Blob blob = _slice(Convert.ToInt64(start), Convert.ToInt64(end), (string)type); in the slice method

Hope this was helpful.

Wrong scope of "self" variable

When the runtime is destroyed, I think it's using "self" variable from "window" scope.
I'm using ExtJS 3.4 which uses "self" as "window.self", and after destroy the uploader some code fails because "window.self" is null.

Maybe, some "var self" is missing.

_uid = self = _shim = shimContainer = null;

Detaching FileInput's <object> from the DOM breaks the uploaded file instance

Context:

I have a mOxie.FileInput() that adds an <object> to the DOM over the "input" element. The user uploads a file that I yield via fileInput.onchange. Browser is IE9.

When I remove the <object> from the DOM the file instance cannot be uploaded anymore via the XHR2 shim. Even when detaching the node and re-adding in the same place the file instance seems broken.

Minimal example (adapted from #28):

<!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 () {
        var ajax = function (method, url, data, successCallback, errorCallback) {
            var ajaxRequest = new mOxie.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, {
                swf_url: "lib/Moxie.min.swf"
            });
        };

        fileInput = new mOxie.FileInput({
            browse_button: "button",
            swf_url: "lib/Moxie.min.swf"
        });
        fileInput.onchange = function (e) {
            console.log("change", e.target.files[0]);

            // Here we de- and re-attach the flash node
            $("object").detach().appendTo(".moxie-shim");

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

In this example no error message is shown, but no POST is triggered. In a different, bigger example, I yield a message

TypeError: Unable to get value of the property 'exec': object is null or undefinedundefined

The behaviour described here can be seen in dynamic applications, where in one view the file is uploaded and in another one is stored to the server. For us this bug breaks the ability to use moxie as a HTML5 File polyfill.

Date comment is not updated on binary files.

I don't know which is your deployment process, but would be useful to update the date when binary files are updated.

moxie/bin/js/moxie.dev.js

Line 11 in 4627caa

* Date: 2013-09-23

Stop propagation on drag events makes impossible to capture these events

I don't know if it's required for you, but if you stop the propagation other components can not observe it.
For example, a custom DropZone UI component.

Zip file has incorrect MIME type

mOxie translates the .zip extension to a MIME type of application/zip, but Chrome internally maps to application/octet-stream and Firefox/IE map to application/x-zip-compressed.

Tested on Chrome 32, Firefox 26 and IE11.

Flash runtime does not write an extra CR/LF to end of the multipart request

I'm attempting to use plupload 2.0 to upload files to a .NET WebAPI server and there is an issue with the Flash runtime not writing an extra CR/LF to end the multipart request. Technically, it's not required, but the .NET WebAPI runtime breaks if the request does not end with a CR/LF (see this issue and this discussion on CodePlex). It doesn't look like they are not going to fix the problem on their end either. 👎

The following is an example request sent from the Flash runtime:

POST http://localhost:38893/api/upload HTTP/1.1
Host: localhost:38893
Connection: keep-alive
Content-Length: 634
Origin: http://localhost:38893
User-Agent: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.110 Safari/537.36
Content-Type: multipart/form-data; boundary=----------gL6cH2GI3GI3Ef1Ij5Ij5cH2gL6KM7
Accept: */*
Referer: http://localhost:38893/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8

------------gL6cH2GI3GI3Ef1Ij5Ij5cH2gL6KM7
Content-Disposition: form-data; name="Filename"

cldbuild02.rdp
------------gL6cH2GI3GI3Ef1Ij5Ij5cH2gL6KM7
Content-Disposition: form-data; name="name"

cldbuild02.rdp
------------gL6cH2GI3GI3Ef1Ij5Ij5cH2gL6KM7
Content-Disposition: form-data; name="file"; filename="cldbuild02.rdp"
Content-Type: application/octet-stream

full address:s:cldbuild02:3389
username:s:Administrator
prompt for credentials:i:1


------------gL6cH2GI3GI3Ef1Ij5Ij5cH2gL6KM7
Content-Disposition: form-data; name="Upload"

Submit Query
------------gL6cH2GI3GI3Ef1Ij5Ij5cH2gL6KM7--

And here is the request using the HTML5 runtime:

POST http://localhost:38893/api/upload HTTP/1.1
Host: localhost:38893
Connection: keep-alive
Content-Length: 412
Origin: http://localhost:38893
User-Agent: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.110 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryqrB60GCabhnOAE2F
Accept: */*
Referer: http://localhost:38893/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8

------WebKitFormBoundaryqrB60GCabhnOAE2F
Content-Disposition: form-data; name="name"

cldbuild02.rdp
------WebKitFormBoundaryqrB60GCabhnOAE2F
Content-Disposition: form-data; name="file"; filename="cldbuild02.rdp"
Content-Type: application/octet-stream

full address:s:cldbuild02:3389
username:s:Administrator
prompt for credentials:i:1


------WebKitFormBoundaryqrB60GCabhnOAE2F--

Both the HTML5 and Silverlight runtimes give that extra CR/LF at the end of the request. Can the Flash runtime be changed to output it as well?

Thanks!

event.target.result is undefined in onload handler for o.FileReader

uploader.bind('FilesAdded', function(up, files){handleImage(files);});

function handleImage(files){

    mOxie.each(files, function(file) { // o is global alias for mOxie
        var reader = new mOxie.FileReader();
        reader.onload = function(event){
            var img = new Image();
            img.onload = function() {
                fabric.Image.fromURL(img.src, function(imag){
                    fBookUserImgLoaded = true;
                    
                    fBookUserImgOrg = imag;
                   
                    imag = img = null;
                    prepImg();
                });
            
            };
            img.src = event.target.result;
        };
        // passing bare file object here, although not always equal to native one used by browser
        reader.readAsDataURL(file.getSource()); 
    });
}

"this way it works with html5 runtime but when i change the runtime to flash or silverlight:
"event.target.result" returns undefined
when i debug the code i see that dataurl is retuned from flash or silverlight with no problem but I couldn't find where exactly event.target.result filled."

Original topic: http://www.plupload.com/punbb/viewtopic.php?pid=9420#p9420

Flash FileInput + Twitter Bootstrap Button Dropdown component not able to get selected file more than once

Hi jayarjo,

I have a fiddle here that attempts to use a mOxie FileInput with its container as a dropdown menu item in a 2.3.2 Twitter Bootstrap Button Dropdown component. The fiddle has steps to reproduce, expected, and actual observations. http://jsfiddle.net/aqxDd/5/

The FileInput in unable to register that it has a file on the second file selection attempt. Given the implementation of the Button Dropdown, the FileInput's container element's parent (ul class="dropdown-menu") will have a display:none style when closed and display:block when open.

I believe the toggling of display:none/display:block may be a clue into the reason the FileInput can't get a file the second time, but I'm unfamiliar with swf objects and how they behave when their display is toggled. I can assure that the swf object is displayed at the time when it is used, but when inactive it is not displayed.

Do you think it's possible to get this type of file selection experience to work with moxie?

Target FP 10.3

Cross-Domain GET Request via Flash Runtime

I'm trying to do a cross-domain GET request via the flash runtime. It makes the request fine and I can see the correct data in my response. The mime type is text/plain. But responseText is blank and responseType is blank. I'll probably dig into this this afternoon but figured I would post a question to see if this is just a limitation on the Flash component or if I should be able to get cross-domain content.

Handle unhandled exceptions in a meaningful way.

For Flash this requires minimum FP10.1.

license related question

i always get confused if license is not MIT or BSD, so my question:
if this project is bundled in python/ruby package for easier integration w/ rails/django/others can it be used in commercial projects?

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.

Safari doesn't support responseType 'blob' for XMLHttpRequest.

...but supports responseType 'arraybuffer' (wtf?). ArrayBuffer can be used to construct a blob and fake responseType 'blob'.

Among other things this will require Blob constructor.

IE 11 browser detenction variables doesn´t set correctly

In IE 11 the object property Env.browser, it doesn´t set correctly; it set to Mozilla.

To solve the issue I change the file src/javascript/core/utils/Env.js; and add the following object to the variable browser
{
s1: navigator.userAgent,
s2: "Trident",
id: "IE",
sv: "rv"
}

HTML5 + Flash Precompiled

The pre-built binaries support all runtimes. But I (and I imagine many others) just want HTML5 (for the latest browsers) and Flash (for the older browser). The other runtimes are unlikely to be used. They seem mostly defunkt:

• Rumors have it that Silverlight will not have a version 6 and version 5 has an end-of-life of 2021.
• Development on Gears has ceased
• BrowserPlus has had no activity for about 2 years (although I can't find any official statement to indicate it is discontinued).

I understand some may have use for the other runtimes so I don't think we need to get rid of them. But I don't think their use is the common case. So I wanted to suggest we also have pre-built binaries for just HTML5 and Flash.

Obviously I can build this myself (and likely will if I don't get any response on this thread). But figured others might hit this same issue and we can save everybody time by not requiring them to compile themselves.

POST with manual file (as in tests) turns into a GET

For testing purposes (see #32) we are using a manually created file for upload via POST, following the example in https://github.com/moxiecode/moxie/blob/master/tests/auto/XHR.html#L458.

However this turns into a GET instead on IE9.

Is there a special code path for defining the AJAX method? Also, is there a simple way for us to execute the test suite? (moxie/tests/js/testrunner.js does not exist when opening moxie/tests.index.html.)

Support Selenium

A feature request. Hope this makes sense.

We use moxie as fallback under IE8/9. Because of the nature of the fallback, we feel we cannot adequately support the implementation with unit tests and would like to run our Selenium-Suite against an instance of IE9 too.

It now seems that uploading a file through the Flash overlay is not easily doable. Would it be possible to provide a simple entry point into the Flash runtime to fake a file upload?

What I'd envision is

fileInput.fakeUpload("fileName", "data:image/png;base64,theFilesContentAsBase64");

I'd look into this myself, but due to the needed bridge into Flash have to pass.

Provide a way to open file dialog programmatically (where possible)

Obviously this won't be possible in non HTML runtimes, but then HTML5 grows bigger and bigger, so it is about time to provide it where it is supported.

Upload URL misparsed by parseUrl regex

src/javascript/core/utils/Url.js

Consider the invalid data structure created from a URL of the form...

https://host.domain.tld/[email protected]/folder

{
"path": "/folder",
"host": "b.c",
"user": "host.domain.tld/a",
"scheme": "https",
"source": "https://host.domain.tld/[email protected]/folder"
}

contrast that with a working one created from the URL...

https://host.domain.tld/name/folder

{
"path": "/name/folder",
"host": "host.domain.tld",
"scheme": "https",
"source": "https://host.domain.tld/name/folder"
}

Safari & Html5

Hi,
I had an issue with safari 5.1.7(7534.57.2). The library work like there is support for html5 FileReader, but safari fails to provide one(I think the library should fallback to flash, but it doesn't). I couldn't spend more time to find proper fix for my problem, so I made dirty fix by changing the order of the Runtimes.

Runtime.order = 'flash,html5,silverlight,html4';

Still I am not sure if this is an actual issue or I made some mistake. I admire you for the effort and the great design. If there is something I can help with please contact me.

Flash's Image.getAsDataURL taking 9.5 seconds and returning null for 2448 × 3264 jpeg image

Is there any known issues with larger files (my specific image example is a photo from a iphone 4 camera) and the Flash Image APIs? getAsDataURL is returning null and taking 9.5 seconds to do so. Is getAsDataURL() async and there's some event I should bind a callback for?:

#2448 × 3264 jpeg with EXIF orientation 6
reader started
reader finished loading 0.43199992179870605 seconds
image finished loading 0.8690001964569092 seconds
image finished resizing 0.4009997844696045 seconds
finished img.getAsDataURL 9.52400016784668 seconds

Compared to the speedy HTML5 runtime:

# Same 2448 × 3264 jpeg with EXIF orientation 6
reader started
reader finished loading 0.12800002098083496 seconds
image finished loading 0.2999999523162842 seconds
image finished resizing 0.16100001335144043 seconds
finished img.getAsDataURL 1.309999942779541 seconds

The Flash Image's getAsDataURL does work fine for me with smaller image and returns a real dataURL.

My code is doing the following:

1. using mOxie FileInput
2. using mOxie FileReader to read file as dataURL.
3. creating a mOxie Image and loading it with that read dataURL.
4. calling downsize on the mOxie Image instance with false argument for preserve headers.
5. calling getAsDataURL('image/jpeg', 100) on mOxie Image instance after 'Resize' event

Here's a snippet of my code:

      Controller.prototype.show = function(file, callback) {
        var _this = this;
        this.callback = callback;
        this.reader.onload = function(event) {
          var img, newTime, time, view;
          newTime = new Date().getTime() / 1000;
          console.log("reader finished loading", newTime - _this.time + " seconds");
          time = newTime;
          _this.dataURL = event.target.result;
          if (_this._browserAutoOrientsImages()) {
            view = _this._getView({
              model: new App.Entities.Model({
                cropImageSrcData: _this.dataURL
              })
            });
            return _this.region.show(view);
          } else {
            img = new mOxie.Image();
            img.bind("Load", function() {
              var orientation;
              newTime = new Date().getTime() / 1000;
              console.log("image finished loading", newTime - time + " seconds");
              time = newTime;
              orientation = (img.meta && img.meta.tiff && img.meta.tiff.Orientation) || 1;
              if (_.indexOf([5, 6, 7, 8], orientation) !== -1) {
                img.bind("Resize", function() {
                  newTime = new Date().getTime() / 1000;
                  console.log("image finished resizing", newTime - time + " seconds");
                  time = newTime;
                  _this.dataURL = img.getAsDataURL('image/jpeg', 100);
                  newTime = new Date().getTime() / 1000;
                  console.log("finished img.getAsDataURL", newTime - time + " seconds");
                  time = newTime;
                  view = _this._getView({
                    model: new App.Entities.Model({
                      cropImageSrcData: _this.dataURL
                    })
                  });
                  return _this.region.show(view);
                });
                return img.downsize(img.height, img.width, false, false);
              } else {
                view = _this._getView({
                  model: new App.Entities.Model({
                    cropImageSrcData: _this.dataURL
                  })
                });
                return _this.region.show(view);
              }
            });
            return img.load(_this.dataURL);
          }
        };
        this.time = new Date().getTime() / 1000;
        console.log("reader started");
        return this.reader.readAsDataURL(file);
      };

Flash FileReader performance

The FileReader Flash polyfill seems to read the entire file even if I just request a slice. One it is done reading the entire file it does correctly return just the slice I asked for. But this means if I ask for a small slice (1K) of a large file (1.8 GB) I am stuck waiting for a while. Also since it seems to read the entire thing into memory that would seem like a pretty heavy load on the client.

I took a look at the FileReference API provided by flash (which Moxie seems to be using to read the file) and it doesn't seem to provide a way to read just a part of the file. So this may just be a fundamental limitation of the flash fallback. But I thought I would open a ticket to verify this limitation before giving up.

Is my understanding correct? If I ask for just a small bit of a file it will read the entire thing into memory when using the flash fallback?

Flash runtime doesn't initialize in legacy browsers (FF3.6, IE6,7,8, Safari 4.0,5.0)

Flash object requires minimal dimensions to initialize properly in legacy browsers (FF3.6, IE6,7,8, Safari 4.0,5.0), although it should - that's what it was created for, after all.

Silverlight runtime doesn't set proper Content-Type inside multipart for unknown file type

I'm attempting to use plupload 2.0 to upload files to a .NET WebAPI server and there is an issue with the Silverlight runtime not setting the proper Content-Type for an unknown file type (in this case, an .rdp file). Using Fiddler, the request sent by the Silverlight runtime is below:

POST http://localhost:38893/api/upload HTTP/1.1
Host: localhost:38893
Connection: keep-alive
Content-Length: 334
Origin: http://localhost:38893
User-Agent: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.110 Safari/537.36
content-type: multipart/form-data; boundary=----moxieboundary816
Accept: */*
Referer: http://localhost:38893/Scripts/Moxie.xap
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8

------moxieboundary816
Content-Disposition: form-data; name="name"

cldbuild02.rdp
------moxieboundary816
Content-Disposition: form-data; name="file"; filename="cldbuild02.rdp"
Content-Type: 

full address:s:cldbuild02:3389
username:s:Administrator
prompt for credentials:i:1


------moxieboundary816--

You'll notice that in the second part the Content-Type is blank. If I use the HTML5 runtime I get the following request:

POST http://localhost:38893/api/upload HTTP/1.1
Host: localhost:38893
Connection: keep-alive
Content-Length: 412
Origin: http://localhost:38893
User-Agent: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.110 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryqrB60GCabhnOAE2F
Accept: */*
Referer: http://localhost:38893/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8

------WebKitFormBoundaryqrB60GCabhnOAE2F
Content-Disposition: form-data; name="name"

cldbuild02.rdp
------WebKitFormBoundaryqrB60GCabhnOAE2F
Content-Disposition: form-data; name="file"; filename="cldbuild02.rdp"
Content-Type: application/octet-stream

full address:s:cldbuild02:3389
username:s:Administrator
prompt for credentials:i:1


------WebKitFormBoundaryqrB60GCabhnOAE2F--

As you can see, the Content-Type defaults to application/octet-stream. The Flash runtime also defaults to application/octet-stream. Can the Silverlight runtime also default to this value? Unfortunately the .NET WebAPI throws an error if the Content-Type is blank.

Thanks!

Slower performance generating embedded thumbs.

From the changes made in commit cfc8f24 (Image, HTML5: Remove getAsImage), the generation of embedded thumbs seems to be almost twice as slow as before. E.g. when selecting 10 jpg files of about 5 MB, before the change, it took about 7 seconds to generate 80x60 pixel thumbs. After the change, it takes 12 seconds.

Seems to be caused especially by the change in line 84/85 of src/javascript/runtime/html5/image/Image.js

_loadFromDataUrl.call(this, img.getAsDataURL());

to

_img = img.getAsImage();
this.trigger('load', me.getInfo.call(this));

Allow setting the filename when uploading a multipart with FormData

According to the W3C FormData spec, the append method should have the following signature.

void append(DOMString name, Blob value, optional DOMString filename);

However, moxie currently doesn't support the third argument.

Thus the default filename "blob" is always used. It would be great if it could be specified, since for uploading images the lack of a file extension could become problematic.

Allow scripting on swf loaded from another domain

Is this feature always enabled?
I tried it but received the error "Error calling method on NPObject.".

PNG got _purge() twice and lead to undefined the secontime

I just compiled 607acd9 and tested it with a PNG image.
I got Uncaught TypeError: Cannot call method 'init' of null
I set breakpoint at .init and I can see that it goes into that line twice. Is this a normal behavior? Should _br be wrapped with a null checker?

function _purge() {
            _br.init(null);
            _binstr = _info = _hm = _ep = _br = null;
        }

A simple if (_br) would be suffice to fix this for me.

IE9 - Image onload doesn't seem to ever be called (flash)

I expect I'm doing something wrong, but onload is never called for an image in IE9 using the flash shim.
For example none of the following seem to work as expected, it just silently fails:

var _i=document.createElement('img');
// initialise _i
var img=new mOxie.Image();
img.onload=function(e){console.log('worked');};
img.load(_i);

var _c=document.createElement('canvas');
var img=new mOxie.Image();
img.onload=function(e){console.log('worked');};
img.load(_c.getDataURL('image/jpeg', 0.9); // using png, etc doesn't work either

var _f=file; // from fileinput for example
var img=new mOxie.Image();
img.onload=function(e){console.log('worked');};
img.load(_f);

Any suggestions?

Thanks

Adding Cross-Domain Request Capability

I am making cross domain requests. Most runtimes support this:

• xhr2 via CORS
• flash via crossdomain.xml
• html4 since it uses iframe which can be cross-domain
• I am unsure about Silverlight.

Legacy XHR (i.e. "native" XHR in moxie terms) does not. I'm looking for the quickest way to move forward which seems to be just modifying _canUseNativeXHR to check _same_origin_flag. If not the same origin then we pass off to the non-"native" runtimes.

But I was wondering if I am simplifying it too much. Should each runtime have a "cross-domain" capability flag? This would be true on Flash (we assume they have setup the crossdomain.xml file). This would also be true for html4. I am unsure if it is always true for html5. Obviously we assume they setup CORS on the webserver. But do browsers exist that support XHR2 but not CORS? I found some tests we could use if that is the case.

URL resolution doesn't take into account current port.

More info: http://www.plupload.com/punbb/viewtopic.php?pid=11553

Uploading a file via Silverlight runtime builds an incomplete multipart

When uploading a file object via o.XMLHttpRequest using the Silverlight runtime under IE9 sends an incomplete multipart to the server missing the file's body. The file is yielded from a mOxie.FileInput.

ajaxRequest.open("post", url, true);
ajaxRequest.setRequestHeader('Content-Type', 'application/octet-stream');
ajaxRequest.send(file.getSource(), {
    swf_url: "lib/Moxie.xap"
});

Yielded request body (copied from the IE9 output):

--------------------------7dd39c331012c--

Multipart seems to be the way the Silverlight runtime sends it's content, I'd gladly take anything that works.

See #28 for a complete example using the Flash runtime instead.

Resizing Images

Hello,
we use plupload in our Company as the essential tool for Upload Images (OEM License).
We habe the following Problem:

We want to resize images with the following Values(1024 x 2045, quality 90), if i have an Image with the following format (2688 x 1520) then the resized Image has not enough Quality to print in 20x30cm Photocard.

I found a solution which i want to add in the plupload javascript and Flash code.

My Question :
How can i get the plupload JS and Actionscript Code to add my changes into?

thanks

Samer

Unable to build javascript

When I try to use jake mkjs, I get the following error.

$ node_modules/.bin/jake mkjs --trace
jake aborted.
Error: Cannot find module './utils'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (/home/defrex/code/moxie/node_modules/amdlc/lib/AmdCompiler.js:6:13)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)

Taking a quick look, I can see that most of the files in the build directory require ./utils, and there is no build/utils directory.

Silverlight crashes in Mountain Lion (latest Mac OS X)

Displays thumbnails properly (therefore can pick files, preload images, manipulate them). But as soon as upload is requested (through WebRequestCreator.ClientHttp) - it crashes.

Wrong zIndex on browseButton

The zIndex is retrieved from the configured browseButton, but if it's inside a container (div) with a zIndex then it will not be calculated correctly.

Maybe you should check the zIndex of all parent nodes.

Thumbs not rendering in IE10

From commit 6887860 (March 8) on, preview thumbs are not rendering anymore in IE10.
Tried with IE 10.0.9200.16540 (lastest as of now) on 64 bit Windows 7

I made a test case where you could see behaviour in different versions of Moxie:
http://printsjelle.pixxer.nl/nictest/
In version 25c284b of March 7, thumbs are still showing if you add jpeg-files. From version 6887860 on, they don't display anymore.

Android - object #FileReader has no method addEventListener

While running Moxie under android (4.0.3) I get the above error when doing this for example:

var fi=new mOxie.FileInput({
browse_button: 'mybutton',
accept:'image.*'
});
fi.addEventListener('change', function(e){
var fr=new mOxie.FileReader();
fr.onload=function(e){console.log('loaded');};
fr.readAsDataURL(this.files[0]);
});

I replaced the event setup code in FileReader.read with this:

function removeEventListeners() {
Basic.each(events, function(name) {
if (fr.removeEventListener)
fr.removeEventListener(name, reDispatch);
else
fr['on'+name]=null;
});
if (fr.removeEventListener)
fr.removeEventListener('loadend', removeEventListeners);
else
fr.onloadend=null;
}

Basic.each(events, function(name) {
if (fr.addEventListener)
fr.addEventListener(name, reDispatch);
else
fr['on'+name]=reDispatch;
});
if (fr.addEventListener)
fr.addEventListener('loadend', removeEventListeners);
else
fr['onloadend']=removeEventListeners;

CallFunction is undefined on ie8 or ie9

function __flash__addCallback(instance, name) {
instance[name] = function () {
return eval(instance.CallFunction("<invoke name=""+name+"" returntype="javascript">" + __flash__argumentsToXML(arguments,0) + ""));
}
}

shimContainer is not removed when the uploader is destroyed

I'm not sure but after debbuging I think the problem is:

The dom element is removed with

shimContainer.parentNode.removeChild(shimContainer);

but after it, you call to

obj.instance.destroy.call(obj.context);

which calls to "getShimContainer" and it recreates the shim container.

Safari 5 - window.FileReader is undefined

When using safari 5, window.FileReader is not defined, therefore if you try to read a moxie file or blob using a filereader it fails as it falls back to html5 because the file objects were created that way. Shouldn't it detect if filereader is available and use a shim if not?

Only html4 runtime in old-IE

I tested moxie in a local IIS site and everything worked great in all browsers. Meaning, flash was working in oldIE. Once I put the files into the clients site oldIE does not use the flash runtime, it uses the html4 runtime, which isn't working. It is an asp.net web-forms site which has a form element around the whole page.
[body][form id='aspnetForm'] ...(everything)... [/form][/body]
Rather then troubleshoot that I am trying everything to get the flash or silverlight runtimes going. I verified the .swf and .xap files are there and getting served up. I tried "multiple: true" because I read that disabled the html4 runtime.
BTW, the error I get in IE9 during html4 runtime is:
Message: INVALID_STATE_ERR: INVALID_STATE_ERR: DOMException 11
Line: 3320
URI: moxie.js

Trigger onchange on original element

In case the mOxie.FileInput is used as a polyfill on top of a classical <input type=file> it would make sense to trigger the onchange event on that element. In this case mOxie could be used as a transparent polyfill without the need for a change within the native HTML5 implementation.

Right now what you possibly need to do is

    fileInput.onchange = function (e) {
        originalElem.onchange(e);
    };

thumbnails not showing up in ie6,7,8

Hi, I am running Plupload2 Beta, jquery ui widget using the Flash runtime on ie7 and ie8.
When I try to upload images in the 300-500kb range I just get the loading icon (even when uploading just 1 image). The thumb does appear on a small file (28kb), however, and it also works fine in ie9 for the larger flles.
I found a site that has a sample of showing thumbs in the flash runtime that does not have this issue but I am unsure how to integrate: http://kasparsj.wordpress.com/2011/04/18/show-image-thumbnails-in-plupload-queue-widget/
Thanks for a great product, it really is amazing

http://www.plupload.com/punbb/viewtopic.php?id=2625