How to get mutilple file upload images using flow js with angular in php server side

Question

Here i add my code and set codeigniter url like 'apis/service/manish_sharma' , but i not getting any files array in my api.so please help me

<div 
  flow-init="{target:'apis/service/manish_sharma'}"                   
  flow-files-submitted="$flow.upload()"
  flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]"
>
  <div class="drop" flow-drop ng-class="dropClass">
    <span class="btn btn-default" flow-btn>Upload Image</span>  
  </div>

  <br/>

  <div>
    <div ng-repeat="file in $flow.files" class="gallery-box">
      <span class="title">{{file.name}}</span>
      <div class="thumbnail" ng-show="$flow.files.length">
        <img flow-img="file" />
      </div>
      <div class="progress progress-striped" ng-class="{active: file.isUploading()}">
        <div class="progress-bar" role="progressbar"
        aria-valuenow="{{file.progress() * 100}}"
        aria-valuemin="0"
        aria-valuemax="100"
        ng-style="{width: (file.progress() * 100) + '%'}">
        <span class="sr-only">{{file.progress()}}% Complete</span>
      </div>
    </div>
    <div class="btn-group">
      <a class="btn btn-xs btn-danger" ng-click="file.cancel()">
        Remove
      </a>
    </div>
  </div>
  <div class="clear"></div>

  </div>
</div>

Answer 1

Hi frd , finally i found the solution

Step 1 : Add html code in your template html file

<div flow-init flow-name="uploader.flow"                        
                         flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]">
                      <div class="drop" flow-drop ng-class="dropClass">
                           <!--<span class="btn btn-default" flow-btn>Upload Image</span>-->  
                           <input type="file" flow-btn />
                      </div>

                      <br/>

                      <div>

                        <div ng-repeat="file in $flow.files" class="gallery-box">
                          <span class="title">{{file.name}}</span>
                          <div class="thumbnail" ng-show="$flow.files.length">
                            <img flow-img="file" />
                          </div>
                          <div class="progress progress-striped" ng-class="{active: file.isUploading()}">
                            <div class="progress-bar" role="progressbar"
                                 aria-valuenow="{{file.progress() * 100}}"
                                 aria-valuemin="0"
                                 aria-valuemax="100"
                                 ng-style="{width: (file.progress() * 100) + '%'}">
                              <span class="sr-only">{{file.progress()}}% Complete</span>
                            </div>
                          </div>
                          <div class="btn-group">
                            <a class="btn btn-xs btn-danger" ng-click="file.cancel()">
                              Remove
                            </a>
                          </div>
                        </div>
                        <div class="clear"></div>
                      </div>

                    </div>

         <button class="btn-primary btn" type="button" ng-click="upload_fun()">Add Service</button>

Step 2 : declare variable in angular controller

 $scope.uploader={};


 $scope.upload_fun = function()
 {
                    $scope.uploader.flow.opts.testChunks=false;
                    $scope.uploader.flow.opts.target='apis/service/manish_sharma; /* your server side api path*/
                    $scope.uploader.flow.upload();
 }

Step 3: whatever you declare your server side path
Codeigniter (PHP framework)
controller name: service
function name : manish_sharma

function manish_sharma()
 {

       $target_file = '/upload' . basename($_FILES['file']['name']);

        move_uploaded_file($_FILES['file']['tmp_name'],$target_file);

        echo "<pre>";
        print_r($_FILES);

 }