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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.