Just Drop Zone
A simple, light, low dependant library to create a dropzone. By default it creates a div in your specific element which would handle file dropped. After a file is added, a hidden file input
will create near the zone itself which you can use it anyway you want. the simplest way is to create a div
in your HTML form
. This way all hidden file input
s will submit with your form along other data.
- Clone project from this repo.
- Add it somewhere your front-end code can access.
- Add link to css file:
<link rel="stylesheet" href="/path_to_jdz/styles.css"/>
- Add script to js file:
<script src="path_to_jdz/index.js"></script>
- Add link to css file:
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/pouriamoosavi/jdz/styles.css"/>
- Add script to js file:
<script src="https://cdn.jsdelivr.net/gh/pouriamoosavi/jdz/index.js"></script>
JDZ
is a global object (in window
) so you can use it like JDZ.function_name
any where in your script right after you include it in your page.
For now there is only one way to use this library, calling init
function.
This function accepts two arguments, first is the id of the element you want to dropzone place in it. simplest configuration would be:
JDZ.init("jdzContainer"); // jdzContainer is the id of the element which would be JDZ parent
The second argument is an object with some extra options:
Key | Description | Type | Required | Default |
---|---|---|---|---|
dropFileHere |
The label which shows on the dropzone area. Accepts html too. | string | false | <p class="jdz-drop-files-here"> Drop Files Here ... </p> |
files |
Default files which will fill in dropzone from the beginning. | [object] | false | null |
paramName |
The name of the input elements which will create for each file (either drop or browse). This value does not effect default files as they have their own paramName . This feature helps you distinguish files in your server. |
string | false | "files" |
Each object in files
array, can have these keys:
Key | Description | Type | Required | Default |
---|---|---|---|---|
blob |
The blob of the file data. You can read about blobs here | Blob | false | [""] |
name |
The file's name | string | true | "" |
mime |
The file's mimetype | string | false | "image/png" |
path |
The file's source url (in your server for example) | string | true | "" |
paramName |
The name of the input element for this specific file. | string | false | "oldFiles" |
Beside those options
there are two functions which you can access from JDZ
:
Name | Description | Inputs | Output |
---|---|---|---|
browse |
Open file browse dialog to choose file/files from system. | null |
null |
delete |
Delete one file from both dropzone and file input s |
id : number |
null |
init
with options:
JDZ.init("jdzContainer", {
dropFileHere: "<labe>Awesome Drop Zone!</label>",
files: [
{
name: "radome photo.png",
path: "https://picsum.photos/200/300",
mime: "image/png",
paramName: "defaultFiles",
},
],
paramName: "photos",
});
Calling browse
function:
<button type="button" onclick="JDZ.browse()"><i class="fa fa-upload"></i> upload</button>
Full example: Simple Example
- Font Awesome (fa) >= 5
Feel free to report bugs and issues. Also new ideas will be appreciated. For now I think the most important things to do are:
- Add more options specially for styles, labels, sizing, showing preview buttons and button labels.
- Add more events and hooks. (e.g:
onDrop
,beforeDelete
, ...)
So if you find them cool, you can help me!