joachim/FileRise
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add upload progress

Browse Source
This commit is contained in:
Ryan
2025-02-22 20:39:27 -05:00
committed by GitHub
parent 685897279f
commit 7c1eeca078
1 changed files with 36 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
index.html
View File

@@ -4,6 +4,9 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi File Upload & Edit</title> <title>Multi File Upload & Edit</title>
<link rel="icon" type="image/svg+xml" href="logo.svg">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="shortcut icon" href="logo.svg">
<!-- Google Fonts and Material Icons --> <!-- Google Fonts and Material Icons -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
@@ -113,12 +116,31 @@
text-decoration: underline; text-decoration: underline;
white-space: nowrap; white-space: nowrap;
} }
.container { margin-top: 20px; }
/* Progress bar styling */
.progress {
background-color: #e9ecef;
border-radius: 5px;
overflow: hidden;
margin-bottom: 10px;
height: 20px;
}
.progress-bar {
background-color: #007bff;
height: 100%;
line-height: 20px;
color: #fff;
text-align: center;
transition: width 0.4s ease;
}
</style> </style>
</head> </head>
<body> <body>
<!-- Header --> <!-- Header -->
<header> <header>
<div class="header-left"></div> <div class="header-left">
<img src="logo.svg" alt="Filing Cabinet Logo" style="height: 60px; width: auto;">
</div>
<div class="header-title"> <div class="header-title">
<h1>Multi File Upload & Edit</h1> <h1>Multi File Upload & Edit</h1>
</div> </div>
@@ -153,19 +175,20 @@
</div> </div>
</div> </div>
<!-- Upload Form --> <!-- Upload Form (shown when authenticated) -->
<div class="row" id="uploadForm"> <div class="row" id="uploadForm">
<div class="col-12"> <div class="col-12">
<form id="uploadFileForm" method="post" enctype="multipart/form-data"> <form id="uploadFileForm" method="post" enctype="multipart/form-data">
<div class="form-group"> <div class="form-group">
<label for="file"></label> <label for="file">Choose files to upload:</label>
<input type="file" id="file" name="file[]" class="form-control-file" multiple required style="max-width: 768px;"> <input type="file" id="file" name="file[]" class="form-control-file" multiple required>
</div> </div>
<button type="submit" id="uploadBtn" class="btn btn-primary" disabled>Upload</button> <button type="submit" id="uploadBtn" class="btn btn-primary">Upload</button>
<div id="statusMessage"></div> <!-- This container will display per-file progress bars -->
</form> <div id="uploadProgressContainer"></div>
</div> </form>
</div> </div>
</div>
<!-- File List --> <!-- File List -->
<div id="fileListContainer"> <div id="fileListContainer">