Customizing ng2-file-upload

Question

I am trying to customize default ng2-file-upload, but it's not coming well as per requirement. Can any one help me out.

Requirement

HTML

<input type="file" name="photo" ng2FileSelect [uploader]="uploader" />

Answer 1

You can add a hidden file input and trigger it with a button (or any clickable HTML element) like this:

<input type="file" ng2FileSelect [uploader]="uploader" style="display: none"  #fileUploader>

<button (click)="fileUploader.click()">
    Select File
</button>

For single selection file upload, you can show selected file name like this:

<div>
  {{uploader.queue[0].file?.name}}
</div>

For multiple selection file upload, you can show selected file names like this, but remember to add multiple attribute to your input:

<div *ngFor="let item of uploader.queue">
  {{item.file?.name}}
</div>

And of course, you have to define CSS classes according to your needs.

Hope this helps.

UPDATE

.file-input {
  border-radius: 5px;
  border: 1px solid #eaeaea;
  overflow: hidden;
}

.file-name{
  padding: 10px 5px;
}

.select-button{
   padding: 10px 5px;
   background: #fafafa;
   text-align: center;
   color: #999999;
   cursor: pointer;
}

.select-button:hover{
   background: #cccccc;
   color: #fafafa;
}


.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-h-50-pct{
  -webkit-flex: 0 0 50% !important; /* Safari 6.1+ */
  -ms-flex: 0 0 50%  !important; /* IE 10 */
  flex: 0 0 50% !important;
  max-width: 50%  !important;
  min-width: 0;
  min-height: 0;
}

.flex-h-10{
  -webkit-flex: 0 0 10px !important; /* Safari 6.1+ */
  -ms-flex: 0 0 10px !important; /* IE 10 */
  flex: 0 0 10px !important;
  max-width: 10px;
  width: 10px;
  min-width: 0;
  min-height: 0;
}

.flex-h-fill-remaining{
  flex: 1 1 auto;
  min-width: 0;
}


.truncate {
  min-width: 0;
  position: relative;
  max-width: 100%;

  & * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

}

<div style="width: 350px"> <!-- The size is fluid -->
<div class="flex-row file-input">
    <div class="flex-h-50-pct flex-row file-name">
       <div class="flex-h-fill-remaining">
         <div class="truncate">
           {{item.file?.name}}
           </div>
       </div>
       <div class="flex-h-10" (click)="item.remove()">
          x
       </div>
    </div>
    <div class="flex-h-50-pct select-button" (click)="fileUploader.click()">
       Choose From Device
    </div>
</div>
</div>

You need to tweak CSS attributes and values but the foundation may be like this.