[Fixed] How do I change colour of an upload button after exceeding maximum number of file uploads?

Issue

I have this line in my HTML file to limit the number for file uploads to maximum = 3.

<input *ngIf="uploader.queue.length < 3" #uploadButton ng2FileSelect
       (change)="fileUpload()" [uploader]="uploader" id="supporting-doc-type-{{docType}}"
       type="file"
       class="upload-button"/>
<label for="supporting-doc-type-{{docType}}" *ngIf="uploader.queue.length < 3" class="fake-upload-button" >
  {{'account.uploadNric.uploadDoc'| translate}}
</label>

For now, it works okay where the upload button disappears once user uploaded the maximum number of files. But now, I want to make the button changes color from blue to red instead of making it just disappears. How do I do that?

Full CSS file:

.upload-button {
  display: none;
}

.fake-upload-button {
  border-radius: 4px;
  color: #fff;
  background-color: #29b6f6;
  padding: 4px 20px;
  cursor: pointer;
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9 {
  padding: 0;
}

.trash-can-icon {
  cursor: pointer;
  font-size: 18px;
}

Solution

You can bind disable attribute of input to expression "uploader.queue.length >= 3"

<input
  #uploadButton
  id="supporting-doc-type-{{docType}}"
  type="file"
  class="upload-button"
  [disabled]="uploader.queue.length >= 3"
/>

And in css use selector

input:disabled + .fake-upload-button {
  background-color: red;
}

example

Leave a Reply

(*) Required, Your email will not be published