i want to create a image upload button, in which i can click the trash-icon to delete the uploaded image..
But due to position:absolute of icon when i click on icon, its opens dialog box for file upload.
Can i avoid this by using CSS
i tried using pointer-event:none but couldn't succeed, Am using this in angular project
.upload-btn {
width: 100%;
height: 144px;
background: #fff;
border: 2px dashed #dae2e8;
box-sizing: border-box;
border-radius: 16px;
background-image: url('https://customercare.igloosoftware.com/.api2/api/v1/communities/10068556/previews/thumbnails/4fc20722-5368-e911-80d5-b82a72db46f2?width=680&height=680&crop=False');
background-repeat: no-repeat;
background-position: center 27px;
position: relative;
background-size:30px;
}
.upload-btn .upload-text {
font-size: 14px;
position: absolute;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
padding-left: 16px;
padding-right: 16px;
width: 100%;
text-align: center;
}
.upload-btn .upload-img {
position: absolute;
left: 50%;
top: 24px;
width: 62px;
height: 62px;
border-radius: 8px;
transform: translateX(-50%);
pointer-events: none;
}
.upload-btn .upload-delete {
position: absolute;
right: 0;
top: 15px;
width: 62px;
height: 62px;
border-radius: 8px;
pointer-events: none;
text-align: right;
background-color: transparent;
}
.upload-btn .upload-delete i {
pointer-events: all;
padding: 15px 17px;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<div class="row row-24 mb-24">
<div class="col-4">
<label for="company-logo" class="form-label">Company Logo</label>
<label for="company-logo" class="upload-btn ">
<div class="upload-text"> Drop your image here or <span class="text-primary">Browse</span></div>
<div class="upload-delete">
<i class="bi bi-trash"></i>
</div>
<input type="file" class="form-control" name="" id="company-logo" placeholder="" hidden>
</label>
</div>
</div>CodePudding user response：
If you put the "icon" into a <button> tag, it wont open the file picker.
.upload-btn {
width: 100%;
height: 144px;
background: #fff;
border: 2px dashed #dae2e8;
box-sizing: border-box;
border-radius: 16px;
background-image: url('https://customercare.igloosoftware.com/.api2/api/v1/communities/10068556/previews/thumbnails/4fc20722-5368-e911-80d5-b82a72db46f2?width=680&height=680&crop=False');
background-repeat: no-repeat;
background-position: center 27px;
position: relative;
background-size:30px;
}
.upload-btn .upload-text {
font-size: 14px;
position: absolute;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
padding-left: 16px;
padding-right: 16px;
width: 100%;
text-align: center;
}
.upload-btn .upload-img {
position: absolute;
left: 50%;
top: 24px;
width: 62px;
height: 62px;
border-radius: 8px;
transform: translateX(-50%);
pointer-events: none;
}
.upload-btn .upload-delete {
position: absolute;
right: 0;
top: 15px;
width: 62px;
height: 62px;
border-radius: 8px;
pointer-events: none;
text-align: right;
background-color: transparent;
}
.upload-btn .upload-delete i {
pointer-events: all;
padding: 15px 17px;
}
.trashBtn {
border: none;
background: rgba(0,0,0,0);
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<div class="row row-24 mb-24">
<div class="col-4">
<label for="company-logo" class="form-label">Company Logo</label>
<label for="company-logo" class="upload-btn ">
<div class="upload-text"> Drop your image here or <span class="text-primary">Browse</span></div>
<div class="upload-delete">
<button class="trashBtn">
<i class="bi bi-trash"></i>
</button>
</div>
<input type="file" class="form-control" name="" id="company-logo" placeholder="" hidden>
</label>
</div>
</div>CodePudding user response：
The reason why your example is failing is that you pretty much have a button inside another button, which is no bueno.
To solve this you should move your delete icon outside of your label and keep it as a sibling, while at the same time you try to align it where you want it.
EDIT: if you care about accessibility, I would advise you to not do a button inside another button; although this answer is not that much better, at least you won't have as many issues with it.
Here's my suggestion for you:
#wrappingDiv {
position: relative;
}
.upload-btn {
width: 100%;
height: 144px;
background: #fff;
border: 2px dashed #dae2e8;
box-sizing: border-box;
border-radius: 16px;
background-image: url("https://customercare.igloosoftware.com/.api2/api/v1/communities/10068556/previews/thumbnails/4fc20722-5368-e911-80d5-b82a72db46f2?width=680&height=680&crop=False");
background-repeat: no-repeat;
background-position: center 27px;
position: relative;
background-size: 30px;
}
.upload-btn .upload-text {
font-size: 14px;
position: absolute;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
padding-left: 16px;
padding-right: 16px;
width: 100%;
text-align: center;
}
.upload-btn .upload-img {
position: absolute;
left: 50%;
top: 24px;
width: 62px;
height: 62px;
border-radius: 8px;
transform: translateX(-50%);
pointer-events: none;
}
.upload-delete {
position: absolute;
right: 0;
top: 30px;
width: 62px;
height: 62px;
padding: 15px 17px;
border-radius: 8px;
text-align: right;
background-color: transparent;
z-index: 10;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<div class="row row-24 mb-24">
<div class="col-4">
<div id="wrappingDiv">
<label for="company-logo" class="form-label">Company Logo</label>
<label for="company-logo" class="upload-btn ">
<div class="upload-text"> Drop your image here or <span class="text-primary">Browse</span></div>
<input type="file" class="form-control" name="" id="company-logo" placeholder="" hidden>
</label>
<div class="upload-delete">
<i class="bi bi-trash"></i>
</div>
</div>
</div>
</div>CodePudding user response：
You can also evt.stopPropagation() inside the icon click handler.
Or don't wrap the input and icon with the label and use an id to associate form label and control.