flow.js upload file on click

Question

Hopefully someone can help with this.

Basically, we are using ng-flow https://github.com/flowjs/ng-flow to allow for drag and drop to upload items. We are also using MVC 4.

All seems to be working as should, however, we would like to customize this, so that

1. Items are dragged into the upload box and stored in scope (as it does now)
2. Items are not physically uploaded until a button has been clicked

What have we tried so far? :-

in the config, we have disabled the target so that it doesn't upload immediately

.config(['flowFactoryProvider', function (flowFactoryProvider) {
flowFactoryProvider.defaults = {
  target: '',
  permanentErrors: [500, 501],
  maxChunkRetries: 1,
  chunkRetryInterval: 5000,
  simultaneousUploads: 1
};

on the actual page, we have created a button, with an ng-click which will pass through the flow.files

<input type="button" value="Click Me" ng-click="uploadme($flow.files)">

in the controller, we have the function, uploadme, that accepts flows as a paramater. Looping through this paramater and post each "file" to the upload controller

$scope.uploadme= function (flows)
{
    angular.forEach(flows, function (flow) {
        var fd = new FormData();
        fd.append("file", flow);
        $http.post("upload", fd, {
            withCredentials: true,
            headers: {'Content-Type': undefined },
            transformRequest: angular.identity
        })
    });

}

MVC controller, 'upload'. this get called, however, file is always null

public ActionResult upload(HttpPostedFileBase file)
    {
        if (file.ContentLength > 0)
        {
            var fileName = Path.GetFileName(file.FileName);
            var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
            file.SaveAs(path);
        }
        return View();
    } 

Is there something that we are missing? or is there a different way to achieve this.

Answer 1

managed to resolve this...

remove the line from div tag

flow-files-submitted="$flow.upload()"

then onclick of a button, pass in $flow in as a paramater

ng-click="InsertItems($flow)"

Javascript:-

$scope.InsertItems = function(e)
{
//Do what you need to do
e.upload();
}

Answer 2

I only want to add a reference to a nice answer to this question: Ng-flow upload programmatically

Hope it helps.