https://www.ihmsgroup.com/plugins/smb/form/components/assets/js/formUploadField.js?v.1.1.85

1;(function($) {
2
3    var UploadField = function(element, options) {
4
5        this.$el = $(element);
6        this.inputAttributes = options.attributes;
7        this.options = options || {};
8
9        //script's config vars
10        this.config = {
11            fail        : '<span class="error"><i class="la-cicon-exclamation" aria-hidden="true"></i>Oops! Upload failed</span>',
12            notSupported: '<span class="error"><i class="la-cicon-exclamation" aria-hidden="true"></i>File type not supported</span>',
13            maxSize     : '<span class="error"><i class="la-cicon-exclamation" aria-hidden="true"></i>File exceeds max size</span>',
14            fileSize    : 10485760,
15            fileTypes   : options.fileTypes,
16            defaultLabel: this.options.label == '' ? this.options.label : this.options.helpText
17        };
18
19        this.itemInfo = {};
20
21        this.insertHTML(this.inputAttributes);
22        this.$uploadFieldInput = this.$el.find(':file');
23        this.$label = this.$el.find('.labelHolder');
24        this.$close = this.$el.find('.la-cicon-close');
25
26        this.init(this.$el);
27    };
28
29    UploadField.prototype.init = function($el) {
30        var self = this;
31
32        self.attachEvents();
33    };
34
35    UploadField.prototype.attachEvents = function(){
36    	var self = this;
37
38        self.$el.on('change', ':file', function() {
39            var input = $(this),
40                numFiles = input.get(0).files ? input.get(0).files.length : 1,
41                label = input.val().replace(/\\/g, '/').replace(/.*\//, ''),
42                files = document.getElementById(input.attr('id')).files,
43                file = files[0];
44
45            if(file){
46                input.trigger('fileselect', [numFiles, label,file]);
47            }
48        });
49
50        self.$uploadFieldInput.on('fileselect', function(event, numFiles, label, file) {
51            self.validateFiles(event, numFiles, label, file);
52        });
53
54        self.$uploadFieldInput.on('focus', function () {
55            self.$uploadFieldInput.addClass('has-focus');
56        }).on('blur', function () {
57            self.$uploadFieldInput.removeClass('has-focus');
58        });
59
60        self.$close.on('click', function(e){
61            e.preventDefault();
62            self.toggleInputState('reset');
63            self.uploadItems('removeLastUploaded');
64            self.$uploadFieldInput.val('');
65        });
66    };
67
68    UploadField.prototype.uploadItems = function(item){
69        var self = this;
70
71        if (typeof item !== 'object'){
72            self.$uploadFieldInput.data('item', '');
73        }else{
74            self.$uploadFieldInput.data('item', JSON.stringify(item));
75            self.toggleInputState('close');
76        }
77    };
78
79    UploadField.prototype.toggleInputState = function(state){
80        var self = this;
81        if(state === 'reset'){
82            state = 'upload';
83            self.$label.html(self.config.defaultLabel);
84        }
85
86        this.$el.find('.la-cicon-'+ state).show();
87        this.$el.find('.la-cicon-'+ state).siblings('i').hide();
88        state === 'upload' ? this.$el.find('.status-label').show() : this.$el.find('.status-label').hide();
89    };
90
91    UploadField.prototype.encodeBaseSF = function(file, fileName, fn){
92        var self = this, reader = new FileReader(), item = {};
93
94        reader.readAsDataURL(file);
95        reader.onload = function () {
96            item.id = fileName;
97            item.string =  reader.result;
98            item.size = file.size;
99            item.extension = self.itemInfo.extension;
100            item.icon = self.itemInfo.icon;
101
102            //we have to use callback !
103            return fn(item);
104        };
105        reader.onerror = function (error) {
106            // console.log('Error: ', error);
107        };
108    };
109
110    UploadField.prototype.insertHTML = function(attributes){
111        var
112        hasError = this.options.required ? 'has-error' : '',
113        htmlTemplate = '<label for="' + attributes.id + '">'+
114                            '<span class="labelHolder">' + this.config.defaultLabel + '</span>'+
115                                '<span class="btnS">'+
116                                    '<span class="">' +
117                                        '<i class="la-cicon-spinner icon-pulse icon-fw icon-load" style="display:none;"></i>'+
118                                        '<i class="la-cicon-upload"></i>' +
119                                        '<i class="la-cicon-close" style="display:none;"></i>'+
120                                        '<span class="status-label"> Browse</span>'+
121                                    '</span>' +
122                                '</span>'+
123                        '</label>'+
124                        '<span class="form-input-info">Maximum file size allowed: 10MB</label>',
125        field = $('<input>', attributes).addClass('fileUpload');
126
127        this.$el.append(field).append(htmlTemplate);
128    };
129
130    UploadField.prototype.validateFiles = function(e, numFiles, label, file){
131        var
132        self = this,
133        labelVal = self.$label.html(),
134        fileName = '',
135        isOkFileType = false;

136        $('label', self.$el).removeClass('has-error');        
137        $('.error_container', self.$el.parent().parent()).remove();
138        self.itemInfo.extension = file.name.split('.').pop().toUpperCase();
139        self.itemInfo.icon = 'other';
140
141        $.each(self.options.fileTypes, function( index, value ) {
142            if (value.ext === self.itemInfo.extension) {
143                isOkFileType = true;
144                self.itemInfo.icon = value.icon;
145            }
146        });
147
148        if( e.target.value )
149            fileName = e.target.value.split( '\\' ).pop();
150            var fileLabel = '<span class="success"><i class="la-cicon-file-' + self.itemInfo.icon + '"></i>'+fileName+'</span>';
151
152        if( fileName ){
153            if( file.size > self.config.fileSize ){
154                self.updateLabel(self.config.maxSize);
155            }else if(!isOkFileType){
156                self.updateLabel(self.config.notSupported);
157            }else{
158                self.encodeBaseSF(file, fileName, function(item){
159                    self.uploadItems(item);
160                    self.updateLabel(fileLabel);
161                });
162            }
163            self.toggleInputState('close');
164        }else{
165            self.$label.html( labelVal );
166            self.toggleInputState('load');
167        }
168    };
169
170    UploadField.prototype.updateLabel = function(labelText){
171        var self = this;
172
173        if(typeof labelText !== "undefined"){
174            self.$label.html(labelText);
175        }
176    };
177
178    var old = $.fn.uploadField;
179
180    $.fn.uploadField = function(options) {
181        options = $.extend({}, $(this).data(), typeof options === 'object' && options);
182        new UploadField(this, options);
183    };
184
185    $.fn.uploadField.Constructor = UploadField;
186
187    $.fn.uploadField.noConflict = function() {
188        $.fn.uploadField = old;
189        return this;
190    };
191
192})(jQuery);