Flow Js - upload files as array

Question

I am trying to use FlowJS angular plugin for a upload functionality and I need to tweak it a little. I will have to files of all types

I am using ASP.NET MVC.

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

My input button

<input type="file" flow-btn />

My upload button

  <input type="button"  ng-click="uploadFiles($flow)">

And the function

 $scope.uploadme = function (flows) {
    flows.upload();
 });

My mvc controller

  [HttpPost]
    public string UploadFile(HttpPostedFileBase file)
    {
        int fileSizeInBytes = file.ContentLength;
        MemoryStream target = new MemoryStream();
        file.InputStream.CopyTo(target);
        byte[] data = target.ToArray();
        return "";
    }

This works fine, but when I upload multiple files, the controller is hit every time for a file. I need to find a way to send all files to the controller at once, some thing like

    public string UploadFile(HttpPostedFileBase[] file)
    {
    }

Any ways I can achieve this ?

Where is `input type file` from where you select files for upload ? — Mairaj Ahmad, Nov 19 '15 at 07:26
@MairajAhmad I have edited my question and added the select file button. — wickjon, Nov 19 '15 at 07:36
Have you tried see what data and how many files do you have in `Request.Files` collection? — Andrew, Nov 19 '15 at 07:37
I have two FlowFile array objects in my flows input parameter of uploadme function. But flows.upload() calls the controller two times for each file one after the other. — wickjon, Nov 19 '15 at 07:40
I talked about `Request` object inside your mvc controller. It has property called `Files`. Try to see it and also you don't need to specify input parameter for your method. You should see all your uploaded files in `Request.Files` collection — Andrew, Nov 19 '15 at 07:55

score 1 · Accepted Answer · answered Nov 19 '15 at 07:48

1

You don't need something like UploadFile(HttpPostedFileBase[] file) in your controller.

Just Create Controller

public string UploadFile()
{
  var httpRequest = HttpContext.Current.Request;
  //httpRequest.Files.Count -number of files
  foreach (string file in httpRequest.Files)
  {
      var postedFile = httpRequest.Files[file];
      using (var binaryReader = new BinaryReader(postedFile.InputStream))
      {
         //Your file
         string req = System.Text.Encoding.UTF8.GetString(binaryReader.ReadBytes(postedFile.ContentLength));

      }
}
}

answered Nov 19 '15 at 07:48

slava

1,901
6
28
32

This method works fine.. but is there any way to do this without formdata ? I need to send some other info in addition to the files in the same save action.. how can I achieve it. – wickjon Nov 23 '15 at 06:10
If my answer helped you, then upvote it or accept it. And I see that you created a new question with the similar problem, so I think that this discussion in the comment section is not suitable now. – slava Nov 23 '15 at 07:34
http://stackoverflow.com/questions/33864860/angularjs-ajax-mvc-file-multiple-upload-without-form-data. Do you have any inputs on my question ? – wickjon Nov 23 '15 at 09:10

score 1 · Answer 2 · answered Nov 19 '15 at 07:52

1

Add multiple attribute to your input

<input type="file" multiple="multiple" flow-btn />

answered Nov 19 '15 at 07:52

Mairaj Ahmad

14,434
2
26
40

Please add more information to explain how this solves the problem – Tom Carter Nov 19 '15 at 09:05

Flow Js - upload files as array

2 Answers2