andreimarcu
9 years ago
8 changed files with 1902 additions and 1439 deletions
-
85server_test.go
-
58static/css/dropzone.css
-
4static/css/linx.css
-
1291static/js/cat.js
-
1729static/js/dropzone.js
-
74static/js/upload.js
-
87templates/index.html
-
13upload.go
@ -0,0 +1,58 @@ |
|||||
|
#dropzone { |
||||
|
width: 400px; |
||||
|
margin-left: auto; |
||||
|
margin-right: auto; |
||||
|
} |
||||
|
|
||||
|
#choices { |
||||
|
padding-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
div.dz-default { |
||||
|
border: 2px dashed #C9C9C9; |
||||
|
color: #C9C9C9; |
||||
|
font: 14px "helvetica neue",helvetica,arial,sans-serif; |
||||
|
background-color: #FAFBFC; |
||||
|
padding-top: 60px; |
||||
|
padding-bottom: 60px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
div.dz-default:hover { |
||||
|
background-color: #eff4f8; |
||||
|
} |
||||
|
|
||||
|
div.upload { |
||||
|
background-color: #E2E2E2; |
||||
|
border: 1px solid #C9C9C9; |
||||
|
margin-bottom: 5px; |
||||
|
padding: 5px; |
||||
|
} |
||||
|
|
||||
|
.upload { |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
.upload a { |
||||
|
font-size: 12px; |
||||
|
text-decoration: none; |
||||
|
border-bottom: 1px dotted #556A7F; |
||||
|
font-weight: 600; |
||||
|
color: #556A7F; |
||||
|
} |
||||
|
|
||||
|
.upload a:hover { |
||||
|
border-bottom: 1px dotted #556A7F; |
||||
|
color: #556A7F; |
||||
|
} |
||||
|
|
||||
|
.upload .right { |
||||
|
float: right; |
||||
|
padding-left: 5px; |
||||
|
} |
||||
|
|
||||
|
.cancel { |
||||
|
margin-right: 5px; |
||||
|
font-size: 10px; |
||||
|
border-bottom: 1px dotted #556A7F; |
||||
|
} |
1291
static/js/cat.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
1729
static/js/dropzone.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,74 @@ |
|||||
|
Dropzone.options.dropzone = { |
||||
|
addedfile: function(file) { |
||||
|
var upload = document.createElement("div"); |
||||
|
upload.className = "upload"; |
||||
|
|
||||
|
var left = document.createElement("span"); |
||||
|
left.innerHTML = file.name; |
||||
|
file.leftElement = left; |
||||
|
upload.appendChild(left); |
||||
|
|
||||
|
var right = document.createElement("div"); |
||||
|
right.className = "right"; |
||||
|
var rightleft = document.createElement("span"); |
||||
|
rightleft.className = "cancel"; |
||||
|
rightleft.innerHTML = "Cancel"; |
||||
|
rightleft.onclick = function(ev) { |
||||
|
this.removeFile(file); |
||||
|
}.bind(this); |
||||
|
|
||||
|
var rightright = document.createElement("span"); |
||||
|
right.appendChild(rightleft); |
||||
|
file.rightLeftElement = rightleft; |
||||
|
right.appendChild(rightright); |
||||
|
file.rightRightElement = rightright; |
||||
|
file.rightElement = right; |
||||
|
upload.appendChild(right); |
||||
|
file.uploadElement = upload; |
||||
|
document.getElementById("uploads").appendChild(upload); |
||||
|
}, |
||||
|
uploadprogress: function(file, p, bytesSent) { |
||||
|
p = parseInt(p); |
||||
|
file.rightRightElement.innerHTML = p + "%"; |
||||
|
file.uploadElement.setAttribute("style", 'background-image: -webkit-linear-gradient(left, #F2F4F7 ' + p + '%, #E2E2E2 ' + p + '%); background-image: -moz-linear-gradient(left, #F2F4F7 ' + p + '%, #E2E2E2 ' + p + '%); background-image: -ms-linear-gradient(left, #F2F4F7 ' + p + '%, #E2E2E2 ' + p + '%); background-image: -o-linear-gradient(left, #F2F4F7 ' + p + '%, #E2E2E2 ' + p + '%); background-image: linear-gradient(left, #F2F4F7 ' + p + '%, #E2E2E2 ' + p + '%)'); |
||||
|
}, |
||||
|
success: function(file, resp) { |
||||
|
file.rightLeftElement.innerHTML = ""; |
||||
|
file.leftElement.innerHTML = '<a target="_blank" href="' + resp.url + '">' + resp.url + '</a>'; |
||||
|
file.rightRightElement.innerHTML = "Delete"; |
||||
|
file.rightRightElement.className = "cancel"; |
||||
|
file.rightRightElement.style.color = "#E68181"; |
||||
|
file.rightRightElement.onclick = function(ev) { |
||||
|
xhr = new XMLHttpRequest(); |
||||
|
xhr.open("DELETE", resp.url, true); |
||||
|
xhr.setRequestHeader("X-Delete-Key", resp.delete_key); |
||||
|
xhr.onreadystatechange = function(file) { |
||||
|
if (xhr.status === 404) { |
||||
|
file.leftElement.innerHTML = 'Deleted <a target="_blank" href="' + resp.url + '">' + resp.url + '</a>'; |
||||
|
file.leftElement.style.color = "#E68181"; |
||||
|
file.rightRightElement.onclick = null; |
||||
|
file.rightRightElement.innerHTML = ""; |
||||
|
} |
||||
|
}.bind(this, file); |
||||
|
xhr.send(); |
||||
|
}.bind(this); |
||||
|
}, |
||||
|
error: function(file, errMsg, xhrO) { |
||||
|
file.rightLeftElement.onclick = null; |
||||
|
file.rightLeftElement.innerHTML = ""; |
||||
|
file.rightRightElement.innerHTML = ""; |
||||
|
if (file.status === "canceled") { |
||||
|
file.leftElement.innerHTML = "Canceled " + file.name; |
||||
|
} |
||||
|
else { |
||||
|
file.leftElement.innerHTML = "Could not upload " + file.name; |
||||
|
} |
||||
|
file.leftElement.style.color = "#E68181"; |
||||
|
}, |
||||
|
maxFilesize: 4096, |
||||
|
previewsContainer: "#uploads", |
||||
|
parallelUploads: 5, |
||||
|
headers: {"Accept": "application/json"}, |
||||
|
dictDefaultMessage: "Click or Drop file(s)", |
||||
|
dictFallbackMessage: "" |
||||
|
}; |
@ -1,58 +1,45 @@ |
|||||
{% extends "base.html" %} |
{% extends "base.html" %} |
||||
|
|
||||
{% block content %} |
|
||||
|
{% block head %} |
||||
|
<link href='/static/css/dropzone.css' media='screen, projection' rel='stylesheet' type='text/css'> |
||||
|
{% endblock %} |
||||
|
|
||||
|
{% block content %} |
||||
<div id="fileupload"> |
<div id="fileupload"> |
||||
|
|
||||
<div id="html5"> |
|
||||
<div class="clear"></div> |
|
||||
|
|
||||
<form action="/upload" method="POST" enctype="multipart/form-data"> |
|
||||
<div id="file-uploader" style="min-width: 400px;"> |
|
||||
<br /> |
|
||||
<input type="file" name="file" id="file_upload" name="file"><br/ ><br/ > |
|
||||
<input id ="upload_btn" type="submit" value="Upload"> |
|
||||
<br /><br /> |
|
||||
</div> |
|
||||
|
|
||||
<div id="choices"> |
|
||||
<div id="expiry"> |
|
||||
<label>File expiry: |
|
||||
<select name="expires" id="expires" onchange="uploader.setParams({expires: $('#expires').val(), randomize: $('#randomize').is(':checked')})"> |
|
||||
</label> |
|
||||
<option value="0">never</option> |
|
||||
<option value="60">a minute</option> |
|
||||
<option value="300">5 minutes</option> |
|
||||
<option value="3600">an hour</option> |
|
||||
<option value="86400">a day</option> |
|
||||
<option value="604800">a week</option> |
|
||||
<option value="2419200">a month</option> |
|
||||
<option value="29030400">a year</option> |
|
||||
</select> |
|
||||
</div> |
|
||||
|
|
||||
<label><input name="randomize" id="randomize" type="checkbox" checked onclick="uploader.setParams({expires: $('#expires').val(), randomize: $('#randomize').is(':checked')})" /> Randomize filename</label> |
|
||||
|
|
||||
|
<form action="/upload" class="dropzone" id="dropzone" method="POST" enctype="multipart/form-data"> |
||||
|
<div class="fallback"> |
||||
|
<input name="file" type="file" /><br /> |
||||
|
<input type="submit" value="Upload"> |
||||
|
</div> |
||||
|
|
||||
|
<div class="dz-default dz-message"> |
||||
|
<span>Click or Drop file(s)</span> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
<div id="choices"> |
||||
|
<div id="expiry"> |
||||
|
<label>File expiry: |
||||
|
<select name="expires" id="expires"> |
||||
|
</label> |
||||
|
<option value="0">never</option> |
||||
|
<option value="60">a minute</option> |
||||
|
<option value="300">5 minutes</option> |
||||
|
<option value="3600">an hour</option> |
||||
|
<option value="86400">a day</option> |
||||
|
<option value="604800">a week</option> |
||||
|
<option value="2419200">a month</option> |
||||
|
<option value="29030400">a year</option> |
||||
|
</select> |
||||
</div> |
</div> |
||||
|
|
||||
</form> |
|
||||
|
|
||||
<div style="clear:both;"></div> |
|
||||
|
|
||||
</div> |
|
||||
|
<label><input name="randomize" id="randomize" type="checkbox" checked /> Randomize filename</label> |
||||
|
</div> |
||||
|
<div class="clear"></div> |
||||
|
</form> |
||||
|
<div id="uploads"></div> |
||||
|
<div style="clear:both;"></div> |
||||
</div> |
</div> |
||||
|
|
||||
<script type="text/javascript"> |
|
||||
function downloadJSAtOnload() { |
|
||||
var element = document.createElement("script"); |
|
||||
element.src = "/static/js/cat.js"; |
|
||||
document.body.appendChild(element); |
|
||||
} |
|
||||
if (window.addEventListener) |
|
||||
window.addEventListener("load", downloadJSAtOnload, false); |
|
||||
else if (window.attachEvent) |
|
||||
window.attachEvent("onload", downloadJSAtOnload); |
|
||||
else window.onload = downloadJSAtOnload; |
|
||||
</script> |
|
||||
|
|
||||
|
<script src="/static/js/dropzone.js"></script> |
||||
|
<script src="/static/js/upload.js"></script> |
||||
{% endblock %} |
{% endblock %} |
Write
Preview
Loading…
Cancel
Save
Reference in new issue