{% extends "base.html" %} {% load humanize %} {% block style %} body { font-family: Ubuntu, sans-serif; } #subtd { text-align: right; } #drop-area { height: 50px; text-align: center; border: 2px dashed #ddd; padding: 10px; margin-bottom: 2em; } #drop-area .drop-instructions { display: block; height: 30px; } #drop-area .drop-over { display: none; font-size: 25px; height: 30px; } #drop-area.over { background: #ffffa2; border: 2px dashed #000; } #drop-area.over .drop-instructions { display: none; } #drop-area.over .drop-over { display: block; } #drop-area.over .drop-over { display: block; font-size: 25px; } #file-list { list-style: none; margin-bottom: 3em; } #file-list li { border-bottom: 1px solid #000; margin-bottom: 0.5em; padding-bottom: 0.5em; } #file-list li.no-items { border-bottom: none; } #file-list div { margin-bottom: 0.5em; } #file-list li img { max-width: 400px; } #file-list .progress-bar-container { width: 400px; height: 10px; border: 1px solid #555; margin-bottom: 20px; } #file-list .progress-bar-container.uploaded { height: auto; border: none; } #file-list .progress-bar { width: 0; height: 10px; font-weight: bold; background: #6787e3; } #file-list .progress-bar-container.uploaded .progress-bar{ display: inline-block; width: auto; color: #6db508; background: transparent; } #file-list .progress-bar-container.uploaded .progress-bar.failed { color: red; } {% endblock %} {% block script %} (function () { var filesUpload = document.getElementById("files-upload"); var dropArea = document.createElement("div"); dropArea.id = "drop-area"; dropArea.appendChild(document.createTextNode("drop files here")); document.getElementsByTagName("form")[0].appendChild(dropArea); var fileList = document.createElement("div"); fileList.id = "file-list"; document.getElementsByTagName("form")[0].appendChild(fileList); function uploadFile (file) { var li = document.createElement("li"), div = document.createElement("div"), img, progressBarContainer = document.createElement("div"), progressBar = document.createElement("div"), reader, xhr, fileInfo; li.appendChild(div); progressBarContainer.className = "progress-bar-container"; progressBar.className = "progress-bar"; progressBarContainer.appendChild(progressBar); li.appendChild(progressBarContainer); // Uploading - for Firefox, Google Chrome and Safari xhr = new XMLHttpRequest(); // Update progress bar xhr.upload.addEventListener("progress", function (evt) { if (evt.lengthComputable) { progressBar.style.width = (evt.loaded / evt.total) * 100 + "%"; } else { // No data to calculate on } }, false); // File uploaded xhr.addEventListener("load", function () { progressBarContainer.className += " uploaded"; var out = JSON.parse(this.responseText); if (out.successful.length > 0) { progressBar.innerHTML = "Uploaded successfully!"; } else { progressBar.innerHTML = out.failed[0].reason; progressBar.className += " failed"; } }, false); var boundary = '---------------------------' + (new Date()).getTime(); xhr.open("post", "", true); // Set appropriate headers xhr.setRequestHeader("Content-Type", "multipart/form-data; boundary=" + boundary); xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); // Send the file (doh) var body1 = '', body2 = ''; body1 += '--' + boundary + '\r\n' + 'Content-Disposition: form-data; name="csrfmiddlewaretoken"'; body1 += '\r\n\r\n'; body1 += document.getElementsByName("csrfmiddlewaretoken")[0].value; body1 += '\r\n' body1 += '--' + boundary + '\r\n' + 'Content-Disposition: form-data; name="fn"; filename="' + file.name + '"'; body1 += '\r\n\r\n'; body2 += '\r\n' body2 += '--' + boundary + '--'; reader = new FileReader(); reader.onload = (function(theXHR) { return function(evt) { var body = body1 + evt.target.result + body2; xhr.setRequestHeader('Content-length', body.length); xhr.send(body); }; }(xhr)); reader.readAsBinaryString(file); // Present file info and append it to the list of files fileInfo = "
Here you can upload files to {{uploader.user.first_name}} {{uploader.user.last_name}}'s Ubuntu One personal cloud.
{% if successful %} {% for s in successful %} {{ s }} {% endfor %} uploaded successfully! {% endif %} {% if failed %} Uploads failed: {% for f in failed %} {{ f.name }} ({{f.reason}}) {% endfor %} {% endif %} {% endblock %}