espoirMur/gist:15634107912d061251f16e23f53deffd

## gistfile1.txt
<html lang="en" >
<style type="text/css">
    .progress {
  width: 100%;
  height: 20px;
}
.progress-wrap {
  background: #00a651;
  margin: 20px 0;
  overflow: hidden;
  position: relative;
}
.progress-wrap .progress-bar {
  background: #ddd;
  left: 0;
  position: absolute;
  top: 0;
}
body{
  font-family: arial;
  font-size: 15px;
  line-height: 1.6em;
}
li {
  list-style: none;
}
a{
  text-decoration: none;
}
.container {
  width: 60%;
  margin: 0 auto;
  overflow: auto;
}
header {
  border-bottom: 3px solid #00a651;
  color: #00a651;
}
footer{
  border-top: 3px solid #00a651;
  text-align: center;
  padding-top: 5px;
}
main {
  padding-bottom: 20px;
}
a.start{
  display: inline-block;
  color: #666;
  background: #f4f4f4;
  border: 1px dotted #ccc;
  padding: 6px 13px;
}
input[type='text']{
  width: 97%;
  padding: 4px;
  border-radius: 5px;
  border: 1px #ccc solid;
}
input[type='number']{
  width: 50px;
  padding: 4px;
  border-radius: 5px;
  border: 1px #ccc solid;
}
label {
  display: inline-block;
  width: 200px;
}
.current{
  padding: 10px;
  background: #f4f4f4;
  border: #ccc dotted 1px;
  margin: 20px 0 10px 0;
}
button {
  color: #fff;
  background: #00a651;
  border: 1px dotted #ccc;
  padding: 6px 13px;
}
@media only screen and (max-width:960px ) {
  .container{
    width: 80%;
  }
}
#logo{
width : 30%;
height : 10%;
float : left;
padding-right : 20px;
padding-bottom : 10px;
}
</style>
<head>
  <meta charset="UTF-8">
  <title>PLT Tool </title>
</head>
<body>
    <header>
        <div class="container">
		<img id="logo" src="logo.PNG" />
            <h1>PLT Tool  </h1>
        </div>
    </header>
    <main>
        <div class="container">
        <h2>Choissez les fichiers </h2>

        <form id="upload_form" enctype="multipart/form-data" method="post">
            <p>
            <label> Fichier 1 Receipe :</label>
            <input type="file" name="bom" id="bom" onchange="uploadFile(bom)">
            </p>

            <p>
            <label>Fichier 2 Ressources :</label>
            <input type="file" name="ressources" id="ressources" onchange="uploadFile(ressources)"><br>
            </p>
            <p>
                <label> Fichier 3 Interopérations :</label>
            <input type="file" name="interoperation" id="interoperation" onchange="uploadFile(interoperation)">
            </p>
            <p>
                <label>Fichier 4  Produits à exclure: </label>
            <input type="file" name="excluded" id="excluded" onchange="uploadFile(excluded)">
            </p>
            <p>
                <label>Fichier 5 Produits :</label>
                <input type="file" name="product" id="product" onchange="uploadFile(product)"><br>
            </p>
        </form>
        <!-- Change the below data attribute to play -->
        <div class="progress-wrap progress" data-progress-percent="25">
        <progress value="0" max="100" class="progress-bar progress" id="progressBar">
        </progress>
        </div>
        <!--end-->
        </div>
        <h3 id="status"></h3>
        <p id="loaded_n_total"></p>
    </main>
    <footer>
        <div class="container">
             Copyright &copy; <strong>PLT Tool v1.0.0</strong>, 2018, Powered by SCOPEx
        </div>
    </footer>

   <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

</body>

</html>

