html
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
<!DOCTYPE html>
<html>
<head>
<title>Image Preview</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="full px-2 bg-dark">
<div class="phone rounded-4 bg-body">
<div class="row">
<div class="col-12 mt-3 px-4">
<div class="sss w-100 selector rounded-3" onclick="document.getElementById('file').click()">
<div class="ss ratio ratio-16x9 flex">
<img class="s position-relative" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTqSeboTQxnNebFB9mnbsjk1DPtKkwIs2N7JQWdCwpr3Q&s">
</div>
</div>
</div>
<div class="col-12 mt-3">
<div class="overflow-x-scroll w-100 prevRow d-inline-flex" id="prevRow">
<div class="prev mx-1 rounded-3">
<div class="ratio ratio-1x1 flex">
<img class="position-relative" src="no" alt="no image">
</div>
</div>
</div>
</div>
</div>
Enter to Rename, Shift+Enter to Preview
css
css
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
body{
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;
}
.full{
position: absolute;
top: 0;
left: 0;
min-height: 100vh;
width: 100vw;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
}
.phone{
width: 100%;
height: 100%;
}
.flex{
display: flex;
justify-content: center;
align-items: center;
}
.selector{
background-color: #93b1ae;
}
Enter to Rename, Shift+Enter to Preview
js
js
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
class Image{
id;
uploaded;
totalSent = 0;
totalFailed = 0;
sent = !1;
fetched = !1;
files = [];
constructor(files){
if(!files || !files.length) throw "No file Found";
this.updateFF(files)
this.id = Date.now();
}
/**
* @param {Function} success
*/
set onLoad(success){
this.success = success;
this.fetchData();
}
append(filelist){
for (let i = 0; i < filelist.length; i++) {
const element = filelist.item(i);
if(element && ['image/png', 'image/jpg', 'image/jpeg', 'image/pneg', 'image/jpg', 'image/webp'].includes(element.type)){
let find = this.files.find(f=>{
return (element.size==f.size && element.name==f.name)
})
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run