javascript - flow.js upload file on click - Stack Overflow

admin管理员组

文章数量:1339799

Hopefully someone can help with this.

Basically, we are using 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.

Hopefully someone can help with this.

Basically, we are using ng-flow https://github./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.

• javascript
• asp-mvc
• angularjs
• flow-js

Share Improve this question Follow edited Jun 15, 2015 at 9:04 John Saunders 162k2626 gold badges252252 silver badges402402 bronze badges asked Sep 9, 2014 at 8:39 SimonSimon 1,47644 gold badges2121 silver badges5050 bronze badges 2

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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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();
}

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

Hope it helps.

本文标签： javascriptflowjs upload file on clickStack Overflow