<script type="text/javascript">
function _(el) {
  return document.getElementById(el);
}
function uploadFile(element_name) {
  console.warn(element_name.id)
  let file = _(element_name.id).files[0];
  let formdata = new FormData();
  formdata.append("file", file);
  formdata.append("category", element_name.id);
  let ajax = new XMLHttpRequest();
  ajax.upload.addEventListener("progress", progressHandler, false);
  ajax.addEventListener("load", completeHandler, false);
  ajax.addEventListener("error", errorHandler, false);
  ajax.addEventListener("abort", abortHandler, false);
  ajax.open("POST", "{{url_for('home.upload_bom')}}");
  ajax.send(formdata);
}
function progressHandler(event) {
 //_("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
  let percent = (event.loaded / event.total) * 100;
  _("progressBar").value = Math.round(percent);
  _("status").innerHTML = Math.round(percent) + "% telecharger .. veuillez patienter";
}
function completeHandler(event) {
  _("status").innerHTML = event.target.responseText;
  _("progressBar").value = 0; //wil clear progress bar after successful upload
}
function errorHandler(event) {
  _("status").innerHTML = "Upload Failed";
}
function abortHandler(event) {
  _("status").innerHTML = "Upload Aborted";
}
</script>
	<html lang="en" >
	<style type="text/css">
	.progress {
	width: 100%;
	height: 20px;
	}
	.progress-wrap {
	background: #00a651;
	margin: 20px 0;
	overflow: hidden;
	position: relative;
	}
	.progress-wrap .progress-bar {
	background: #ddd;
	left: 0;
	position: absolute;
	top: 0;
	}
	body{
	font-family: arial;
	font-size: 15px;
	line-height: 1.6em;
	}
	li {
	list-style: none;
	}
	a{
	text-decoration: none;
	}
	.container {
	width: 60%;
	margin: 0 auto;
	overflow: auto;
	}
	header {
	border-bottom: 3px solid #00a651;
	color: #00a651;
	}
	footer{
	border-top: 3px solid #00a651;
	text-align: center;
	padding-top: 5px;
	}
	main {
	padding-bottom: 20px;
	}
	a.start{
	display: inline-block;
	color: #666;
	background: #f4f4f4;
	border: 1px dotted #ccc;
	padding: 6px 13px;
	}
	input[type='text']{
	width: 97%;
	padding: 4px;
	border-radius: 5px;
	border: 1px #ccc solid;
	}
	input[type='number']{
	width: 50px;
	padding: 4px;
	border-radius: 5px;
	border: 1px #ccc solid;
	}
	label {
	display: inline-block;
	width: 200px;
	}
	.current{
	padding: 10px;
	background: #f4f4f4;
	border: #ccc dotted 1px;
	margin: 20px 0 10px 0;
	}
	button {
	color: #fff;
	background: #00a651;
	border: 1px dotted #ccc;
	padding: 6px 13px;
	}
	@media only screen and (max-width:960px ) {
	.container{
	width: 80%;
	}
	}
	#logo{
	width : 30%;
	height : 10%;
	float : left;
	padding-right : 20px;
	padding-bottom : 10px;
	}
	</style>
	<head>
	<meta charset="UTF-8">
	<title>PLT Tool </title>
	</head>
	<body>
	<header>
	<div class="container">
	<img id="logo" src="logo.PNG" />
	<h1>PLT Tool </h1>
	</div>
	</header>
	<main>
	<div class="container">
	<h2>Choissez les fichiers </h2>

	<form id="upload_form" enctype="multipart/form-data" method="post">
	<p>
	<label> Fichier 1 Receipe :</label>
	<input type="file" name="bom" id="bom" onchange="uploadFile(bom)">
	</p>

	<p>
	<label>Fichier 2 Ressources :</label>
	<input type="file" name="ressources" id="ressources" onchange="uploadFile(ressources)"><br>
	</p>
	<p>
	<label> Fichier 3 Interopérations :</label>
	<input type="file" name="interoperation" id="interoperation" onchange="uploadFile(interoperation)">
	</p>
	<p>
	<label>Fichier 4 Produits à exclure: </label>
	<input type="file" name="excluded" id="excluded" onchange="uploadFile(excluded)">
	</p>
	<p>
	<label>Fichier 5 Produits :</label>
	<input type="file" name="product" id="product" onchange="uploadFile(product)"><br>
	</p>
	</form>
	<!-- Change the below data attribute to play -->
	<div class="progress-wrap progress" data-progress-percent="25">
	<progress value="0" max="100" class="progress-bar progress" id="progressBar">
	</progress>
	</div>
	<!--end-->
	</div>
	<h3 id="status"></h3>
	<p id="loaded_n_total"></p>
	</main>
	<footer>
	<div class="container">
	Copyright © <strong>PLT Tool v1.0.0</strong>, 2018, Powered by SCOPEx
	</div>
	</footer>

	<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

	</body>

	</html>

	<script type="text/javascript">
	function _(el) {
	return document.getElementById(el);
	}
	function uploadFile(element_name) {
	console.warn(element_name.id)
	let file = _(element_name.id).files[0];
	let formdata = new FormData();
	formdata.append("file", file);
	formdata.append("category", element_name.id);
	let ajax = new XMLHttpRequest();
	ajax.upload.addEventListener("progress", progressHandler, false);
	ajax.addEventListener("load", completeHandler, false);
	ajax.addEventListener("error", errorHandler, false);
	ajax.addEventListener("abort", abortHandler, false);
	ajax.open("POST", "{{url_for('home.upload_bom')}}");
	ajax.send(formdata);
	}
	function progressHandler(event) {
	//_("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
	let percent = (event.loaded / event.total) * 100;
	_("progressBar").value = Math.round(percent);
	_("status").innerHTML = Math.round(percent) + "% telecharger .. veuillez patienter";
	}
	function completeHandler(event) {
	_("status").innerHTML = event.target.responseText;
	_("progressBar").value = 0; //wil clear progress bar after successful upload
	}
	function errorHandler(event) {
	_("status").innerHTML = "Upload Failed";
	}
	function abortHandler(event) {
	_("status").innerHTML = "Upload Aborted";
	}
	</script>