自定义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.