diff --git a/index.css b/index.css index babf2b6..2957707 100644 --- a/index.css +++ b/index.css @@ -283,4 +283,10 @@ div::-webkit-scrollbar-thumb { #subtitle { font-size: 10px; +} + +#uploader-droparea { + width:100px; + height:100px; + background-color: #F0F; } \ No newline at end of file diff --git a/index.html b/index.html index 11d93e0..1577923 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ + @@ -323,7 +327,13 @@

JSONLoops

- +
+
+
+
+ +
+
\ No newline at end of file diff --git a/lib/upload.js b/lib/upload.js new file mode 100644 index 0000000..38a4c27 --- /dev/null +++ b/lib/upload.js @@ -0,0 +1,162 @@ +/* +* Upload files to the server using HTML 5 Drag and drop the folders on your local computer +* +* Tested on: +* Mozilla Firefox 3.6.12 +* Google Chrome 7.0.517.41 +* Safari 5.0.2 +* Safari na iPad +* WebKit r70732 +* +* The current version does not work on: +* Opera 10.63 +* Opera 11 alpha +* IE 6+ +*/ + +function uploader(place, status, targetPHP) { + + // Upload image files + upload = function(file) { + + // Firefox 3.6, Chrome 6, WebKit + if(window.FileReader) { + + // Once the process of reading file + this.loadEnd = function() { + bin = reader.result; + xhr = new XMLHttpRequest(); + xhr.open('POST', targetPHP+'?up=true', true); + var boundary = 'xxxxxxxxx'; + var body = '--' + boundary + "\r\n"; + body += "Content-Disposition: form-data; name='upload'; filename='" + file.name + "'\r\n"; + body += "Content-Type: application/octet-stream\r\n\r\n"; + body += bin + "\r\n"; + body += '--' + boundary + '--'; + xhr.setRequestHeader('content-type', 'multipart/form-data; boundary=' + boundary); + // Firefox 3.6 provides a feature sendAsBinary () + if(xhr.sendAsBinary != null) { + xhr.sendAsBinary(body); + // Chrome 7 sends data but you must use the base64_decode on the PHP side + } else { + xhr.open('POST', targetPHP+'?up=true&base64=true', true); + xhr.setRequestHeader('UP-FILENAME', file.name); + xhr.setRequestHeader('UP-SIZE', file.size); + xhr.setRequestHeader('UP-TYPE', file.type); + xhr.send(window.btoa(bin)); + } + if (show) { + var newFile = document.createElement('div'); + newFile.innerHTML = 'Loaded : '+file.name+' size '+file.size+' B'; + document.getElementById(show).appendChild(newFile); + } + if (status) { + document.getElementById(status).innerHTML = 'Loaded : 100%
Next file ...'; + } + } + + // Loading errors + this.loadError = function(event) { + switch(event.target.error.code) { + case event.target.error.NOT_FOUND_ERR: + document.getElementById(status).innerHTML = 'File not found!'; + break; + case event.target.error.NOT_READABLE_ERR: + document.getElementById(status).innerHTML = 'File not readable!'; + break; + case event.target.error.ABORT_ERR: + break; + default: + document.getElementById(status).innerHTML = 'Read error.'; + } + } + + // Reading Progress + this.loadProgress = function(event) { + if (event.lengthComputable) { + var percentage = Math.round((event.loaded * 100) / event.total); + document.getElementById(status).innerHTML = 'Loaded : '+percentage+'%'; + } + } + + // Preview images + this.previewNow = function(event) {} + + reader = new FileReader(); + // Firefox 3.6, WebKit + if(reader.addEventListener) { + reader.addEventListener('loadend', this.loadEnd, false); + if (status != null) + { + reader.addEventListener('error', this.loadError, false); + reader.addEventListener('progress', this.loadProgress, false); + } + + // Chrome 7 + } else { + reader.onloadend = this.loadEnd; + if (status != null) + { + reader.onerror = this.loadError; + reader.onprogress = this.loadProgress; + } + } + var preview = new FileReader(); + // Firefox 3.6, WebKit + if(preview.addEventListener) { + preview.addEventListener('loadend', this.previewNow, false); + // Chrome 7 + } else { + preview.onloadend = this.previewNow; + } + + // The function that starts reading the file as a binary string + reader.readAsBinaryString(file); + + // Preview uploaded files + if (show) { + preview.readAsDataURL(file); + } + + // Safari 5 does not support FileReader + } else { + xhr = new XMLHttpRequest(); + xhr.open('POST', targetPHP+'?up=true', true); + xhr.setRequestHeader('UP-FILENAME', file.name); + xhr.setRequestHeader('UP-SIZE', file.size); + xhr.setRequestHeader('UP-TYPE', file.type); + xhr.send(file); + + if (status) { + document.getElementById(status).innerHTML = 'Loaded : 100%'; + } + if (show) { + var newFile = document.createElement('div'); + newFile.innerHTML = 'Loaded : '+file.name+' size '+file.size+' B'; + document.getElementById(show).appendChild(newFile); + } + } + } + + // Function drop file + this.drop = function(event) { + event.preventDefault(); + var dt = event.dataTransfer; + var files = dt.files; + for (var i = 0; i