ezdz- Turn input type file into a nice drag & drop zone

Ezdz is a jQuery plugin to turn any standard input type file into a nice drag & drop zone with validators and previews.

Ezdz uses HTML5 File, Drag and Drop API, so it works properly on modern browsers only. I've tested it on last version of Chrome, Firefox and Safari on MacOSX and IOS7 safari mobile only. Feedbacks are welcomed.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: github.com

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="ezdz/dist/jquery.ezdz.min.css">
<script src="jquery.min.js"></script>
<script src="ezdz/dist/jquery.ezdz.min.js"></script>

2. HTML

<form action="" method="post" enctype="multipart/form-data">
      <input type="file" accept="image/png, image/jpeg">
      <input type="submit">
</form>

3. JAVASCRIPT

$('[type="file"]').ezdz({
	text: 'drop a picture',
	validators: {
		maxWidth:  600,
		maxHeight: 400
	},
	reject: function(file, errors) {
		if (errors.mimeType) {
			alert(file.name + ' must be an image.');
		}

		if (errors.maxWidth) {
			alert(file.name + ' must be width:600px max.');
		}

		if (errors.maxHeight) {
			alert(file.name + ' must be height:400px max.');
		}
	}
});

4. OPTIONS

className

Add a custom class to the container. By default none.

text

Set the dropzone text. By default "drop a file".

previewImage

Set if a image preview is displayed when an image is dropped. By default "true".

value

Set a link to a previously uploaded file. By default none.

classes

Ezdz classes. By default they are:

{ classes: {
        main:   'ezdz-dropzone',
        enter:  'ezdz-enter',
        reject: 'ezdz-reject',
        accept: 'ezdz-accept',
        focus:  'ezdz-focus'
    }
}

validators

Ezdz allowed validators. By default they are:

{ validators: {
        maxSize:   null,
        width:     null,
        maxWidth:  null,
        minWidth:  null,
        height:    null,
        maxHeight: null,
        minHeight: null
    }
}

Self-explanatory I guess.

$('[type="file"]').ezdz({
    validators: {
        maxWidth: 600,
        maxHeight: 400,
        maxSize: 1000000
    }
});

mime-types

Allowed mime-types are defined in the input tag with a standard acceptattribute.

<input type="file" name="logo" accept="image/png, image/jpeg" />

5. CALLBACKS

init

Called when the dropzone is built.

enter

Called when the dropzone is entered by the mouse.

leave

Called when the dropzone is leaved by the mouse.

accept

Called when a dropped/added file is added and accepted by validators.

{   accept: function(file) {
        alert('The file "' + file.name + '" is ok.');
    }
}

reject

Called when a dropped/added file is rejected by validators.

{   reject: function(file, errors) {
        if (errors.maxWidth || errors.maxHeight) {
            alert('The file "' + file.name + '" is too big.');
        }
    }
}

format

Called before displaying the filename in the preview.

{   format: function(filename) {
        return filename.uppercase();
    }
}

6. METHODS

preview

Inject a preview in the dropzone.

$('[type="file"]').ezdz('preview', 'img/previously-uploaded-logo.png');

options

Get or set the settings.

As a getter:

var options = $('[type="file"]').ezdz('options');

As a setter:

$('[type="file"]').ezdz('options', {
    validators: {
        maxSize: 10000
    }
});

destroy

Remove Ezdz from the input and get back to normal.

$('[type="file"]').ezdz('destroy');