How to have both single and multiple upload using ngflow angular js

Question

Hi I'm using ngflow with angularjs to upload files and it is working fine.I got a requirement that there will be two upload buttons in the same form. one upload is only for single file and other one is for multiple files and the files selected from both of them needs to be displayed in same table.

One way to do this would be to create two instances of flow on the same page and then specify the single file option true on one but this way I will have to create two tables to display the files selected.

    <div flow-init="{target: '/upload', singleFile: true}"> 
    <span class="btn" flow-btn >
    <i class="icon icon-file"></i>Upload Single File</span> 
</div> 


    <div flow-init="{target: '/upload'}">
    <span class="btn" flow-btn >
    <i class="icon icon-file"></i>Upload Multiple File</span> 
  </div>

So the issues which I'm having currently are: 1) Show files selected from both single and multiple in same table and if from the singleFile upload . Once one file is uploaded, second file will overtake existing one, first one will be canceled. whereas from multiple file it will append to previous selection. 2) How to send extra parameter in the with single file upload.

Aidas · Accepted Answer · 2015-08-22 20:05:49Z

You can have a one flow instance

<table flow-init="{target: '/upload'}"
flow-file-added="someHandlerMethod($file, $event, $flow)"
><tr><td>
<span class="btn" id="btn-single" flow-btn flow-single-file >
    <i class="icon icon-file"></i>Upload Single File
</span>
</tr></td>
<tr><td>
<span class="btn" id="btn-multi" flow-btn >
    <i class="icon icon-file"></i>Upload More Files
</span>
</tr></td>

In your controller:

var singleFile;
$scope.someHandlerMethod = function ($file, $event) {
    //$event.target input used to upload the file

    // you should be able to get element id by one of these methods: 
    //$event.target.id
    //$event.target.parentNode.id// to get span element id
    if ($event.target.parentNode.id == "btn-single") {
        singleFile && singleFile.cancel();
        singleFile = $file;
        $file.isSingle = true;// can be used later to set custom params for the target.
    } else {
...

    }
}

For setting custom parameters per file, you should set target, headers or query option as a function. Docs: https://github.com/flowjs/flow.js#configuration

query: function ($file) {
return {isSingle: $file.isSingle};
}

Collectives™ on Stack Overflow

How to have both single and multiple upload using ngflow angular js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related