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

Items are dragged into the upload box and stored in scope (as it does now)
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.

I'm looking for a similar answer. It's a bit frustrating because the "basic" demo from the ng-flow github repo does exactly this even though it's done exactly the same way as my implementation. My version uploads the files immediately when they are dropped while theirs hold them until the button is clicked. Did you ever solve this? — Askdesigners, Oct 14 '14 at 11:30
@Askdesigners hi, yes resolved, please see answer, hope that helps. — Simon, Oct 14 '14 at 13:07

score 10 · Accepted Answer · answered Oct 14 '14 at 13:07

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();
}

score 2 · Answer 2 · edited May 23 '17 at 12:32

2

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

Hope it helps.

edited May 23 '17 at 12:32

Community

1
1

answered Jul 15 '15 at 14:44

Raúl Otaño

4,640
3
31
65

flow.js upload file on click

2 Answers2

Linked