MirzaLeka/1-upload-image-main.md

## 1-upload-image-main.md

      
    Raw
  

              1-upload-image-main.md
            
          
    Upload the image with a preview using HTML, CSS & JavaScript


Photo by Helena Lopes from Pexels
Code below:

  
## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Font awesome for fa icons -->
    <script src="https://use.fontawesome.com/fe459689b4.js"></script>
    <!-- Including styles.css file -->
    <link rel="stylesheet" type="text/css" href="./styles.css" />
    <title>File upload with preview</title>
  </head>
  <body>
    <h1>Upload image with a preview</h1>

    <div class="profile-picture">
      <h1 class="upload-icon">
        <i class="fa fa-plus fa-2x" aria-hidden="true"></i>
      </h1>
      <input
        class="file-uploader"
        type="file"
        onchange="upload()"
        accept="image/*"
      />
    </div>

    <!-- Including scripts.js file -->
    <script src="./scripts.js"></script>
  </body>
</html>

## scripts.js
function upload() {

  const fileUploadInput = document.querySelector('.file-uploader');

  /// Validations ///

  if (!fileUploadInput.value) {
    return;
  }

  // using index [0] to take the first file from the array
  const image = fileUploadInput.files[0];

  // check if the file selected is not an image file
  if (!image.type.includes('image')) {
    return alert('Only images are allowed!');
  }

  // check if size (in bytes) exceeds 10 MB
  if (image.size > 10_000_000) {
    return alert('Maximum upload size is 10MB!');
  }

  /// Display the image on the screen ///

  const fileReader = new FileReader();
  fileReader.readAsDataURL(image);

  fileReader.onload = (fileReaderEvent) => {
    const profilePicture = document.querySelector('.profile-picture');
    profilePicture.style.backgroundImage = `url(${fileReaderEvent.target.result})`;
  }

  // upload image to the server or the cloud
}

## styles.css
body {
  margin: 50px;
}

.file-uploader {
  /* make it invisible */
  opacity: 0;
  /* make it take the full height and width of the parent container */
  height: 100%;
  width: 100%;
  cursor: pointer;
  /* make it absolute positioned */
  position: absolute;
  top: 0%;
  left: 0%;
}

.upload-icon {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* initial icon state */
  opacity: 0;
  transition: opacity 0.3s ease;
  color: #ccc;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #bbb;
}

.profile-picture {
  opacity: 0.75;
  height: 250px;
  width: 250px;
  position: relative;
  overflow: hidden;

  /* default image */
  background: url('https://qph.cf2.quoracdn.net/main-qimg-f32f85d21d59a5540948c3bfbce52e68');

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;

  -webkit-box-shadow: 0 8px 6px -6px black;
  -moz-box-shadow: 0 8px 6px -6px black;
  box-shadow: 0 8px 6px -6px black;
}

/* toggle icon state */
.profile-picture:hover .upload-icon {
  opacity: 1;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<!-- Font awesome for fa icons -->
	<script src="https://use.fontawesome.com/fe459689b4.js"></script>
	<!-- Including styles.css file -->
	<link rel="stylesheet" type="text/css" href="./styles.css" />
	<title>File upload with preview</title>
	</head>
	<body>
	<h1>Upload image with a preview</h1>

	<div class="profile-picture">
	<h1 class="upload-icon">
	<i class="fa fa-plus fa-2x" aria-hidden="true"></i>
	</h1>
	<input
	class="file-uploader"
	type="file"
	onchange="upload()"
	accept="image/*"
	/>
	</div>

	<!-- Including scripts.js file -->
	<script src="./scripts.js"></script>
	</body>
	</html>
	function upload() {

	const fileUploadInput = document.querySelector('.file-uploader');

	/// Validations ///

	if (!fileUploadInput.value) {
	return;
	}

	// using index [0] to take the first file from the array
	const image = fileUploadInput.files[0];

	// check if the file selected is not an image file
	if (!image.type.includes('image')) {
	return alert('Only images are allowed!');
	}

	// check if size (in bytes) exceeds 10 MB
	if (image.size > 10_000_000) {
	return alert('Maximum upload size is 10MB!');
	}

	/// Display the image on the screen ///

	const fileReader = new FileReader();
	fileReader.readAsDataURL(image);

	fileReader.onload = (fileReaderEvent) => {
	const profilePicture = document.querySelector('.profile-picture');
	profilePicture.style.backgroundImage = `url(${fileReaderEvent.target.result})`;
	}

	// upload image to the server or the cloud
	}
	body {
	margin: 50px;
	}

	.file-uploader {
	/* make it invisible */
	opacity: 0;
	/* make it take the full height and width of the parent container */
	height: 100%;
	width: 100%;
	cursor: pointer;
	/* make it absolute positioned */
	position: absolute;
	top: 0%;
	left: 0%;
	}

	.upload-icon {
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* initial icon state */
	opacity: 0;
	transition: opacity 0.3s ease;
	color: #ccc;
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: #bbb;
	}

	.profile-picture {
	opacity: 0.75;
	height: 250px;
	width: 250px;
	position: relative;
	overflow: hidden;

	/* default image */
	background: url('https://qph.cf2.quoracdn.net/main-qimg-f32f85d21d59a5540948c3bfbce52e68');

	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;

	-webkit-box-shadow: 0 8px 6px -6px black;
	-moz-box-shadow: 0 8px 6px -6px black;
	box-shadow: 0 8px 6px -6px black;
	}

	/* toggle icon state */
	.profile-picture:hover .upload-icon {
	opacity: 1;
	}