Upload New File

parent 30dbca6b
Pipeline #1712 canceled with stages
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{{title}}</title>
<link href="/static/materializ.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<nav>
<div class="nav-wrapper" style="background-color: #3C3F41;">
<ul id="nav-mobile" class="right">
<li><img src="{{avatar}}" alt="avatar" style="vertical-align: middle;width: 40px;height: 40px;border-radius: 50%;"></li>
<li><a href="/auth/logout">logout</a></li>
</ul>
</div>
</nav>
<main>
<div class="container-fluid" style="background-color: #3C3F41; height: 100vh">
<div class="row">;>
<div style="width:33% ;float:left; padding-right: 25px;margin-top: 50px;color:white">
</div>
<div style="text-align:center;align-items:center;width:33% ;float:left;padding-right: 25px;margin-top: 50px;color:white">
<h5 style="font-family: Lato,serif;font-size:larger;font-style: normal ;margin-top: 50px;"><b>File Uploader with OAuth</b></h5>
<a href="#">
<img src="https://img.icons8.com/clouds/100/000000/upload.png" style="vertical-align: middle;width: 200px;height: 200px;"/>
</a>
<form action="/uploadtheFile" method="post" enctype="multipart/form-data">
<div class="file-field input-field">
<div class="custom-file mb-3">
<input type="file" class="custom-file-input" id="customFile" required name="file_upload">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
</div>
<button style="display: block; margin: 0 auto;background-color: #00acc1;color: white;" class="btn waves-effect waves-light"
type="submit"><b>UPLOAD</b></button>
</form>
<div style="margin-top: 15%;">
{% if (file == "uploaded") %}
<div style="padding: 2px 10px ;height:30px;border-radius:25px;background-color: #00E676">
<p><b>Upload Successful</b></p>
</div>
{% elif (file == "notuploaded") %}
<div style="padding: 2px 10px ;height:30px;border-radius:25px;background-color: #D32F2F;">
<p><b>Upload Failed,Please try again</b></p>
</div>
{% endif %}
</div>
</div>
<div style="width:33% ;padding:5%;float:right;margin-top: 50px;color:white;">
<ul>
<li style="padding:5%;border:2px solid white;border-radius: 25px;background-color: grey">
<img src="{{avatar}}" alt="avatar" style="width: 60px;height: 60px;border-radius: 50%;margin-left: 30%;margin-bottom: 10%" class="center">
<p><b>Username: </b>{{name}}</p>
<p><b>Google Id: </b>{{googleid}}</p>
<p><b>Email: </b>{{email}}</p>
</li>
</ul>
</div>
</div>
</div>
</main>
</body>
<script>
// Add the following code if you want the name of the file appear on select
$(".custom-file-input").on("change", function() {
var fileName = $(this).val().split("\\").pop();
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment