        
        <!-- Include all neccesary scripts -->
        <script src="{{app.request_context.baseUrl}}/plugins/jquery-file-upload/js/load-image.all.min.js"></script>
        <script src="{{app.request_context.baseUrl}}/plugins/jquery-file-upload/js/canvas-to-blob.min.js"></script>
        <script src="{{app.request_context.baseUrl}}/plugins/jquery-file-upload/js/jquery.blueimp-gallery.min.js"></script>
        <script src="{{app.request_context.baseUrl}}/plugins/jquery-file-upload/js/jquery.iframe-transport.js"></script>
        <script src="{{app.request_context.baseUrl}}/plugins/jquery-file-upload/js/jquery.fileupload.js"></script>
        <script src="{{app.request_context.baseUrl}}/plugins/jquery-file-upload/js/jquery.fileupload-process.js"></script>
        <script src="{{app.request_context.baseUrl}}/plugins/jquery-file-upload/js/jquery.fileupload-image.js"></script>
        <script src="{{app.request_context.baseUrl}}/plugins/jquery-file-upload/js/jquery.fileupload-validate.js"></script>
        <script src="{{app.request_context.baseUrl}}/plugins/jquery-file-upload/js/jquery.fileupload-ui.js"></script>
        <script src="{{app.request_context.baseUrl}}/plugins/jquery-file-upload/js/jquery.fileupload-jquery-ui.js"></script>
        <script src="{{app.request_context.baseUrl}}/plugins/jquery-file-upload/js/cors/jquery.xdr-transport.js"></script>


<!-- The template to display files available for upload -->
<script id="template-upload-base" type="text/x-tmpl">
[% for (var i=0, file; file=o.files[i]; i++) { %]
    <tr class="template-upload fade">
        <td>
            <span class="preview"></span>
        </td>
        <td>
            <p class="name">[%=file.name%]</p>
            <strong class="error"></strong>
        </td>
        <td>
            <p class="size">Processing...</p>
            <div class="progress"></div>
        </td>
        <td>
            [% if (!i && !o.options.autoUpload) { %]
                <button class="start" disabled>Start</button>
            [% } %]
            [% if (!i) { %]
                <button class="cancel">Cancel</button>
            [% } %]
        </td>
    </tr>
[% } %]
</script>

<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
[% for (var i=0, file; file=o.files[i]; i++) { %]
    <tr class="template-download fade">
        <td>
            <span class="preview">
                [% if (file.thumbnailUrl) { %]
                    <a href="[%=file.url%]" title="[%=file.name%]" download="[%=file.name%]" data-gallery><img src="[%=file.thumbnailUrl%]"></a>
                [% } %]
            </span>
        </td>
        <td>
            <p class="name">
                <a href="[%=file.url%]" title="[%=file.name%]" download="[%=file.name%]" [%=file.thumbnailUrl?'data-gallery':''%]>[%=file.name%]</a>
            </p>
            [% if (file.error) { %]
                <div><span class="error">Error</span> [%=file.error%]</div>
            [% } %]
        </td>
        <td>
            <span class="size">[%=o.formatFileSize(file.size)%]</span>
        </td>
        <td>
            <button class="delete" data-type="[%=file.deleteType%]" data-url="[%=file.deleteUrl%]"[% if (file.deleteWithCredentials) { %] data-xhr-fields='{"withCredentials":true}'[% } %]>Delete</button>
            <input type="checkbox" name="delete" value="1" class="toggle">
        </td>
    </tr>
[% } %]
</script>

<script type="text/javascript" defer="defer">
    function loadFileUploadScripts(callbackFileUpload){
        if (!$.fn.fileupload) {
            return false;
        } else  if (typeof (callbackFileUpload) === "function") {
            $.widget('blueimp.fileupload', $.blueimp.fileupload, {
                options: {
                    messages: {
                        acceptFileTypes: "{{ 'File type not allowed'|trans }}",
                        maxFileSize:"{{ 'File is too large'|trans }}",
                        maxNumberOfFiles:"{{ 'Maximum number of files exceeded'|trans }}",
                        minFileSize:"{{ 'File is too small'|trans }}",
                        unknownError:"{{ 'Unknown error'|trans }}",
                        uploadedBytes:"{{ 'Uploaded bytes exceed file size'|trans }}"
                    },
                    fail: function (e, data) {
                        console.log('fileuploadfail');
                        $.each(data.files, function (index) {
                            var error = this.error;
                            if (error) {
                                JSErrorModalBox({msg: error});
                            }
                        });
                    },
                    change: function (e, data) {
                        console.log('fileuploadchange');
                        $.each(data.files, function (index) {
                            var error = this.error;
                            if (error) {
                                JSErrorModalBox({msg: error});
                            }
                        });
                    },
                    processfail: function (e, data) {
                        console.log('fileuploadsubmit');
                        $.each(data.files, function (index) {
                            var error = this.error;
                            if (error) {
                                JSErrorModalBox({msg: error});
                            }
                        });
                    }
                }
            });
            return callbackFileUpload();
        }
    }
</script>