swamp

by slawe

HTML

<div id="swap_zone" class="swap_area">
	<h1>Drop Here</h1>
</div>
<form id="demo_from" class="demo_form" name="upload_media">
    <label>One:</label>
    <input type="text" placeholder="one">
    <label>Two:</label>
    <input type="text" placeholder="two">
    <input type="file" multiple />
    <input type="submit" value="Send">
</form>
<output id="list"></output>

CSS

.thumb {
    height: 75px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
  }
.swap_area{
    position: relative;
    min-height: 100px;
    height: auto;
    padding: 10px;
    margin-bottom: 10px;
    cursor: move;
    border: 1px dotted #ccc;
}
.swap_area h1{
    position: absolute;
    top: 25px;
    width: 100%;
    color: #ccc;
    z-index: 0;
    text-align: center;
    vertical-align: middle;
}
.invalid {
    border: 1px solid red !important;
}

JavaScript

/* 
 * JS SWAMP CLASS
 */

// this is example how to use
var config = {
    form_id: 'demo_form',
    output: 'list',
    drop_zone: 'swap_zone',
    support : 'image/jpg,image/jpeg',    // jpg format only for test
    route: ''
};

plop_in_the_swamp(config);
// end of example

// JS Swamp Class

function swamp(config) {

    this.config = config;
    this.items = '';
    this.all = [];
    var self = this;

    swamp.prototype.init = function () {
        if (window.File && window.FileReader && window.FileList && window.Blob) {
            var button = this.button();
            button.choose_file.addEventListener('change', self.choose_files, false);
            
            document.getElementById(this.config.drop_zone).addEventListener('dragover', function (e) {
                e.stopPropagation();
                e.preventDefault();
            }, false);
            
            document.getElementById(this.config.drop_zone).addEventListener('drop', this.drop_files, false);
            button.submit.addEventListener('submit', this.execute, false);
        }
        else {
            console.log('Browser supports failed');
        }
    };
    
    swamp.prototype.execute = function (e) {
        e.stopPropagation();
        e.preventDefault();
        self.swamp_decadence();
    };
    
    swamp.prototype.choose_files = function (evt) {
        if (evt.target.files) {
            self.preview(evt.target.files);
            self.all.push(evt.target.files);
        }
        else {
            console.log('Failed file reading');
        }
    };
    
    swamp.prototype.drop_files = function (e) {
        e.stopPropagation();
        e.preventDefault();
        self.preview(e.dataTransfer.files);
        self.all.push(e.dataTransfer.files);
    };
    
    swamp.prototype.validation = function (format) {
        var array = this.config.support.split(',');
        return array.indexOf(format);
    };

    swamp.prototype.button = function () {
        var...