-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
151 lines (136 loc) · 5.69 KB
/
index.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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>File Encoder/Decoder</title>
</head>
<body>
<h1>File Encoder/Decoder</h1>
<div id="imageDisplay" style="text-align: center; margin-bottom: 20px">
<!-- Image will be displayed here if uploaded file is an image -->
</div>
<div id="uploadContainer">
<label for="uploadBtn">Upload File to Encode:</label>
<input type="file" id="uploadBtn" />
<input type="text" id="linkArea" readonly />
<button id="copyBtn">Copy to Clipboard</button>
</div>
<div id="downloadContainer">
<!-- Download button will be auto-generated here if needed -->
</div>
<button id="toggleModeBtn">Switch Mode</button>
<script>
document.addEventListener("DOMContentLoaded", function () {
const uploadContainer = document.getElementById("uploadContainer");
const downloadContainer = document.getElementById("downloadContainer");
const toggleModeBtn = document.getElementById("toggleModeBtn");
const imageDisplay = document.getElementById("imageDisplay");
// Function to check if the file is an image based on the file extension
function isImageFile(fileName) {
return /\.(jpg|jpeg|png|gif)$/i.test(fileName);
}
// Function to display the image
function displayImage(base64, fileName) {
if (isImageFile(fileName)) {
const img = document.createElement("img");
img.src = base64;
img.style.maxWidth = "100%";
img.style.maxHeight = "400px";
imageDisplay.innerHTML = ""; // Clear any previous images
imageDisplay.appendChild(img);
}
}
// Function to encode the file to base64 and generate a link
function encodeFile(file) {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
const base64String = reader.result
.replace("data:", "")
.replace(/^.+,/, "");
const encodedLink = `${
window.location.href.split("?")[0]
}?file=${encodeURIComponent(
base64String
)}&name=${encodeURIComponent(file.name)}`;
document.getElementById("linkArea").value = encodedLink;
// Use the displayImage function to display the image
//displayImage(reader.result, file.name);
};
}
// Event listener for the upload button
document
.getElementById("uploadBtn")
.addEventListener("change", function (event) {
if (this.files.length > 0) {
encodeFile(this.files[0]);
}
});
// Function to set clipboard content
function copyToClipboard(text) {
const dummy = document.createElement("textarea");
document.body.appendChild(dummy);
dummy.value = text;
dummy.select();
document.execCommand("copy");
document.body.removeChild(dummy);
}
// Event listener for the copy to clipboard button
document
.getElementById("copyBtn")
.addEventListener("click", function () {
const linkArea = document.getElementById("linkArea");
if (linkArea.value) {
copyToClipboard(linkArea.value);
alert("Link copied to clipboard!");
}
});
// Function to decode the base64 string and trigger a download
function decodeAndDownload(base64Data, fileName) {
const link = document.createElement("a");
link.href = `data:application/octet-stream;base64,${base64Data}`;
link.download = fileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
// Toggle between upload and download mode
function toggleMode() {
if (uploadContainer.style.display === "none") {
uploadContainer.style.display = "block";
downloadContainer.style.display = "none";
toggleModeBtn.textContent = "Switch to Download Mode";
} else {
uploadContainer.style.display = "none";
downloadContainer.style.display = "block";
toggleModeBtn.textContent = "Switch to Upload Mode";
}
}
// If the page is loaded with a file argument, create the download button
const urlParams = new URLSearchParams(window.location.search);
const fileParam = urlParams.get("file");
const nameParam = urlParams.get("name");
if (fileParam && nameParam) {
uploadContainer.style.display = "none";
toggleModeBtn.textContent = "Switch to Upload Mode";
const downloadBtn = document.createElement("button");
downloadBtn.textContent = "Download File";
downloadBtn.addEventListener("click", function () {
decodeAndDownload(fileParam, decodeURIComponent(nameParam));
});
downloadContainer.appendChild(downloadBtn);
downloadContainer.style.display = "block";
// Decode the base64 string to display the image
const base64Data = `data:application/octet-stream;base64,${fileParam}`;
displayImage(base64Data, decodeURIComponent(nameParam));
} else {
downloadContainer.style.display = "none";
toggleModeBtn.textContent = "Switch to Download Mode";
}
// Event listener for the toggle mode button
toggleModeBtn.addEventListener("click", toggleMode);
});
</script>
</body>
</html>