LucianoCharlesdeSouza · May 21, 2021 00:04
diff --git a/preview-before-upload.html b/preview-before-upload.html
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset="UTF-8">
    <title>Preview-Upload</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <style>
        input[type="file"] {
            color: transparent;
            display: none;
        }
    </style>
 </head>
 <body>
 <br/>
 <div class="container bootstrap snippet">
    <form action="ROUTE_HERE" method="post" enctype="multipart/form-data">
        <div class="row">
            <div class="col-sm-4">
                <div class="text-center">
                    <img src="avatar.png"
                         class="avatar img-circle img-thumbnail"
                         alt="avatar">
                    <input type="file"
                           accept="image/*"
                           name="user_avatar"
                           class="btn-file text-center center-block file-upload">
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <div class="col-xs-3">
                        <label for="user_name">Nome</label>
                        <input type="text"
                               class="form-control"
                               name="user_name"
                               id="user_name"
                               placeholder="Nome Completo"
                               title="Seu nome aqui!">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-xs-12">
                        <br>
                        <button class="btn btn-success">Enviar</button>
                    </div>
                </div>
                <hr>
            </div>
        </div>
    </form>
 </div>

 <script>
    if (document.readyState === "loading") {
        document.addEventListener('DOMContentLoaded', function () {
                const readUrl = function (input) {

                    if (input.files && input.files[0]) {
                        const reader = new FileReader();
                        reader.readAsDataURL(input.files[0]);
                        reader.onload = function (element) {
                            let avatar = document.querySelector('.avatar');
                            avatar.setAttribute('src', element.target.result);
                        }
                    }
                }

                const fileUpload = document.querySelector('.file-upload');
                fileUpload.addEventListener('change', function () {
                    readUrl(this);
                });

                const avatar = document.querySelector('.avatar');
                avatar.addEventListener('click', function () {
                    fileUpload.click();
                });
            }
        )
    }
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Preview-Upload</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
	<style>
	input[type="file"] {
	color: transparent;
	display: none;
	}
	</style>
	</head>
	<body>
	<br/>
	<div class="container bootstrap snippet">
	<form action="ROUTE_HERE" method="post" enctype="multipart/form-data">
	<div class="row">
	<div class="col-sm-4">
	<div class="text-center">
	<img src="avatar.png"
	class="avatar img-circle img-thumbnail"
	alt="avatar">
	<input type="file"
	accept="image/*"
	name="user_avatar"
	class="btn-file text-center center-block file-upload">
	</div>
	</div>
	<div class="col-sm-6">
	<div class="form-group">
	<div class="col-xs-3">
	<label for="user_name">Nome</label>
	<input type="text"
	class="form-control"
	name="user_name"
	id="user_name"
	placeholder="Nome Completo"
	title="Seu nome aqui!">
	</div>
	</div>
	<div class="form-group">
	<div class="col-xs-12">
	<br>
	<button class="btn btn-success">Enviar</button>
	</div>
	</div>
	<hr>
	</div>
	</div>
	</form>
	</div>

	<script>
	if (document.readyState === "loading") {
	document.addEventListener('DOMContentLoaded', function () {
	const readUrl = function (input) {

	if (input.files && input.files[0]) {
	const reader = new FileReader();
	reader.readAsDataURL(input.files[0]);
	reader.onload = function (element) {
	let avatar = document.querySelector('.avatar');
	avatar.setAttribute('src', element.target.result);
	}
	}
	}

	const fileUpload = document.querySelector('.file-upload');
	fileUpload.addEventListener('change', function () {
	readUrl(this);
	});

	const avatar = document.querySelector('.avatar');
	avatar.addEventListener('click', function () {
	fileUpload.click();
	});
	}
	)
	}
	</script>
	</body>
	</html>