scratch – Diff between revs 91 and 96
?pathlinks?
Rev 91 | Rev 96 | |||
---|---|---|---|---|
Line 62... | Line 62... | |||
62 | <i class="glyphicon glyphicon-upload"></i> |
62 | <i class="glyphicon glyphicon-upload"></i> |
|
63 | <span>Upload All</span> |
63 | <span>Upload All</span> |
|
64 | </button> |
64 | </button> |
|
65 | </div> |
65 | </div> |
|
66 | <div class="btn-group" role="group"> |
66 | <div class="btn-group" role="group"> |
|
67 | <button type="reset" class="btn btn-default cancel"> |
67 | <button type="reset" class="btn btn-danger cancel"> |
|
68 | <i class="glyphicon glyphicon-ban-circle"></i> |
68 | <i class="glyphicon glyphicon-ban-circle"></i> |
|
69 | <span>Cancel All</span> |
69 | <span>Cancel All</span> |
|
70 | </button> |
70 | </button> |
|
71 | </div> |
71 | </div> |
|
72 | </div> |
72 | </div> |
|
Line 111... | Line 111... | |||
111 | <div> |
111 | <div> |
|
112 | <button id="start" class="btn btn-default start"> |
112 | <button id="start" class="btn btn-default start"> |
|
113 | <i class="glyphicon glyphicon-upload"></i> |
113 | <i class="glyphicon glyphicon-upload"></i> |
|
114 | <span>Upload</span> |
114 | <span>Upload</span> |
|
115 | </button> |
115 | </button> |
|
116 | <button id="cancel" data-dz-cancel class="btn btn-default cancel"> |
116 | <button id="cancel" data-dz-remove class="btn btn-warning cancel"> |
|
117 | <i class="glyphicon glyphicon-ban-circle"></i> |
117 | <i class="glyphicon glyphicon-ban-circle"></i> |
|
118 | <span>Cancel</span> |
118 | <span>Cancel</span> |
|
119 | </button> |
119 | </button> |
|
120 | <button id="remove" data-dz-remove class="btn btn-danger remove"> |
120 | <button id="remove" data-dz-remove class="btn btn-danger remove"> |
|
121 | <i class="glyphicon glyphicon-remove"></i> |
121 | <i class="glyphicon glyphicon-remove"></i> |
|
Line 150... | Line 150... | |||
150 | <script src="bower_components/dropzone/dist/min/dropzone.min.js"></script> |
150 | <script src="bower_components/dropzone/dist/min/dropzone.min.js"></script> |
|
151 | <!-- Clipboard --> |
151 | <!-- Clipboard --> |
|
152 | <script src="bower_components/clipboard/dist/clipboard.min.js"></script> |
152 | <script src="bower_components/clipboard/dist/clipboard.min.js"></script> |
|
153 | <script> |
153 | <script> |
|
154 | $(document).ready(() => { |
154 | $(document).ready(() => { |
|
- | 155 | $.get('session.php').then((token) => { |
||
155 | // Get the template HTML and remove it from the doument |
156 | // Get the template HTML and remove it from the doument |
|
156 | var previewNode = document |
157 | var previewNode = document |
|
157 | .querySelector("#template"); |
158 | .querySelector("#template"); |
|
158 | previewNode.id = ""; |
159 | previewNode.id = ""; |
|
159 | var previewTemplate = previewNode |
160 | var previewTemplate = previewNode |
|
Line 162... | Line 163... | |||
162 | previewNode |
163 | previewNode |
|
163 | .parentNode |
164 | .parentNode |
|
164 | .removeChild(previewNode); |
165 | .removeChild(previewNode); |
|
Line 165... | Line 166... | |||
165 | |
166 | |
|
166 | var myDropzone = new Dropzone('.panel-body', { // Make the whole body a dropzone |
167 | var myDropzone = new Dropzone('.panel-body', { // Make the whole body a dropzone |
|
167 | url: "file.php", // Set the url |
168 | url: 'file.php', // Set the url |
|
168 | paramName: "file", |
169 | paramName: 'file', |
|
169 | thumbnailWidth: 80, |
170 | thumbnailWidth: 80, |
|
170 | thumbnailHeight: 80, |
171 | thumbnailHeight: 80, |
|
171 | //parallelUploads: 20, |
172 | //parallelUploads: 20, |
|
172 | previewTemplate: previewTemplate, |
173 | previewTemplate: previewTemplate, |
|
173 | autoQueue: false, // Make sure the files aren't queued until manually added |
174 | autoQueue: false, // Make sure the files aren't queued until manually added |
|
174 | previewsContainer: "#previews", // Container to display the previews |
175 | previewsContainer: '#previews', // Container to display the previews |
|
175 | clickable: [ |
176 | clickable: [ |
|
176 | "#uploadbutton", |
177 | '#uploadbutton', |
|
177 | "#uploadpanel" |
178 | '#uploadpanel' |
|
178 | ], |
179 | ], |
|
- | 180 | //clickable: "#uploadbutton" // Element that should be used as click trigger to select files. |
||
- | 181 | }).on('sending', (file, xhr, formData) => { |
||
- | 182 | // Append session token. |
||
179 | //clickable: "#uploadbutton" // Element that should be used as click trigger to select files. |
183 | formData.append('token', token); |
|
180 | }).on("addedfile", (file) => { |
184 | }).on('addedfile', (file) => { |
|
181 | // Hookup the start button |
185 | // Hookup the start button |
|
182 | file.previewElement.querySelector(".start").onclick = () => { |
186 | file.previewElement.querySelector(".start").onclick = () => { |
|
183 | myDropzone.enqueueFile(file); |
187 | myDropzone.enqueueFile(file); |
|
184 | }; |
188 | }; |
|
185 | }).on("totaluploadprogress", (progress) => { |
189 | }).on('totaluploadprogress', (progress) => { |
|
186 | document |
190 | document |
|
187 | .querySelector("#total-progress .progress-bar") |
191 | .querySelector('#total-progress .progress-bar') |
|
188 | .style |
192 | .style |
|
189 | .width = progress + "%"; |
193 | .width = progress + "%"; |
|
190 | }).on("sending", (file) => { |
194 | }).on('sending', (file) => { |
|
191 | // Show the total progress bar when upload starts |
195 | // Show the total progress bar when upload starts |
|
192 | document.querySelector("#total-progress") |
196 | document.querySelector("#total-progress") |
|
193 | .style |
197 | .style |
|
Line 194... | Line 198... | |||
194 | .opacity = 1; |
198 | .opacity = 1; |
|
195 | |
199 | |
|
196 | // And disable the start button. |
200 | // And disable the start button. |
|
197 | file |
201 | file |
|
198 | .previewElement |
202 | .previewElement |
|
199 | .querySelector(".start") |
203 | .querySelector(".start") |
|
200 | .setAttribute("disabled", "disabled"); |
204 | .setAttribute("disabled", "disabled"); |
|
201 | }).on("queuecomplete", (progress) => { |
205 | }).on('queuecomplete', (progress) => { |
|
202 | document.querySelector("#total-progress") |
206 | document.querySelector("#total-progress") |
|
203 | .style |
207 | .style |
|
204 | .opacity = "0"; |
208 | .opacity = "0"; |
|
205 | }).on("success", (file, data) => { |
209 | }).on('success', (file, data) => { |
|
Line 206... | Line 210... | |||
206 | // Serialize JSON to object. |
210 | // Serialize JSON to object. |
|
207 | data = JSON.parse(data); |
211 | data = JSON.parse(data); |
|
Line 354... | Line 358... | |||
354 | }; |
358 | }; |
|
Line 355... | Line 359... | |||
355 | |
359 | |
|
356 | document.querySelector("#actions .cancel").onclick = () => { |
360 | document.querySelector("#actions .cancel").onclick = () => { |
|
357 | myDropzone.removeAllFiles(true); |
361 | myDropzone.removeAllFiles(true); |
|
- | 362 | }; |
||
Line 358... | Line 363... | |||
358 | }; |
363 | }); |
|
359 | |
364 | |
|
360 | // Scroll to the panel. |
365 | // Scroll to the panel. |
|
361 | $('html, body').animate({ |
366 | $('html, body').animate({ |