Single Dropzone FileUpLoad
44 | 46 |Multi Dropzone FileUpLoad
47 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Drag-n-Drop-Fileupload 2 | 3 |
4 |
5 | ## About
6 | This project is the Drag and Drop Fileupload using Dropzone.js.
7 | This Dropzone(Drag and Drop Fileupload) example is written by [Big Silver].
8 |
9 | ## Quick Start
10 |
11 | ```bash
12 | # clone our repository
13 | $ git clone https://github.com/Big-Silver/Drag-n-Drop-Fileupload.git dropzone
14 |
15 | # change directory to your project
16 | $ cd dropzone
17 |
18 | # Run the index.html file at the browser.
19 |
20 | ```
21 |
22 | ## Installation
23 |
24 | You probably only need to look at the simple example (source) to get started. Continue reading for step by step instructions and different installation approaches.
25 |
26 | Download the standalone dropzone.js and include it like this:
27 | ```html
28 |
29 | ```
30 | Dropzone is now activated and available as window.Dropzone.
31 |
32 | Dropzone does not handle your file uploads on the server. You have to implement the code to receive and store the file yourself. See the section Server side implementation for more information.
33 |
34 | This is all you need to get dropzone up and running, but if you want it to look like the dropzone on this page, you’ll need to download dropzone.css from the dist folder.
35 |
36 | With component
37 |
38 | If you use component you can just add dropzone as a dependency:
39 |
40 | ```bash
41 | "enyo/dropzone": "*"
42 | ```
43 | Then include it like this:
44 |
45 | ```html
46 | var Dropzone = require("dropzone");
47 | ```
48 | so it is activated and scans the document.
49 |
50 | The basic CSS markup is also included with component, but if you want it to look the same as on this page, you have to download the CSS (see below).
51 |
52 | With RequireJS
53 |
54 | Dropzone is also available as an AMD module for RequireJS.
55 |
56 | You can find the dropzone-amd-module in the downloads folder.
57 |
58 | ## Usage
59 |
60 | The typical way of using dropzone is by creating a form element with the class dropzone:
61 |
62 | ```html
63 |
67 | ```
68 | That’s it. Dropzone will find all form elements with the class dropzone, automatically attach itself to it, and upload files dropped into it to the specified action attribute. The uploaded files can be handled just as if there would have been a html input like this:
69 |
70 | ```html
71 |
72 | ```
73 | If you want another name than file you can configure dropzone with the option paramName.
74 |
75 | If you’re using component don’t forget to require("dropzone"); otherwise it won’t be activated.
76 |
77 | If you want your file uploads to work even without JavaScript, you can include an element with the class fallback that dropzone will remove if the browser is supported. If the browser isn’t supported, Dropzone will not create fallback elements if there is a fallback element already provided. (Obviously, if the browser doesn’t support JavaScript, the form will stay as is)
78 |
79 | Typically this will look like this:
80 |
81 | ```html
82 |
87 | ```
88 | Create dropzones programmatically
89 |
90 | Alternatively you can create dropzones programmaticaly (even on non form elements) by instantiating the Dropzone class
91 |
92 | ```javascript
93 | // Dropzone class:
94 | var myDropzone = new Dropzone("div#myId", { url: "/file/post"});
95 | ```
96 | or if you use jQuery, you can use the jQuery plugin Dropzone ships with:
97 |
98 | ```javascript
99 | // jQuery
100 | $("div#myId").dropzone({ url: "/file/post" });
101 | ```
102 | Don’t forget to specify an url option if you’re not using a form element, since Dropzone doesn’t know where to post to without an action attribute.
103 |
104 | Server side implementation
105 |
106 | Dropzone does not provide the server side implementation of handling the files, but the way files are uploaded is identical to simple file upload forms like this:
107 |
108 | ```html
109 |
112 | ```
113 |
114 | ## Configuration
115 |
116 | ```javascript
117 | Dropzone.options.myAwesomeDropzone = {
118 | paramName: "file", // The name that will be used to transfer the file
119 | maxFilesize: 2, // MB
120 | accept: function(file, done) {
121 | if (file.name == "justinbieber.jpg") {
122 | done("Naha, you don't.");
123 | }
124 | else { done(); }
125 | }
126 | };
127 | ```
128 |
129 | ## Events
130 |
131 | The recommended way from within the init configuration:
132 | ```javascript
133 | Dropzone.options.myAwesomeDropzone = {
134 | init: function() {
135 | this.on("addedfile", function(file) { alert("Added file."); });
136 | }
137 | };
138 | ```
139 | This example uses jQuery so it creates the Dropzone, only when the DOM has loaded
140 | ```javascript
141 | // Disabling autoDiscover, otherwise Dropzone will try to attach twice.
142 | Dropzone.autoDiscover = false;
143 | // or disable for specific dropzone:
144 | // Dropzone.options.myDropzone = false;
145 |
146 | $(function() {
147 | // Now that the DOM is fully loaded, create the dropzone, and setup the
148 | // event listeners
149 | var myDropzone = new Dropzone("#my-dropzone");
150 | myDropzone.on("addedfile", function(file) {
151 | /* Maybe display some more file information on your page */
152 | });
153 | })
154 | ```
155 |
--------------------------------------------------------------------------------