Elijah/convertor
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

file upload start

Browse source
This commit is contained in:
C4illin 2024-04-10 14:42:05 +02:00
parent b0c2dba1d6
commit 7693c7c931
5 changed files with 98 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
bun.lockb
View file

Binary file not shown.

2
package.json
View file

@ -3,7 +3,7 @@
"version": "1.0.50", "version": "1.0.50",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1", "test": "echo \"Error: no test specified\" && exit 1",
"dev": "bun run --watch src/index.ts" "dev": "bun run --hot src/index.ts"
}, },
"dependencies": { "dependencies": {
"@elysiajs/html": "^1.0.2", "@elysiajs/html": "^1.0.2",

52
src/pages/index.html
View file

@ -1,15 +1,63 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<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>ConvertX</title> <title>ConvertX</title>
<link rel="stylesheet" href="pico.lime.min.css"> <link rel="stylesheet" href="pico.lime.min.css">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<script src="index.js" defer></script>
</head> </head>
<body> <body>
<main class="container"> <header class="container-fluid">
<h1>Hello world!</h1> <nav>
<ul>
<li><strong>ConvertX</strong></li>
</ul>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><button class="secondary">Products</button></li>
</ul>
</nav>
</header>
<main class="container-fluid">
<!-- File upload -->
<form method="post" enctype="multipart/form-data">
<div>
<article>
<table id="file-list">
<tr>
<td>file.jpg</td>
<td>3.2 MB</td>
<td><button>x</button></td>
</tr>
</table>
<input type="file" name="file" multiple />
</article>
<!-- <div class="icon">></div> -->
<article>
<select name="to" aria-label="Convert to" required>
<option selected disabled value="">Convert to</option>
<option>JPG</option>
<option>PNG</option>
<option>SVG</option>
<option>PDF</option>
<option>DOCX</option>
</select>
</article>
</div>
<div class="center">
<button type="submit">Convert</button>
</div>
</form>
</main> </main>
<footer></footer>
</body> </body>
</html> </html>

26
src/public/index.js Normal file
View file

@ -0,0 +1,26 @@
// Select the file input element
const fileInput = document.querySelector('input[type="file"]');
// Add a 'change' event listener to the file input element
fileInput.addEventListener("change", (e) => {
console.log(e.target.files);
// Get the selected files from the event target
const files = e.target.files;
// Select the file-list table
const fileList = document.querySelector("#file-list");
// Loop through the selected files
for (let i = 0; i < files.length; i++) {
// Create a new table row for each file
const row = document.createElement("tr");
row.innerHTML = `
<td>${files[i].name}</td>
<td>${(files[i].size / 1024 / 1024).toFixed(2)} MB</td>
<td><button class="secondary">x</button></td>
`;
// Append the row to the file-list table
fileList.appendChild(row);
}
});

21
src/public/style.css
View file

@ -0,0 +1,21 @@
article {
/* height: 300px; */
/* width: 300px; */
}
div.icon {
height: 100px;
width: 100px;
}
button[type="submit"] {
width: 50%
}
div.center {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}