<style>
    input.attachment {
        display: none;
    }
</style>
<script type="text/javascript">
    $(function () {
        var FileView = Backbone.View.extend({
            fileCounter: 0,
            max_post_size: {{ max_post_size }},
            max_file_uploads: {{ max_file_uploads }},
            upload_max_filesize: {{ upload_max_filesize }},
            el: '.attachment-block',
            events : {
                'click .uv-file-label': 'createFileType',
                'change .attachment': 'selectFile',
                'click .uv-added-attachment span': 'removeFile',
                'click .uv-field-message': 'removeError',
            },
            createFileType: function(e) {
                this.removeError(e)
                var currentElement = Backbone.$(e.currentTarget),
                    attachmentBlock = currentElement.parents('.attachment-block')
                if (attachmentBlock.children('.uv-added-attachment').length + 1 > this.max_file_uploads) {
                    attachmentBlock.append(this.getDefaultErrorMessage())
                    return;
                }
                this.fileCounter += 1;
                attachmentBlock.append('<div class="uv-added-attachment" style="display: none" id="file-' + this.fileCounter + '"><div class="uv-attachment"><input type="file" name="attachments[]" class="attachment" multiple="multiple"></div><span></span></div>')
                $('#file-' + this.fileCounter).find('.attachment').trigger('click')
            },
            labelTemplate: _.template('<label class="file-name"><%- fileName %></label><br>'),
            selectFile: function(e) {
                var currentElement = Backbone.$(e.currentTarget);
                var attachmentBlock = currentElement.parents(".uv-added-attachment");
                var isError = false;
                
                if (currentElement.length) {
                    files = currentElement[0].files; 

                    if (files.length) {
                        for (var i = 0; i < files.length; i++) {
                            var fileName = files[i].name;
                            
                            if (files[i].size > this.upload_max_filesize) {
                                isError = true;
                                break;
                            }

                            // Validating Form Size
                            var formSize = 0
                            var formData = new FormData(currentElement.parents('form')[0])
                            
                            for (var pair of formData.entries()) {
                                if (pair[1] instanceof Blob) {
                                    formSize += pair[1].size
                                } else {
                                    formSize += pair[1].length
                                }
                            }

                            if (formSize > this.max_post_size) {
                                isError = true
                            }

                            attachmentBlock.append(this.labelTemplate({'fileName': fileName}));
                        }
                    }
                }
                
                if (isError) {
                    attachmentBlock.parents('.attachment-block').append(this.getDefaultErrorMessage())
                    attachmentBlock.remove()
                    return
                }

                attachmentBlock.show()
            },
            removeFile: function(e) {
                this.removeError(e)
                Backbone.$(e.currentTarget).parents('.uv-added-attachment').remove()
            },
            getDefaultErrorMessage: function() {
                return '<span class="uv-field-message">You can send up to ' + Math.floor(this.upload_max_filesize/(1024*1024)) + ' MB in attachments. If you have more than one attachment, they can\'t add up to more than ' + Math.floor(this.max_post_size/(1024*1024))  + ' MB and ' + this.max_file_uploads + ' attachments in total.</span>'
            },
            removeError: function(e) {
                Backbone.$(e.currentTarget).parents('.attachment-block').find('.uv-field-message').remove()
            }   
        });
        
        var fileView = new FileView();
    });
</script>