Created
July 12, 2016 12:40
-
-
Save goldenflower/100af2a8d6d681c7d0a7755223ed8f0a to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
L.Micello.UploadManager= L.Class.extend({ | |
options: { | |
id: '', | |
callback: '', | |
backGroundColor : '#ffffff', | |
width : '600px', | |
height : '400px', | |
border : '1px solid #C8C8C8', | |
greyTextColor :'#D4D2D2', | |
blueTextColor : '#6FABE3' | |
}, | |
initialize: function (element, options) { | |
this.element = element; | |
this.element.id = this.options.id ; | |
var callback = this.options.callback; | |
var callback = this.options.callback; | |
var width = this.options.width; | |
var width = this.options.height; | |
var backGroundColor = this.options.backGroundColor; | |
var border = this.options.border; | |
var greyTextColor = this.options.greyTextColor; | |
var blueTextColor = this.options.blueTextColor; | |
// class constructor | |
}, | |
loadForm: function (element, options) { | |
if (window.File && window.FileReader && window.FileList && window.Blob) { | |
var maindiv = this.element; | |
maindiv.style.width = this.getOuterWidth(options); | |
maindiv.style.height = this.getOuterHeight(options); | |
maindiv.style.backgroundColor = this.getBackgroundColor(options); | |
maindiv.style.border = this.getBorder(options); | |
var modalDiv = L.DomUtil.create('div','modal-content', maindiv); | |
modalDiv.id = 'modaldiv'; | |
modalDiv.style.margin = 'auto'; | |
var pcontent = L.DomUtil.create('p','micello-win-menu-item', modalDiv); | |
pcontent.innerHTML = 'Choose a file '; | |
pcontent.id = "pcont1"; | |
pcontent.style.border = '0px'; | |
pcontent.style.color = this.getBlueFontColor(options); | |
var pcont2 = L.DomUtil.create('p','', pcontent); | |
pcont2.innerHTML = '<input type="file" display="none" id="files" name="files[]" multiple />'; | |
pcont2.id = "pcont2"; | |
pcont2.style.display = "none"; | |
var divdrag = L.DomUtil.create('div','', pcontent); | |
divdrag.id ="drop_zone"; | |
divdrag.style.width = this.getOuterWidth(options); | |
divdrag.style.height = this.getOuterHeight(options); | |
divdrag.style.border ='0px'; | |
var pdrag = L.DomUtil.create('p','', divdrag); | |
pdrag.innerHTML = "or Drag it here"; | |
pdrag.style.color = this.getGreyFontColor(options); | |
var output = L.DomUtil.create('list','output', modalDiv); | |
output.id = "list"; | |
var progress = L.DomUtil.create('div','percent', modalDiv); | |
progress.id ="progress_bar"; | |
//progress.style = "margin: 10px 0; padding: 3px; border: 1px solid #000; font-size: 14px; clear: both; opacity: 0; -moz-transition: opacity 1s linear; -o-transition: opacity 1s linear; -webkit-transition: opacity 1s linear;"; | |
document.getElementById('pcont1').addEventListener('click', this.clickFile, false); | |
document.getElementById('files').addEventListener('change', this.handleFileSelect, false); | |
// Setup the dnd listeners. | |
var dropZone = document.getElementById('drop_zone'); | |
dropZone.addEventListener('dragover', this.handleDragOver, false); | |
dropZone.addEventListener('drop', this.handleFileSelectDrag, false); | |
return maindiv ; | |
} else { | |
alert('The File APIs are not fully supported in this browser.'); | |
} | |
}, | |
clickFile: function (evt) { | |
document.getElementById('files').click(); | |
}, | |
handleFileSelect: function (evt) { | |
var reader = new FileReader(); | |
var file = evt.target.files[0]; | |
var filename = file.name; | |
var header = []; | |
var data = []; | |
if(!file.type.match('csv.*')) { | |
alert(file.name + " is not a valid CSV file."); | |
} | |
if(file){ | |
reader.onload = function (evt) { | |
document.getElementById('progress_bar').innerHTML = 'loading...'; | |
var csv = evt.target.result; | |
var allTextLines = csv.split(/\r\n|\n/); | |
var lines = []; | |
while (allTextLines.length) { | |
lines.push(allTextLines.shift().split(',')); | |
} | |
for (var i=0; i<lines.length; i++) { | |
if(i==0){ | |
header.push(lines[i]); | |
}else{ | |
data.push(lines[i]); | |
} | |
} | |
var output = []; | |
//console.log('-->'+file.name); | |
output.push({ | |
'file': file.name, | |
'header': header, | |
'data': data, | |
'success': 'true', | |
'msg': 'null' | |
}); | |
console.log(JSON.stringify(output)); | |
document.getElementById("list").innerHTML = JSON.stringify(output); | |
} | |
reader.readAsText(file); | |
}else { | |
alert("Failed to load file"); | |
} | |
reader.onerror = function (evt) { | |
if(evt.target.error.name == "NotReadableError") { | |
alert("Canno't read file !"); | |
} | |
} | |
// Read file into memory as UTF-8 | |
}, | |
handleFileSelectDrag: function(evt) { | |
evt.stopPropagation(); | |
evt.preventDefault(); | |
var files = evt.dataTransfer.files; // FileList object. | |
// files is a FileList of File objects. List some properties. | |
var output = []; | |
for (var i = 0, f; f = files[i]; i++) { | |
output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ', | |
f.size, ' bytes, last modified: ', | |
f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a', | |
'</li>'); | |
} | |
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>'; | |
}, | |
handleDragOver: function(evt) { | |
evt.stopPropagation(); | |
evt.preventDefault(); | |
evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy. | |
}, | |
getBlueFontColor: function(options){ | |
if(this.options.blueTextColor === 'undefined'){ | |
return this.blueTextColor; | |
}else{ | |
return this.options.blueTextColor; | |
} | |
}, | |
getGreyFontColor: function(options){ | |
if(this.options.greyTextColor === 'undefined'){ | |
return this.greyTextColor; | |
}else{ | |
return this.options.greyTextColor; | |
} | |
}, | |
getOuterWidth: function(options){ | |
if(this.options.width === 'undefined'){ | |
return this.width; | |
}else{ | |
return this.options.width; | |
} | |
}, | |
getOuterHeight: function(options){ | |
if(this.options.height === 'undefined'){ | |
return this.height; | |
}else{ | |
return this.options.height; | |
} | |
}, | |
getBackgroundColor: function(options){ | |
if(this.options.backGroundColor === 'undefined'){ | |
return this.backGroundColor; | |
}else{ | |
return this.options.backGroundColor; | |
} | |
}, | |
getBorder: function(options){ | |
if(this.options.border === 'undefined'){ | |
return this.border; | |
}else{ | |
return this.options.border; | |
} | |
} | |
}); | |
L.micello.uploadmanager = function (element, options) { | |
return new L.Micello.UploadManager(element, options); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment