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
– Askdesigners, Commented Oct 14, 2014 at 11:30
@Askdesigners hi, yes resolved, please see answer, hope that helps. — Simon
– Simon, Commented Oct 14, 2014 at 13:07

Simon · Accepted Answer · 2014-10-14 13:07:03Z

10

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

answered Oct 14, 2014 at 13:07

Simon

1,4965 gold badges21 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:32:18Z

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, 2017 at 12:32

CommunityBot

11 silver badge

answered Jul 15, 2015 at 14:44

Raúl Otaño

4,7803 gold badges38 silver badges66 bronze badges

Collectives™ on Stack Overflow

flow.js upload file on click

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related