|
1 /* globals MyAMS */ |
|
2 |
|
3 (function($, globals) { |
|
4 |
|
5 'use strict'; |
|
6 |
|
7 $.dndupload = { |
|
8 defaults: { |
|
9 action: 'upload-files', |
|
10 fieldname: 'files', |
|
11 autosubmit: true |
|
12 } |
|
13 }; |
|
14 |
|
15 var ams = MyAMS; |
|
16 |
|
17 var isAdvancedUpload = function() { |
|
18 var div = document.createElement('div'); |
|
19 return (('draggable' in div) || ('ondragstart' in div && 'ondrop' in div)) && ('FormData' in window) && ('FileReader' in window); |
|
20 } (); |
|
21 |
|
22 // Initialize upload form |
|
23 function init(input, settings) { |
|
24 $(input).each(function() { |
|
25 var widget = $(this); |
|
26 if (widget.data('ams-dndupload-initialiazed')) { |
|
27 return; |
|
28 } |
|
29 settings = $.extend(true, {}, $.dndupload.defaults, settings); |
|
30 |
|
31 var uploader = widget.get(0); |
|
32 if (uploader.tagName !== 'FORM') { |
|
33 widget.removeClass('dndupload') |
|
34 .html('<form action="{action}" method="POST" enctype="multipart/form-data" class="dndupload"></form>'.replace(/{action}/, settings.action)); |
|
35 widget = $('form', widget); |
|
36 } |
|
37 var template = '<div class="box__input">\n' + |
|
38 ' <svg class="box__icon" xmlns="http://www.w3.org/2000/svg" width="50" height="43" viewBox="0 0 50 43">\n' + |
|
39 ' <path d="M48.4 26.5c-.9 0-1.7.7-1.7 1.7v11.6h-43.3v-11.6c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v13.2c0 .9.7 1.7 1.7 1.7h46.7c.9 0 1.7-.7 1.7-1.7v-13.2c0-1-.7-1.7-1.7-1.7zm-24.5 6.1c.3.3.8.5 1.2.5.4 0 .9-.2 1.2-.5l10-11.6c.7-.7.7-1.7 0-2.4s-1.7-.7-2.4 0l-7.1 8.3v-25.3c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v25.3l-7.1-8.3c-.7-.7-1.7-.7-2.4 0s-.7 1.7 0 2.4l10 11.6z" />\n' + |
|
40 ' </svg>\n' + |
|
41 ' <input type="file" name="{label}" id="file" class="box__file" multiple="multiple"\n'.replace(/{label}/, settings.fieldname) + |
|
42 ' data-multiple-caption="{label}" />\n'.replace(/{label}/, ams.plugins.i18n.dndupload.FILES_SELECTED) + |
|
43 ' <label for="file">\n' + |
|
44 ' <strong>{label}</strong> {add}<br />\n'.replace(/{label}/, ams.plugins.i18n.dndupload.CHOOSE_FILE).replace(/{add}/, ams.plugins.i18n.dndupload.ADD_INFO) + |
|
45 ' <span class="box__dragndrop">{label}</span></label>\n'.replace(/{label}/, ams.plugins.i18n.dndupload.DRAG_FILE) + |
|
46 ' <button type="submit" class="box__button">{label}</button>\n'.replace(/{label}/, ams.plugins.i18n.dndupload.UPLOAD) + |
|
47 '</div>\n' + |
|
48 '<div class="box__uploading">{label}</div>\n'.replace(/{label}/, ams.plugins.i18n.dndupload.UPLOADING) + |
|
49 '<div class="box__success">{label}\n'.replace(/{label}/, ams.plugins.i18n.dndupload.DONE) + |
|
50 ' <a href=".?" class="box__restart" role="button">{label}</a>\n'.replace(/{label}/, ams.plugins.i18n.dndupload.UPLOAD_MORE) + |
|
51 '</div>\n' + |
|
52 '<div class="box__error">{label}<span></span>. \n'.replace(/{label}/, ams.plugins.i18n.dndupload.ERROR) + |
|
53 ' <a href=".?" class="box__restart" role="button">{label}</a>\n'.replace(/{label}/, ams.plugins.i18n.dndupload.TRY_AGAIN) + |
|
54 '</div>'; |
|
55 widget.html(template); |
|
56 |
|
57 var form = widget, |
|
58 input = form.find('input[type="file"]'), |
|
59 label = form.find('label'), |
|
60 error = form.find('.box__error span'), |
|
61 restart = form.find('.box__restart'), |
|
62 droppedFiles = false; |
|
63 |
|
64 var showFiles = function(files) { |
|
65 label.text(files.length > 1 ? (input.attr('data-multiple-caption') || '').replace(/{count}/, files.length) : files[0].name); |
|
66 }; |
|
67 |
|
68 input.on('change', function(ev) { |
|
69 showFiles(ev.target.files); |
|
70 if (settings.autosubmit) { |
|
71 form.trigger('submit'); |
|
72 } |
|
73 }); |
|
74 |
|
75 if (isAdvancedUpload) { |
|
76 form.addClass('has-advanced-upload') |
|
77 .on('drag dragstart dragend dragover dragenter dragleave drop', function(ev) { |
|
78 ev.preventDefault(); |
|
79 ev.stopPropagation(); |
|
80 }) |
|
81 .on('dragover dragenter', function() { |
|
82 form.addClass('is-dragover'); |
|
83 }) |
|
84 .on('dragleave dragend drop', function() { |
|
85 form.removeClass('is-dragover'); |
|
86 }) |
|
87 .on('drop', function(ev) { |
|
88 droppedFiles = ev.originalEvent.dataTransfer.files; |
|
89 showFiles(droppedFiles); |
|
90 if (settings.autosubmit) { |
|
91 form.trigger('submit'); |
|
92 } |
|
93 }); |
|
94 } |
|
95 |
|
96 form.on('submit', function(ev) { |
|
97 if (form.hasClass('is-uploading')) { |
|
98 return false; |
|
99 } |
|
100 form.addClass('is-uploading') |
|
101 .removeClass('is-error'); |
|
102 if (isAdvancedUpload) { |
|
103 ev.preventDefault(); |
|
104 var ajaxData = new FormData(form.get(0)); |
|
105 if (droppedFiles) { |
|
106 $.each(droppedFiles, function(i, file) { |
|
107 ajaxData.append(input.attr('name'), file); |
|
108 }); |
|
109 } |
|
110 $.ajax({ |
|
111 url: form.attr('action'), |
|
112 type: form.attr('method'), |
|
113 data: ajaxData, |
|
114 dataType: 'json', |
|
115 cache: false, |
|
116 contentType: false, |
|
117 processData: false, |
|
118 success: function(data) { |
|
119 if (typeof(data) === 'string') { |
|
120 data = JSON.parse(data); |
|
121 } |
|
122 ams.ajax.handleJSON(data); |
|
123 }, |
|
124 complete: function() { |
|
125 form.removeClass('is-uploading'); |
|
126 } |
|
127 }); |
|
128 } else { |
|
129 var iframeName = 'uploadiframe_' + new Date().getTime(), |
|
130 iframe = $('<iframe>').attr('name', iframeName) |
|
131 .attr('style', 'display: none') |
|
132 .appendTo($('body')); |
|
133 form.attr('target', iframeName); |
|
134 iframe.one('load', function() { |
|
135 var data = JSON.parse(iframe.contents().find('body').text()); |
|
136 form.removeClass('is-uploading') |
|
137 .addClass(data.success === true ? 'is-success' : 'is-error') |
|
138 .removeAttr('target'); |
|
139 if (!data.success) { |
|
140 error.text(data.error); |
|
141 } |
|
142 iframe.remove(); |
|
143 }); |
|
144 } |
|
145 }); |
|
146 |
|
147 restart.on('click', function(ev) { |
|
148 ev.preventDefault(); |
|
149 form.removeClass('is-error is-success'); |
|
150 input.trigger('click'); |
|
151 }); |
|
152 |
|
153 input.on('focus', function() { |
|
154 input.addClass('has-focus'); |
|
155 }).on('blur', function() { |
|
156 input.removeClass('has-focus'); |
|
157 }); |
|
158 |
|
159 $(uploader).removeClass('hidden'); |
|
160 widget.data('ams-dndupload-initialized', true); |
|
161 }); |
|
162 |
|
163 return input; |
|
164 } |
|
165 |
|
166 function destroy(input) { |
|
167 |
|
168 } |
|
169 |
|
170 $.extend($.fn, { |
|
171 |
|
172 dndupload: function(method, data) { |
|
173 |
|
174 var input = $(this); |
|
175 |
|
176 switch(method) { |
|
177 |
|
178 case 'settings': |
|
179 if (data === undefined) { |
|
180 return input.data('dndupload-settings'); |
|
181 } else { |
|
182 input.each(function() { |
|
183 var settings = input.data('dndupload-settings') || {}; |
|
184 destroy($(this)); |
|
185 input.dndupload($.extend(true, settings, data)); |
|
186 }); |
|
187 } |
|
188 return input; |
|
189 |
|
190 case 'destroy': |
|
191 input.each(function() { |
|
192 destroy($(this)); |
|
193 }); |
|
194 return input; |
|
195 |
|
196 default: |
|
197 if (method !== 'create') { |
|
198 data = method; |
|
199 } |
|
200 input.each(function() { |
|
201 init($(this), data); |
|
202 }); |
|
203 return input; |
|
204 } |
|
205 } |
|
206 |
|
207 }); |
|
208 |
|
209 })(jQuery, this); |