If I press Send ☞ without choosing a file, it’ll say “No file selected.” in a little Bootstrap warning alert but it seems to break all future alerts like file uploaded or file already exists on disk.
If I make an error alert like file already on disk, it’ll work and won’t break future alerts (meaning it won’t stop alerts that popup in the future from showing).
So, why is the “No file selected” alert breaking other alerts?
In this clip, you can see me trying to make more than one of that alert but it just doesn’t want to.
Here is my ejs file:
JavaScript
x
99
99
1
<!DOCTYPE html>2
<html lang="en">3
4
<head>5
<meta charset="utf-8">6
<meta name="viewport" content="width=device-width, initial-scale=1">7
<title>Androp</title>8
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"9
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">10
</head>11
12
<body>13
<div class="container-fluid">14
<p>15
<h1>Androp - Send to [] MBP</h1>16
</p>17
<div class="input-group mb-3">18
<button class="btn btn-outline-primary" type="button" onclick="send()">Send ☞</button>19
<input type="file" class="form-control" id="fileSelector">20
</div>21
<div id="alerts"></div>22
<div class="text-center">23
<div id="spinny" class="spinner-border" style="width: 3rem; height: 3rem; visibility: hidden;"></div>24
</div>25
</div>26
27
<script src="/socket.io/socket.io.js"></script>28
<script>29
const socket = io()30
const engine = socket.io.engine31
let maxSize = 032
let sending = false33
34
socket.on("disconnect", (reason) => {35
alert(`Disconnected from laptop! Check your internet or refresh the page. 💀 (${reason})`, "warning")36
})37
38
engine.on("close", reason => {39
console.log(reason)40
})41
42
socket.emit("getMaxSize", (size) => {43
return maxSize = size44
})45
46
const alert = (message, type) => {47
const wrapper = document.createElement('div')48
wrapper.innerHTML = [49
`<div class="alert alert-${type} fade show" role="alert">`,50
` <div>${message}</div>`,51
'</div>'52
].join('')53
54
document.getElementById("alerts").append(wrapper)55
56
return bootstrap.Alert.getOrCreateInstance(wrapper)57
}58
59
function send() {60
if (sending) {61
return false62
}63
64
sending = true65
66
const file = document.getElementById("fileSelector").files[0] || false67
68
function close(alert) {69
setTimeout(() => {70
alert.close()71
}, 3500)72
}73
74
if (!file) { return close(alert("No files to upload.", "warning")) }75
if (file.size >= maxSize) { return close(alert(`File is bigger than ${Math.round(maxSize / (1024 ** 2))} MB`, "danger")) }76
document.getElementById("spinny").style.visibility = 'visible'77
socket.timeout(10000).emit("upload", file, file.name, file.size, (err, status) => {78
if(err) {79
return close(alert("Could not contact laptop within 10s, laptop might be in sleep mode. 💀", "warning"))80
}81
document.getElementById("spinny").style.visibility = 'hidden'82
sending = false83
return close(alert(status.message, status.success ? "success" : "danger"))84
})85
}86
</script>87
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"88
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"89
crossorigin="anonymous"></script>90
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js"91
integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"92
crossorigin="anonymous"></script>93
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js"94
integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"95
crossorigin="anonymous"></script>96
</body>97
98
</html>99
Advertisement
Answer
You should move the flag sending = true when you actually plan to send after validation. I would also place sending = false right when callback returns, even if err
JavaScript
1
96
96
1
<!DOCTYPE html>2
<html lang="en">3
4
<head>5
<meta charset="utf-8">6
<meta name="viewport" content="width=device-width, initial-scale=1">7
<title>Androp</title>8
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">9
</head>10
11
<body>12
<div class="container-fluid">13
<p>14
<h1>Androp - Send to [] MBP</h1>15
</p>16
<div class="input-group mb-3">17
<button class="btn btn-outline-primary" type="button" onclick="send()">Send ☞</button>18
<input type="file" class="form-control" id="fileSelector">19
</div>20
<div id="alerts"></div>21
<div class="text-center">22
<div id="spinny" class="spinner-border" style="width: 3rem; height: 3rem; visibility: hidden;"></div>23
</div>24
</div>25
26
<script src="https://cdn.socket.io/4.5.0/socket.io.min.js" integrity="sha384-7EyYLQZgWBi67fBtVxw60/OWl1kjsfrPFcaU0pp0nAh+i8FD068QogUvg85Ewy1k" crossorigin="anonymous"></script>27
<script>28
const socket = io()29
const engine = socket.io.engine30
let maxSize = 031
let sending = false32
33
socket.on("disconnect", (reason) => {34
alert(`Disconnected from laptop! Check your internet or refresh the page. 💀 (${reason})`, "warning")35
})36
37
engine.on("close", reason => {38
console.log(reason)39
})40
41
socket.emit("getMaxSize", (size) => {42
return maxSize = size43
})44
45
const alert = (message, type) => {46
const wrapper = document.createElement('div')47
wrapper.innerHTML = [48
`<div class="alert alert-${type} fade show" role="alert">`,49
` <div>${message}</div>`,50
'</div>'51
].join('')52
53
document.getElementById("alerts").append(wrapper)54
55
return bootstrap.Alert.getOrCreateInstance(wrapper)56
}57
58
function send() {59
if (sending) {60
return false61
}62
63
64
const file = document.getElementById("fileSelector").files[0] || false65
66
function close(alert) {67
setTimeout(() => {68
alert.close()69
}, 3500)70
}71
72
73
if (!file) {74
return close(alert("No files to upload.", "warning"))75
}76
if (file.size >= maxSize) {77
return close(alert(`File is bigger than ${Math.round(maxSize / (1024 ** 2))} MB`, "danger"))78
}79
sending = true80
81
document.getElementById("spinny").style.visibility = 'visible'82
socket.timeout(10000).emit("upload", file, file.name, file.size, (err, status) => {83
if (err) {84
return close(alert("Could not contact laptop within 10s, laptop might be in sleep mode. 💀", "warning"))85
}86
document.getElementById("spinny").style.visibility = 'hidden'87
sending = false88
return close(alert(status.message, status.success ? "success" : "danger"))89
})90
}91
</script>92
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>93
94
</body>95
96
</html>