Skip to content

Instantly share code, notes, and snippets.

@oxyno-zeta

oxyno-zeta/index-advanced.html

Last active February 22, 2022 09:18
Show Gist options
  • Save oxyno-zeta/2edeaf031389f8415eee287be88285c0 to your computer and use it in GitHub Desktop.
Save oxyno-zeta/2edeaf031389f8415eee287be88285c0 to your computer and use it in GitHub Desktop.
Download ZIP
Simple upload page for s3-proxy
Raw
index-advanced.html
<!DOCTYPE html>
<html>
<head>
<title>File Upload Example</title>
<link
href="https://releases.transloadit.com/uppy/v2.4.1/uppy.min.css"
rel="stylesheet"
/>
<style>
body {
margin: auto;
width: 50%;
}
table,
th,
td {
border: 1px solid;
}
table {
border-collapse: collapse;
width: 100%;
}
</style>
</head>
<body>
<div style="text-align: center; margin: 20px 0">
<div>Past Upload Keys</div>
<div id="past-upload-keys"></div>
</div>
<div style="text-align: center; margin: 20px 0">
<div>Upload Key:</div>
<b id="upload-key"></b>
</div>
<div id="drag-drop-area"></div>
<div style="text-align: center; margin: 20px 0">
Made with love by Oxyno-zeta
</div>
<script src="https://releases.transloadit.com/uppy/v2.4.1/uppy.min.js"></script>
<script>
function makeid(length) {
var result = "";
var characters =
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
var charactersLength = characters.length;
for (var i = 0; i < length; i++) {
result += characters.charAt(
Math.floor(Math.random() * charactersLength)
);
}
return result;
}
if (localStorage.emUploadKeys) {
// Parse
var parsed = JSON.parse(localStorage.emUploadKeys);
var table = document.createElement("table");
var th = document.createElement("tr");
var head = ["Upload Key", "Date", "Files"];
for (var i = 0; i < head.length; i++) {
var it = document.createElement("th");
it.innerHTML = head[i];
th.appendChild(it);
}
table.appendChild(th);
for (var i = 0; i < parsed.length; i++) {
var tr = document.createElement("tr");
table.appendChild(tr);
var element = parsed[i];
var keyTd = document.createElement("td");
keyTd.innerHTML = element.key;
tr.appendChild(keyTd);
var dateTd = document.createElement("td");
dateTd.innerHTML = element.date;
tr.appendChild(dateTd);
var filesTd = document.createElement("td");
filesHTML = "<ul>";
for (var j = 0; j < element.files.length; j++) {
var file = element.files[j];
filesHTML += "<li>" + file.name + " : " + file.status + "</li>";
}
filesHTML += "</ul>";
filesTd.innerHTML = filesHTML;
tr.appendChild(filesTd);
}
document.getElementById("past-upload-keys").appendChild(table);
}
var uploadKey = makeid(25);
var uppy = new Uppy.Core({
debug: true,
restrictions: {
maxNumberOfFiles: 20,
minNumberOfFiles: 1,
},
});
uppy
.use(Uppy.Dashboard, {
target: "#drag-drop-area",
showProgressDetails: true,
inline: true,
width: "100%",
height: 550,
doneButtonHandler: function () {
uppy.reset();
},
})
.use(Uppy.XHRUpload, {
endpoint: "/upload/" + uploadKey + "/",
method: "PUT",
formData: true,
limit: 1,
timeout: 3600 * 1000,
});
uppy.on("complete", (result) => {
console.log("successful files:", result.successful);
console.log("failed files:", result.failed);
if (!localStorage.emUploadKeys) {
localStorage.emUploadKeys = "[]";
}
var parsed = JSON.parse(localStorage.emUploadKeys);
if (parsed.length >= 5) {
// Remove first element
parsed.shift();
// Save
localStorage.emUploadKeys = JSON.stringify(parsed);
}
var files = [];
for (var i = 0; i < result.successful.length; i++) {
files.push({ name: result.successful[i].name, status: "SUCCESS" });
}
for (var i = 0; i < result.failed.length; i++) {
files.push({ name: result.failed[i].name, status: "FAILED" });
}
if (parsed.length > 0 && parsed[parsed.length - 1].key == uploadKey) {
// already exists
parsed[parsed.length - 1].files =
parsed[parsed.length - 1].files.concat(files);
} else {
var element = {
key: uploadKey,
date: new Date().toLocaleString(),
files: files,
};
parsed.push(element);
}
localStorage.emUploadKeys = JSON.stringify(parsed);
});
document.getElementById("upload-key").innerHTML = uploadKey;
</script>
</body>
</html>
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>File Upload Example</title>
<link
href="https://releases.transloadit.com/uppy/v2.4.1/uppy.min.css"
rel="stylesheet"
/>
<style>
body {
margin: auto;
width: 50%;
}
</style>
</head>
<body>
<div style="text-align: center; margin: 20px 0">
<div>Upload Key:</div>
<b id="upload-key"></b>
</div>
<div id="drag-drop-area"></div>
<div style="text-align: center; margin: 20px 0">
Made with love by Oxyno-zeta
</div>
<script src="https://releases.transloadit.com/uppy/v2.4.1/uppy.min.js"></script>
<script>
function makeid(length) {
var result = "";
var characters =
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
var charactersLength = characters.length;
for (var i = 0; i < length; i++) {
result += characters.charAt(
Math.floor(Math.random() * charactersLength)
);
}
return result;
}
var uploadKey = makeid(25) + "/" + makeid(25);
var uppy = new Uppy.Core({
debug: true,
restrictions: {
maxNumberOfFiles: 20,
minNumberOfFiles: 1,
},
});
uppy
.use(Uppy.Dashboard, {
target: "#drag-drop-area",
showProgressDetails: true,
inline: true,
width: "100%",
height: 550,
doneButtonHandler: function () {
uppy.reset();
},
})
.use(Uppy.XHRUpload, {
endpoint: "/upload/" + uploadKey,
method: "PUT",
formData: true,
limit: 1,
});
document.getElementById("upload-key").innerHTML = uploadKey;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment