ng-file-upload multiple uploads to add to same list

Question

I am using ng-file-upload for the first time. I have 2 buttons, one for a single image and one for multiple files. When I use 1 button, it overwrites the files I uploaded from the other button. How can I get it to add to the list rather than overwrite?

<!-- UPLOAD FILES BUTTON -->
<a class="waves-effect waves-light btn col l2 m2 bluebut"
  style="margin-left: 50px;"
  id="upbut"
  ngf-select="uploadFiles($files, $invalidFiles)"
  multiple
  accept="image/*"
  ngf-max-size="50MB">UPLOAD FILE(S)</a>
<label for="upbut" id="label-add-pat">Attach File(s)</label>

<!-- UPLOAD PROFILE PIC -->
<a class="waves-effect waves-light btn col m2 l2 bluebut"
   style="margin-left: 53px;"
   id="uppicbut"
   ngf-select="uploadFiles($files, $invalidFiles)"
   ng-model="picFile"
   accept="image/*">UPLOAD PROFILE PICTURE
</a>
<label for="uppicbut" id="label-pic-pat">Upload a Profile Picture</label>

<!-- FILE STUFF -->
<br><br>
<ul>
  <li ng-repeat="f in files" style="font:smaller; margin-left: 51px;">{{f.name}} {{f.$errorParam}}
    <span class="progress" ng-show="f.progress >= 0">
      <div style="width:{{f.progress}}%"
          ng-bind="f.progress + '%'"></div>
    </span>
  </li>
  <li ng-repeat="f in errFiles" style="font:smaller">{{f.name}} {{f.$error}} {{f.$errorParam}}
  </li>
</ul>
{{errorMsg}}
<!-- END FILE STUFF -->

---_EDIT-------- Controller:

    $scope.uploadFiles = function(files, errFiles) {
        $scope.files = files;
        $scope.errFiles = errFiles;
        angular.forEach(files, function(file) {
            file.upload = Upload.upload({
                url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
                data: {file: file}
            });

            file.upload.then(function (response) {
                $timeout(function () {
                    file.result = response.data;
                });
            }, function (response) {
                if (response.status > 0)
                    $scope.errorMsg = response.status + ': ' + response.data;
            }, function (evt) {
                file.progress = Math.min(100, parseInt(100.0 *
                                         evt.loaded / evt.total));
            });
        });
    }

1. Even when you use "multiple" you can still upload a single file. So no need for two buttons. 2. Please post your controller code, otherwise we won't be able to help you manage your scope. — user2263572
– user2263572, Commented Jan 25, 2017 at 15:56
I agree, however, this form in particular has a button for uploading a user image, and has a button for multi-upload of user files. The design team insisted on 2 buttons for the same task — IWI
– IWI, Commented Jan 25, 2017 at 15:59

user2263572 · Accepted Answer · 2017-01-25 16:10:36Z

The issue now is that you are resetting $scope.files every time the uploadFiles event is run.

You need to set $scope.files = [] outside of the uploadFiles functions.

Within uploadFiles, append the files to the $scope.files array. That way, new files will be added and not overwritten.

$scope.files = []
$scope.uploadFiles = function(files, errFiles) {
        files.forEach(function(e){$scope.files.push(e)})
        $scope.errFiles = errFiles;
        angular.forEach(files, function(file) {
            file.upload = Upload.upload({
                url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
                data: {file: file}
            });

            file.upload.then(function (response) {
                $timeout(function () {
                    file.result = response.data;
                });
            }, function (response) {
                if (response.status > 0)
                    $scope.errorMsg = response.status + ': ' + response.data;
            }, function (evt) {
                file.progress = Math.min(100, parseInt(100.0 *
                                         evt.loaded / evt.total));
            });
        });

        }

    }

Also, you will probably want to check somewhere in uploadFiles that the same file isn't being uploaded more than 1 time. Angular ng-repeat will throw an error if you try to repeat an element with the exact same name.

Collectives™ on Stack Overflow

ng-file-upload multiple uploads to add to same list

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