flowjs / fusty-flow.js Goto Github PK

While working on GlobaLeaks i've found out that fusty-flow does not allow function as the target parameter making it not compatible with flow.js/ng-flow API.

It would be important to offer such a possibility so that fustyflow can be used as fallback on application that used flowjs/ng-flow as default upload mechanism but would like to offer old browsers compatibility.

Hello,

I tried to auto-upload files after they are selected in the browser popup. I did this by using

flow.on('filesSubmitted', function (file) {
   console.debug(file);
   file[0].flowObj.upload(); // Start upload
 });

Note this is a single file upload only. Whenever I select a new file, it works flawlessly. But if I select the previously uploaded file again, it gives me

Uncaught TypeError: Cannot read property 'flowObj' of undefined

because file is empty.

What am I doing wrong? How can I allow the user to try to upload the same file again while keeping the auto-upload on selection?

I am new to both requireJS and Angular and having hard time making fusty-flow work with requireJS.

Here is my requireJS Config:

paths:{
        'flow1': 'lib/flow',
        'flow': 'lib/ng-flow',
        'fusty-flow': 'lib/fusty-flow',
        'fusty-flow-factory': 'lib/fusty-flow-factory'
}

shim:{
       'flow':
        {
            deps:
            [
                'angular',
                'flow1',
                'fusty-flow',
                'fusty-flow-factory'
            ]
        },
        'app':
        {
            deps:
            [

                'flow'
            ]
        },
}

In Angular app.Config.js:

var app = angular.module('app',
        [
                      'flow'
        ]);

 app.config(['flowFactoryProvider', function (flowFactoryProvider) {
            flowFactoryProvider.factory = fustyFlowFactory;
        }]);

Everything works well until browser has to fall back to FustyFlow (IE9 and below). I get FustyFlow not defined error. I found only this link similar to my problem: flowjs/ng-flow#34 but does seem to help me.
Any suggestions??

Vishal

Hello,

While figuring out why using fusty-flow alters the style of my browse button, I came across this:

