AngularJS: one upload button that uploads three images

Question

Introduction

At the moment I have three upload buttons that upload three different images using three different functions.

Is there a way to have one button that each time you click it, it uploads a new image?

Question

As each upload has a different function, I was thinking hide the button once the image is uploaded. So hide button 2 and 3 and use button one to upload, print out saying image name but hides 1st button and shows second. Repeat this process until all buttons are used (if user uses all).

Update

the 3 images have to upload to there own function.

First image to insertImageFirst

Second to insertImageSecond

Third to insertImageThird

My code

<div class="controls row center-text">
        <input type="file" id="FirstImageID" name="image" class="" accept="image/*"
               onchange="angular.element(this).scope().insertImageFirst()"/>

        <input type="file" id="SecondImageID" name="image" class="" accept="image/*"
               onchange="angular.element(this).scope().insertImageSecond()"/>

        <input type="file" id="ThirdImageID" name="image" class="" accept="image/*"
               onchange="angular.element(this).scope().insertImageThird()"/>
</div>

@PatrickEvans if each Image could upload to each function as in 1 2 and 3. — Beep, Aug 30 '17 at 14:32
I got it. Can you please show us `insertImageFirst()` function? — Karol Trybulec, Aug 30 '17 at 14:34
@KarolTrybulec upload three images three different functions `insertImageThird` `insertImageSecond` `insertImageFirst` — Beep, Aug 30 '17 at 14:35
So if a user can upload 200 images, you will have 200 times the same function, all the way like `insertImageOneHundredAndThirtySeventh` ?Do you believe this is a smart code design? — Jeremy Thille, Aug 30 '17 at 14:40
@JeremyThille no its not smart, that is why I am asking for advice. a user should only be able to upload 3 images. — Beep, Aug 30 '17 at 14:42
Hmmm... Just out of curiosity, why do inputs have IDs? `id="FirstImageID"` ? — Jeremy Thille, Aug 30 '17 at 14:43
IMO you can just do `onchange="insertImage(1)"`, `onchange="insertImage(2)"` and test the passed argument from inside your single function. `function insertImage(num){ if(num==1)..... }` — Jeremy Thille, Aug 30 '17 at 14:46
Consider using a custom directive that enables `` to automatically work with the `ng-change` directive. See [ng-model for ``](https://stackoverflow.com/a/43074638/5535245). — georgeawg, Aug 30 '17 at 14:46
@georgeawg nice, i was thinking along the lines of ng if or change. thanks. — Beep, Aug 30 '17 at 14:50

score 0 · Answer 1 · answered Aug 30 '17 at 15:11

I've created a simple solution that also limits the user to only three images.

However I know its messy and also hides the labels of the image that uploaded.

can anyone improve this to show how to display the labels or how to do this without multiple uploads.

My Code

<div class="controls row center-text">
    <input type="file" id="FirstImageID" name="image" class="" accept="image/*"
           onchange="angular.element(this).scope().insertImageFirst()"
           ng-click=" showDiv1=true"
           ng-show="!showDiv1"/>


    <div ng-show="showDiv1">
        <input type="file" id="SecondImageID" name="image" class="" accept="image/*"
               onchange="angular.element(this).scope().insertImageSecond()"
               ng-click=" showDiv2=true"
               ng-show="!showDiv2"/>
    </div>

    <div ng-show="showDiv2">
    <input type="file" id="ThirdImageID" name="image" class="" accept="image/*"
           onchange="angular.element(this).scope().insertImageThird()"/>
    </div>
</div>

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

Consider using a custom directive that enables <input type=file> to automatically work with the ng-change directive.

<input type="file" id="FirstImageID" name="image1" class="" accept="image/*"
       files-input ng-model="fileList1" ng-change="insertImage(1,fileList1[0])"
       ng-disabled="disabledList[1]" />

<input type="file" id="SecondImageID" name="image2" class="" accept="image/*"
       files-input ng-model="fileList2" ng-change="insertImage(2,fileList2[0])"
       ng-disabled="disabledList[2]" />

<input type="file" id="ThirdImageID" name="image3" class="" accept="image/*"
       files-input ng-model="fileList3" ng-change="insertImage(3,fileList3[0])" 
       ng-disabled="disabledList[3]" />

app.directive("filesInput", function() {
  return {
    require: "ngModel",
    link: function postLink(scope,elem,attrs,ngModel) {
      elem.on("change", function(e) {
        var files = elem[0].files;
        ngModel.$setViewValue(files);
      })
    }
  }
});

app.controller("ctrl", function($scope) {
  var vm = $scope;
  vm.disabledList = [];
  vm.insertImage = function(num,file) {
    vm.disabledList[num]=true;
  }
});

With the ng-change directive, one can use the power of AngularJS expressions to operate an ng-disabled directive after each selection.

The DEMO

angular.module("app",[])
.directive("filesInput", function() {
  return {
    require: "ngModel",
    link: function postLink(scope,elem,attrs,ngModel) {
      elem.on("change", function(e) {
        var files = elem[0].files;
        ngModel.$setViewValue(files);
      })
    }
  }
})
.controller("ctrl", function($scope) {
  var vm = $scope;
  vm.completedList = [];
  vm.disabledList = [];
  vm.insertImage = function(num,file) {
    vm.completedList.unshift("num="+num+" file="+file.name);
    vm.disabledList[num]=true;
  }
})

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl">
<input type="file" id="FirstImageID" name="image1" class="" accept="image/*"
   files-input ng-model="fileList1" ng-change="insertImage(1,fileList1[0])"
   ng-disabled="disabledList[1]" />
<br>
<input type="file" id="SecondImageID" name="image2" class="" accept="image/*"
   files-input ng-model="fileList2" ng-change="insertImage(2,fileList2[0])"
   ng-disabled="disabledList[2]" />
<br>
<input type="file" id="ThirdImageID" name="image3" class="" accept="image/*"
   files-input ng-model="fileList3" ng-change="insertImage(3,fileList3[0])" 
   ng-disabled="disabledList[3]" />
<br>
<div ng-repeat="item in completedList track by $index">
  {{item}}
</div>
</body>

AngularJS: one upload button that uploads three images

2 Answers2

The DEMO