anatolykopyl/file-directory
1
0
Fork 0
mirror of https://github.com/anatolykopyl/file-directory.git synced 2026-03-26 21:04:32 +00:00
Code Issues Projects Releases Wiki Activity

Added a progress bar

Browse Source
This commit is contained in:
Anatoly Kopyl
2022-01-04 12:34:53 +03:00
parent 6011a350f7
commit 632ba780af
2 changed files with 23 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
index.php
View File

@@ -23,6 +23,10 @@
</div> </div>
</label> </label>
<input id="upload" type="file" class="d-none"> <input id="upload" type="file" class="d-none">
<div class="progress">
<div id="progress" class="progress-bar d-none" role="progressbar"></div>
</div>
<div class="list-group shadow rounded"> <div class="list-group shadow rounded">
<?php <?php
@@ -106,6 +110,7 @@
<br><br> <br><br>
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<!-- Optional JavaScript --> <!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS --> <!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="jquery-3.6.0.min.js"></script> <script src="jquery-3.6.0.min.js"></script>

19
main.js
View File

@@ -17,12 +17,25 @@ buttons.forEach((button) => {
}); });
const fileInput = document.getElementById('upload'); const fileInput = document.getElementById('upload');
const progressBar = document.getElementById('progress');
fileInput.addEventListener('change', async function (event) { fileInput.addEventListener('change', async function (event) {
const file = event.target.files[0]; const file = event.target.files[0];
let formData = new FormData(); let formData = new FormData();
formData.append("file", file); formData.append("file", file);
const response = await fetch('upload.php', { method: "POST", body: formData }); // const response = await fetch('upload.php', { method: "POST", body: formData });
if (response.status === 200) { // if (response.status === 200) {
window.location.reload(false); // window.location.reload(false);
// }
axios.request({
method: "post",
url: "upload.php",
data: formData,
headers: { "Content-Type": "multipart/form-data" },
onUploadProgress: (p) => {
progressBar.style.display = 'block';
progressBar.style.width = `${p.loaded / p.total}%`;
} }
}).then (data => {
window.location.reload(false);
})
}); });