admin管理员组文章数量:1313153
I made a custom input field of type="file" as I didn't like the default one. To achieve this I did:
<input
#uploadFile
type="file"
id="uploadFile"
class="hidden-input"
accept="image/jpeg, .jpeg, image/png, .png, image/pjpeg, .jpg, .docx, .pdf"
(change)="selectFile($event.target.files[0])"
/>
<label [matTooltip]="Upload a file" for="uploadFile">
<mat-icon>folder_open</mat-icon>
</label>
so basically it hides the original input, and with the tag I can open the browse file window by clicking on the mat-icon.
This works well, but instead of label I wanted to use the tag <button mat-icon-button>
to have a nice ripple effect on the icon, but the "for"
used in the label doesn't work for <button>
.
If I wrap my mat-icon
inside the label tag with the above button tag, what would happen is, the button
looks how I want it, but when I click nothing happens, I suppose it's because the button
is above the label
, so the label
doesn't get the click, I tried using z-index
but wouldn't work.
Any ideas on how to solve this?
I made a custom input field of type="file" as I didn't like the default one. To achieve this I did:
<input
#uploadFile
type="file"
id="uploadFile"
class="hidden-input"
accept="image/jpeg, .jpeg, image/png, .png, image/pjpeg, .jpg, .docx, .pdf"
(change)="selectFile($event.target.files[0])"
/>
<label [matTooltip]="Upload a file" for="uploadFile">
<mat-icon>folder_open</mat-icon>
</label>
so basically it hides the original input, and with the tag I can open the browse file window by clicking on the mat-icon.
This works well, but instead of label I wanted to use the tag <button mat-icon-button>
to have a nice ripple effect on the icon, but the "for"
used in the label doesn't work for <button>
.
If I wrap my mat-icon
inside the label tag with the above button tag, what would happen is, the button
looks how I want it, but when I click nothing happens, I suppose it's because the button
is above the label
, so the label
doesn't get the click, I tried using z-index
but wouldn't work.
Any ideas on how to solve this?
Share Improve this question asked Dec 17, 2018 at 10:59 AJ-AJ- 1,7831 gold badge29 silver badges57 bronze badges3 Answers
Reset to default 7Just make a button whose click fires a click event on the hidden file input
<button (click)="uploadFile.click()" mat-icon-button>
<mat-icon>arrow_upward</mat-icon>
</button>
.label{
padding: 10px;
color: #fff;
}
input[type="file"] {
display: none;
}
.label-input{
font: bold 13px Arial;
text-decoration: none;
background-color: #2387aa;
color: #EEEEEE;
padding: 4px 79px 5px 66px;
border-top: 1px solid #CCCCCC;
/* border-right: 1px solid #333333; */
/* border-bottom: 1px solid #333333; */
border-left: 1px solid #CCCCCC;
}
<label class="label-input"> Upload file
<input type="file" id="File">
</label>
Add this link to your index.html
<link href="https://fonts.googleapis./icon?family=Material+Icons" rel="stylesheet">
To your app.module
add
MatIconModule
in Html:
<input #uploadFile
type="file"
id="uploadFile"
class="hidden-input"
accept="image/jpeg, .jpeg, image/png, .png, image/pjpeg, .jpg, .docx, .pdf"
/>
<button for="uploadFile" (click)="selectFile()">
<mat-icon>folder_open</mat-icon>
</button>
In ts make onchange
function:
files: Array<any> = [];
selectFile() {
const fileUpload = document.getElementById('uploadFile') as HTMLInputElement;
fileUpload.onchange = () => {
for (let index = 0; index < fileUpload.files.length; index++) {
const file = fileUpload.files[index];
this.files.push(data: file);
}
};
fileUpload.click();
}
本文标签: javascriptAngularCSScustom typefile inputhow to use a button instead of labelStack Overflow
版权声明:本文标题:javascript - Angular - CSS - custom type=file input, how to use a button instead of label? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1741934287a2405758.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论