uploadmanager.js

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);
};