https://www.spanishcourseinspain.com/static/assets/js/custom/dropify/src/js/dropify.js

1var pluginName = "dropify";
2
3/**
4 * Dropify plugin
5 * @param {Object} element
6 * @param {Array} options
7 */
8function Dropify(element, options) {
9    if (!(window.File && window.FileReader && window.FileList && window.Blob)) {
10        return;
11    }
12
13    var defaults = {
14        defaultFile: '',
15        maxFileSize: 0,
16        messages: {
17            'default': 'Haz click o arrastra un archivo dentro del cuadro.',
18            'replace': 'Haz click o arrastra un archivo dentro del cuadro para reemplazar.',
19            'remove':  'Eliminar',
20            'error':   'El archivo es demasiado grande.'
21        },
22        tpl: {
23            wrap:        '<div class="dropify-wrapper"></div>',
24            message:     '<div class="dropify-message"><span class="file-icon" /> <p>{{ default }}</p></div>',
25            preview:     '<div class="dropify-preview"><span class="dropify-render"></span><div class="dropify-infos"><div class="dropify-infos-inner"><p class="dropify-infos-message">{{ replace }}</p></div></div></div>',
26            filename:    '<p class="dropify-filename"><span class="file-icon"></span> <span class="dropify-filename-inner"></span></p>',
27            clearButton: '<button type="button" class="dropify-clear">{{ remove }}</button>',
28            error:       '<p class="dropify-error">{{ error }}</p>'
29        }
30    };
31
32    this.element         = element;
33    this.input           = $(this.element);
34    this.wrapper         = null;
35    this.preview         = null;
36    this.filenameWrapper = null;
37    this.settings        = $.extend(true, defaults, options, this.input.data());
38    this.imgFileFormats  = ['png', 'jpg', 'jpeg', 'gif', 'bmp'];
39    this.file            = null;
40    this.filename        = null;
41    this.isDisabled      = false;
42
43    this.onChange     = this.onChange.bind(this);
44    this.clearElement = this.clearElement.bind(this);
45
46    this.translate();
47    this.createElements();
48    this.setSize();
49
50    this.input.on('change', this.onChange);
51}
52
53/**
54 * On change event
55 */
56Dropify.prototype.onChange = function()
57{
58    this.resetPreview();
59    this.setFilename(this.input.val());
60    this.readUrl(this.element);
61};
62
63/**
64 * Create dom elements
65 */
66Dropify.prototype.createElements = function()
67{
68    this.input.wrap($(this.settings.tpl.wrap));
69    this.wrapper = this.input.parent();
70
71    var messageWrapper = $(this.settings.tpl.message).insertBefore(this.input);
72    $(this.settings.tpl.error).appendTo(messageWrapper);
73
74    if (this.isTouchDevice() === true) {
75        this.wrapper.addClass('touch-fallback');
76    }
77
78    if (this.input.attr('disabled')) {
79        this.isDisabled = true;
80        this.wrapper.addClass('disabled');
81    }
82
83    this.preview = $(this.settings.tpl.preview);
84    this.preview.insertAfter(this.input);
85
86    if (this.isDisabled === false && this.settings.disableRemove !== true) {
87        this.clearButton = $(this.settings.tpl.clearButton);
88        this.clearButton.insertAfter(this.input);
89        this.clearButton.on('click', this.clearElement);
90    }
91
92    this.filenameWrapper = $(this.settings.tpl.filename);
93    this.filenameWrapper.prependTo(this.preview.find('.dropify-infos-inner'));
94
95    var defaultFile = this.settings.defaultFile || '';
96
97    if (defaultFile.trim() != '') {
98        this.setFilename(defaultFile);
99        this.setPreview(defaultFile);
100    }
101};
102
103/**
104 * Read the file url using FileReader
105 *
106 * @param  {Object} input
107 */
108Dropify.prototype.readUrl = function(input)
109{
110    if (input.files && input.files[0]) {
111        var reader = new FileReader();
112        this.file = input.files[0];
113
114        if (this.checkFileSize()) {
115            reader.onload = function(e) {
116                this.setPreview(e.target.result, this.file.name);
117            }.bind(this);
118
119            reader.readAsDataURL(this.file);
120        } else {
121            this.wrapper.addClass('has-error');
122            this.resetPreview();
123            this.clearElement();
124        }
125    }
126};
127
128/**
129 * Set the preview and animate it
130 *
131 * @param {String} src
132 */
133Dropify.prototype.setPreview = function(src)
134{
135    this.wrapper.removeClass('has-error').addClass('has-preview');
136    var render = this.preview.children('.dropify-render');
137
138    if (this.isImage() === true) {
139        $('<img />').attr('src', src).appendTo(render);
140    } else {
141        $('<i />').attr('class', 'dropify-font-file').appendTo(render);
142        $('<span class="dropify-extension" />').html(this.getFileType()).appendTo(render);
143    }
144
145    this.preview.fadeIn();
146};
147
148/**
149 * Reset the preview
150 */
151Dropify.prototype.resetPreview = function()
152{
153    this.wrapper.removeClass('has-preview');
154    var render = this.preview.children('.dropify-render');
155    render.find('.dropify-extension').remove();
156    render.find('i').remove();
157    render.find('img').remove();
158    this.preview.hide();
159};
160
161/**
162 * Get the filename
163 *
164 * @param  {String} src with path
165 *
166 * @return {String} clean filename
167 */
168Dropify.prototype.getFilename = function(src)
169{
170    var filename = src.split('\\').pop();
171    if (filename == src) {
172        filename = src.split('/').pop();
173    }
174
175    return src != "" ? filename : '';
176};
177
178/**
179 * Set the filename in the object and in the dom
180 *
181 * @param {String} filename
182 */
183Dropify.prototype.setFilename = function(filename)
184{
185    var filename = this.getFilename(filename);
186    this.filename = filename;
187    this.filenameWrapper.children('.dropify-filename-inner').html(filename);
188};
189
190/**
191 * Clear the element, events are available
192 */
193Dropify.prototype.clearElement = function()
194{
195    var eventBefore = $.Event("dropify.beforeClear");
196    this.input.trigger(eventBefore, [this]);
197
198    if (eventBefore.result !== false) {
199        this.file = null;
200        this.input.val('');
201        this.resetPreview();
202
203        var eventAfter = $.Event("dropify.afterClear");
204        this.input.trigger(eventAfter, [this]);
205    }
206};
207
208/**
209 * Set the wrapper height
210 */
211Dropify.prototype.setSize = function()
212{
213    if (this.settings.height) {
214        this.wrapper.height(this.settings.height);
215    }
216};
217
218/**
219 * Test if it's touch screen
220 *
221 * @return {Boolean}
222 */
223Dropify.prototype.isTouchDevice = function()
224{
225    return (('ontouchstart' in window)
226         || (navigator.MaxTouchPoints > 0)
227         || (navigator.msMaxTouchPoints > 0));
228};
229
230/**
231 * Get the file type.
232 * @return {String}
233 */
234Dropify.prototype.getFileType = function()
235{
236    return this.filename.split('.').pop().toLowerCase();
237};
238
239/**
240 * Test if the file is an image
241 *
242 * @return {Boolean}
243 */
244Dropify.prototype.isImage = function()
245{
246    if (this.imgFileFormats.indexOf(this.getFileType()) != "-1") {
247        return true;
248    }
249
250    return false;

251};
252
253/**
254 * Translate text if needed.
255 */
256Dropify.prototype.translate = function()
257{
258    for (var name in this.settings.tpl) {
259        for (var key in this.settings.messages) {
260            this.settings.tpl[name] = this.settings.tpl[name].replace('{{ ' + key + ' }}', this.settings.messages[key]);
261        }
262    }
263};
264
265/**
266 * Check the limit filesize.
267 *
268 * @return {Boolean}
269 */
270Dropify.prototype.checkFileSize = function()
271{
272    if (this.maxFileSizeToByte() === 0 || this.file.size <= this.maxFileSizeToByte()) {
273        return true;
274    }
275
276    return false;
277};
278
279/**
280 * Convert filesize to byte.
281 *
282 * @return {Int} value
283 */
284Dropify.prototype.maxFileSizeToByte = function()
285{
286    var value = 0;
287
288    if (this.settings.maxFileSize !== 0) {
289        var unit  = this.settings.maxFileSize.slice(-1).toUpperCase(),
290            kb    = 1024,
291            mb    = kb * 1024,
292            gb    = mb * 1024;
293
294        if (unit === 'K') {
295            value = parseFloat(this.settings.maxFileSize) * kb;
296        } else if (unit === 'M') {
297            value = parseFloat(this.settings.maxFileSize) * mb;
298        } else if (unit === 'G') {
299            value = parseFloat(this.settings.maxFileSize) * gb;
300        }
301    }
302
303    return value;
304};
305
306$.fn[pluginName] = function(options) {
307    this.each(function() {
308        if (!$.data(this, "plugin_" + pluginName)) {
309            $.data(this, "plugin_" + pluginName, new Dropify(this, options));
310        }
311    });
312
313    return this;
314};
315
316