fusty-flow.js:91 ff

    assignBrowse: function (domNodes) {
      if (typeof domNodes.length == 'undefined') {
        domNodes = [domNodes];
      }
      each(domNodes, function (domNode) {
        var input;
        if (domNode.tagName === 'INPUT' && domNode.type === 'file') {
          input = domNode;
        } else {
          input = document.createElement('input');
          input.setAttribute('type', 'file');

          extend(domNode.style, {
            display: 'inline-block',
            position: 'relative',
            overflow: 'hidden',
            verticalAlign: 'top'
          });

In this, you check if the given DOM Node can be used as an input or if a new one should be created. The created one is assigned to input. However, you apply the CSS styles to the given domNode instead of the freshly created input.

Is this intentionally? Why do you need to transform the given DOM element?

When I change it to extend(input.style), the look of my button is fixed. But I noticed I have to double click it then to open the browse file dialog.

Tested on IE9 - Win 7

Edit: I'm also missing something like

domNode.addEventListener('click', function() {
            input.click();
          }, false);

as is in flow.js

We use ng-flow a lot and have set our own custom file bootstrap function initFileFn in options to extend the file object with some method of ours.

I can see from the source code that Fusty's bootstrap function does not simply check for the existence of an initFileFn.

It it purposeful? Or can I just PR to add the same logic from flow.js?

Current

    bootstrap: function () {
      this.abort(true);
      this.finished = false;
      this.error = false;
},

Desired

    bootstrap: function () {
      if (typeof this.flowObj.opts.initFileFn === "function") {
        this.flowObj.opts.initFileFn(this);
      }

      this.abort(true);
      this.finished = false;
      this.error = false;
},

Still on GlobaLeaks i was trying to include Fusty-flow in order to provide browser compatibility to IE9.

I managed to integrate fustyflow with ngflow simply including the library following https://github.com/flowjs/ng-flow#how-can-i-support-older-browsers

Then i tried uploading a file and the client appeared to upload successfully but on the backend i found that the flowTotalSize was missing in the request.

From this i'm supposing that the API is different and should be documented or maybe it is a bug and it should be fixed.

The library is using some globals (window.Flow and window.FustyFlow) instead of requiring them and
the FustyFlow class is never imported when using npm require.

This makes using it with webpack and other module bundlers very tricky.

Hi,

me and @symrad were working on a problem using Fusty on IE9 on an application that requires XSRF protection. I know that this topic has been already dealt with in #5 and we agree that headers are not the proper way to set the token.

But let me go by steps. I would like to understand if our code is broken or there is a bug in Fusty.

Originally we used the following code in Angular to initialize fusty

angular.module('pnx')
.config([ '$compileProvider', 'PnxAppConfigConstant', '$locationProvider', '$httpProvider', '$provide', 'flowFactoryProvider', AppConfig ]);

function fustyFlowFactory(opts) {
    var flow = new Flow(opts);

    if (flow.support) {
        return flow;
    }

    return new FustyFlow(opts);
}

function AppConfig($compileProvider, PnxAppConfigConstant, $locationProvider, $httpProvider, $provide, flowFactoryProvider) {

    flowFactoryProvider.factory = fustyFlowFactory;
    flowFactoryProvider.defaults = {
        permanentErrors : [ 404, 500, 501 ],
        testChunks : false,
        chunkSize : 9007199254740992,
        headers : function(file, chunk, isTest) {
            var headers = {};
            headers[PnxAppConfigConstant.getCsrf().header] = PnxAppConfigConstant.getCsrf().csrf;
            return headers;
        },
        query : function(file, chunk, isTest) {
            var postParams = {};
            postParams._csrf = PnxAppConfigConstant.getCsrf().csrf;
            return postParams;
        }
    };

    // [...] other stuff for our app
}

Explanation:

• fustyFlowFactory function instantiates Fusty Flow if Flow is not supported by the browser (hits the branch in IE9 as expected)
• fustyFactoryProvider.defaults sets both the headers (successfully used by Flow on Firefox/Chrome) and the query (supposed to be used by Fusty)

However the above code didn't work. Fusty never got the defaults. Even debugging the code at https://github.com/flowjs/fusty-flow.js/blob/master/src/fusty-flow.js#L55, it never read the defaults from the factory.

So we had to change the code and force the token into the query.

Current code

function AppConfig($compileProvider, PnxAppConfigConstant, $locationProvider, $httpProvider, $provide, flowFactoryProvider) {

    var factoryFunc = function(opts) {
        var flow = new Flow(opts);

        if (flow.support)
            return flow;


        opts.query._csrf = PnxAppConfigConstant.getCsrf().csrf;
        return new FustyFlow(opts);
    };



    flowFactoryProvider.factory = factoryFunc;
    flowFactoryProvider.defaults = {
        permanentErrors : [ 404, 500, 501 ],
        testChunks : false,
        chunkSize : 9007199254740992,
        headers : function(file, chunk, isTest) {
            var headers = {};
            headers[PnxAppConfigConstant.getCsrf().header] = PnxAppConfigConstant.getCsrf().csrf;
            return headers;
        },
        query : function(file, chunk, isTest) {
            var postParams = {};
            postParams._csrf = PnxAppConfigConstant.getCsrf().csrf;
            return postParams;
        }
    };

This time we explicitly set token in the options. Works just fine. I can see the token in the request and get to upload

I would like to open this issue as a potential bug, because IMO Fusty should read the defaults from the flow factory as Flow would do normally.
I haven't dug enough in the code to confirm it's a bug, but I start from the assumption that factory settings should also work on Fusty and not only on classic Flow.

What do you think about it?

I am using flow and falling back to fusty-flow for uploading images in an angularjs application, using ng-flow. I am providing the flow-init attribute the object specifying options and the header property with the keys and values I need set to support csrf auth.

Following is the object I provide the flow-init which following the code through shows it gets passed property to fusty flow:

$scope.initSettings = {
    headers: {
        'X-CSRFToken': Cookies.get('csrftoken'),
        'Authorization': $scope.user.getAuthToken()
    }
};

I've looked over flowjs/ng-flow#82 and understand I need to set them for every request, but when viewing the request headers in IE9, the headers have not been set.

Anyone out there used this with IE9? It's ok with IE7 and IE8, but with IE9 I'm getting a crash on
FustyFlowFile iFrameLoaded, where it tries to access
$.iFrame.contentWindow.document.body.innerHTML

The $.iFrame.contentWindow.document exists, but things inside there are ropey and .body.innerHTML doesn't exist. That's the crash I'm getting. I can't avoid this: I need the contents of that network response, so I have to fix this, and I can't stub it out.

Sadly the IE11 IE9 emulator (!) crashes when I much about with this, probably because of the same IE "security" issues which are causing the IE9 problem. The Angular demo of fusty-flow appears to work in IE9.... but it doesn't actually do any upload, so that's no test.

Anyone... I need a way to get the innerHTML from an ie9 iframe I guess, and that needs to be in here, else IE9 doesn't work.

I think.