-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
115 lines (102 loc) · 3.36 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>File Uploader</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
html,
body {
height: 100%;
}
</style>
<script>
function copyLink() {
var copyText = document.getElementById("url");
copyText.select();
copyText.setSelectionRange(0, 99999); /*For mobile devices*/
document.execCommand("copy");
}
$(document).ready(() => {
$("#result").hide()
$("#upload-form").submit((event) => {
event.preventDefault();
var form = $("#upload-form");
var formData = new FormData(form[0]);
$.ajax({
xhr: () => {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", (evt) => {
if (evt.lengthComputable) {
var percentComplete = (evt.loaded / evt.total);
$(".progress-bar").css("width", (percentComplete * 100).toFixed(2) + "%").text((percentComplete * 100).toFixed(2) + " %");
if (percentComplete === 1)
$("#result").show()
}
}, false);
return xhr;
},
method: 'post',
url: '/upload',
data: formData,
processData: false,
contentType: false,
success: (data) => {
$('#url').val(data)
}
})
});
});
$(function () {
$('input:file').change(function () {
if (this.value.length > 0) {
document.getElementById('upbtn').disabled = false;
$('#loadFileXml').val(document.getElementById('file').files[0].name)
}
else
document.getElementById('upbtn').disabled = true;
});
});
</script>
</head>
<body>
<!-- nav bar -->
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand font-weight-bold" href="#">Heroku File Uploader</a>
</nav>
<!-- app body -->
<div class="jumbotron d-flex align-items-center" style="height: 100%;">
<div class="container" style="padding: 50px 50px 50px 50px">
<form id="upload-form" enctype="multipart/form-data" method="POST">
<!-- file select elements -->
<div style="padding: 10px;">
<input type="button" id="loadFileXml" value="Select File" class="btn btn-primary btn-block"
onclick="document.getElementById('file').click()" />
<input type="file" style="display: none;" id="file" name="file" />
</div>
<!-- file upload button -->
<div style="padding: 10px;">
<button type="submit" id="upbtn" class="btn btn-danger btn-block" disabled="true"
value="Upload a file">
Upload File
</button>
</div>
<div class="progress" style="margin: 10px 10px 10px 10px;">
<div class="progress-bar progress-bar-striped bg-success active" role="progressbar"
aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width:0%">
0%
</div>
</div>
<div class="row" id="result" style="margin: 10px ;">
<input type="text" class="form-control" id="url">
<button style="margin-top: 10px;" class="btn btn-secondary" type="button" onclick="copyLink()">Copy
text</button>
</div>
</form>
</div>
</div>
</body>
</html>