As an active javascript upload component using UIKIT?

This page is about component implementations in Javascript using FrameWorks UiKit.

Click here to go to the UiKit page.

I'm trying to implement the Drop Area as you can see in the figure below;

ButI'mfacingsomeproblems,andI'llstarttodescribethemindetail.

Ididatestonmyprojectwithaslightlydifferentimplementationofthedocumentation,butitwassupposedtowork,butitisnotworking.

TheexampleUiKitdocumentationisthis;

HTML

<divclass="test-upload uk-placeholder uk-text-center">
        <span uk-icon="icon: cloud-upload"></span>
        <span class="uk-text-middle">Attach binaries by dropping them here or</span>
        <div uk-form-custom>
            <input type="file" multiple>
            <span class="uk-link">selecting one</span>
        </div>
    </div>
<progress id="progressbar" class="uk-progress" value="0" max="100" hidden></progress>

Javascript

<script>

    (function ($) {

        var bar = $("#progressbar")[0];

        UIkit.upload('.test-upload', {

            url: '',
            multiple: true,

            beforeSend: function() { console.log('beforeSend', arguments); },
            beforeAll: function() { console.log('beforeAll', arguments); },
            load: function() { console.log('load', arguments); },
            error: function() { console.log('error', arguments); },
            complete: function() { console.log('complete', arguments); },

            loadStart: function (e) {
                console.log('loadStart', arguments);

                bar.removeAttribute('hidden');
                bar.max =  e.total;
                bar.value =  e.loaded;
            },

            progress: function (e) {
                console.log('progress', arguments);

                bar.max =  e.total;
                bar.value =  e.loaded;

            },

            loadEnd: function (e) {
                console.log('loadEnd', arguments);

                bar.max =  e.total;
                bar.value =  e.loaded;
            },

            completeAll: function () {
                console.log('completeAll', arguments);

                setTimeout(function () {
                    bar.setAttribute('hidden', 'hidden');
                }, 1000);

                alert('Upload Completed');
            }
        });

    })(jQuery);

</script>

And this is my template;

HTML

    <div class="row">
        <div class="form-group  col-sm-12">
            <label class="control-label">Foto</label>

            <div id="upload-drop" class="bw-upload">
                <i class="glyphicon  glyphicon-cloud-upload"></i>
                <span>Arraste a foto aqui ou </span>
                <a class="bw-upload-form-file">selecione <input id="upload-select" type="file" accept=".jpg,.jpeg,.png"/></a>
            </div>
        </div>
    </div>

JavaScript

$(function() {
    var settings = {
            type: 'json',
            filelimit: 1,
            allow: '*.(jpg|jpeg|png)',
            action: '/arm/fotos'
    };

    UIkit.uploadSelect($('#upload-select'), settings);
    UIkit.uploadDrop($('#upload-drop'), settings);
});

You realize that my model is a lot simpler, and it's a template taken from a project in GitHub found on the internet, but it's like this ... it was to work.

The version I am using UiKit is 2.27.4, I thought it was not getting active because it is not importing the right files right, but that's not the problem, I'm leaving below the files I used for the implementation.

Upload.min.css | UiKit.min.js | Upload.min.js

I know that it is not a problem of files because I did a tester using the static files as I am showing below, I got this static Links template from the UiKit documentation;

CSS

 <link rel='stylesheet prefetch' href='https://getuikit.com/assets/uikit/dist/css/uikit.css?nc=6094'>

JavaScript

 <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
    <script src='https://getuikit.com/assets/uikit/dist/js/uikit.js?nc=6094'></script>
    <script src='https://getuikit.com/assets/uikit/dist/js/uikit-icons.js?nc=6094'></script>

With static links there is no margin for file error!

I know my problem is here;

$(function() {
        var settings = {
                type: 'json',
                filelimit: 1,
                allow: '*.(jpg|jpeg|png)',
                action: '/arm/fotos'
        };

        UIkit.uploadSelect($('#upload-select'), settings);
        UIkit.uploadDrop($('#upload-drop'), settings);
    });

The problem is knowing why you are not enabling JavaScript in the component below;

<div class="row">
                <div class="form-group  col-sm-12">
                    <label class="control-label">Foto</label>

                    <div id="upload-drop" class="bw-upload">
                        <i class="glyphicon  glyphicon-cloud-upload"></i>
                        <span>Arraste a foto aqui ou </span>
                        <a class="bw-upload-form-file">selecione <input id="upload-select" type="file" accept=".jpg,.jpeg,.png"/></a>
                    </div>
                </div>
            </div>

There's something missing, but I do not know what it is.

I'm desperate and accepting suggestions.

===================================================== ============================

Without knowing what was wrong I decided to analyze my project in detail, and I had the idea of creating a very simple project, this project has no entities or business rules, it only contains an HTML page with CSS imports and JavaScript.

And through mini project I can identify that the problem was in the javascript code.

take a look

ItmatchesthefirstlineofthisJavaScriptcodebelow;

Click here to see my mini project repository

As you can see, it was unable to identify the function in the JavaScript code that is UIkit.uploadSelect and UIkit.uploadDrop

What happens is that I can not connect to this javascript file even though it is connecting correctly.

<script th:src="@{/javascripts/upload.min.js}"></script>

I'm finding the problem in the Spring Tools IDE tool

Someone could run a test for me please.