Please check this code
https://codepen.io/manuchadha/pen/PBKYBJ
I have created a form. I want to be able to upload an image using the file upload input. When an image is selected, I want to show a thumbnail of the image just below the file selector box and also show a close (x) sign on the top-right corner of the image which could be used to delete the image.
I am trying to follow this example (https://codepen.io/brissmyr/pen/egidw) to create an X using css (not fonts) but I am unable to create it. What am I doing wrong? All I see are two vertical bars at the top corner of the image box but they are not transforming by 45degrees. I suspect that it could be a css transform issue but I could be wrong
The code is
/*handler for file upload*/
function handleFileSelect() {
console.log("got file upload event:");
/*
FileList object is the object returned as a result of a user selecting files using the <input> element,
from a drag and drop operation's DataTransfer object, or from the mozGetAsFile() API on an HTMLCanvasElement.
*/
var files = document.getElementById('question-file-upload').files; //event.target.files;
console.log("files selected:" + files + ", total selected: " + files.length);
for (var i = 0; i < files.length; i++) {
console.log("files name:" + files[i].name)
console.log("files object:" + files[i])
}
//working with only 1 file at the moment
var file = files[0];
if (files && file) {
/*
The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer,
using File or Blob objects to specify the file or data to read.
*/
var reader = new FileReader();
/*bind onload event of FileReader to _handleReaderLoaded
onload is a handler for the load event. This event is triggered by FileReader each time the reading operation is successfully completed.
*/
reader.onload = this._handleReaderLoaded.bind(this);
reader.readAsBinaryString(file);
}
}
function _handleReaderLoaded(readerEvt) {
var binaryString = readerEvt.target.result;
var base64textString = btoa(binaryString);
console.log(btoa(binaryString));
var src = "data:image/png;base64,";
src += base64textString;
var newImage = document.createElement('img');
newImage.src = src;
newImage.width = newImage.height = "80";
var closeButtonLink = document.createElement('a');
/*closeButtonLink.textContent = "x";*/
/*dont want font*/
closeButtonLink.setAttribute('href', "#");
closeButtonLink.classList.add("close");
document.querySelector('#imageContainer').appendChild(newImage);
document.querySelector('#imageContainer').appendChild(closeButtonLink);
}body {
margin: 0px;
}
.body__div--background {
background: linear-gradient(45deg, #33b1f8 37%, #6e90f6 100%);
/*syntax linear-gradient(direction, color1 limit, color2 limit)*/
color: #555555;
font-family: Helvetica;
line-height: 1.5;
font-size: 11px;
letter-spacing: 0.25px;
}
#submit-practice-question-button {
display: block;
}
#imageContainer {
display: inline-block;
border: 1px solid black;
}
.close {
position: relative;
margin: 0px;
padding: 0px
/*right: 80px;
top:80px;
width: 32px;
height: 32px;
*/
opacity: 0.3;
}
.close:hover {
opacity: 1;
}
.close:before,
.close:after {
/*position: relative;*/
/*left: 15px;*/
border: 1px solid black;
top: 0px;
right: 80px;
content: ' ';
/*height: 33px;*/
width: 2px;
background-color: #333;
}
.close:before {
transform: rotate(45deg);
}
.close:after {
transform: rotate(-45deg);
}<!DOCTYPE html>
<html lang="en">
<head>
<base href="">
<title>Example</title>
<!--meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"-->
<link rel="stylesheet" media="screen" href="fiddle.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="fiddle.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
</head>
<body>
<!--a href="#" class="close"></a-->
<div id="form-div" class="body__div--background">
<form id="new-question-form" class="practice-question-form" [formGroup]="practiceQuestionForm" (ngSubmit)="addPracticeQuestion()" novalidate>
<div class="form-group">
<label for="file-upload" class="control-label required">Upload files</label>
<div class="custom-file" id="file-upload" lang="es">
<input type="file" class="custom-file-input" id="question-file-upload" multiple onchange="handleFileSelect(this.files)">
<label style="width:50%" class="custom-file-label" for="question-file-upload"></label>
</div>
</div>
<div id="imageContainer"></div>
<button type="submit" id="submit-practice-question-button" class="content-div__button--blue"> Submit! </button>
</form>
</div>
</body>
