How do I activate the javascript upload component using UIKIT?

Question

This page deals with Javascript component implementations using Uikit Frameworks.

Click here to access the Uikit page.

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

But I am facing some problems, and I will begin to describe in great detail.

I did a test on my project with the implementation a little different from the documentation, but it was supposed to work, but it’s not working.

The example of the Uikit documentation is this;

HTML

    <div class="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 model;

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 notice that my model is much simpler, and it’s a model taken from a Github project found on the internet, but it’s like this... it was supposed to work.

The version I’m using of Uikit is from 2.27.4, I thought I was not getting active because it is not importing certain the right files, but that’s not the problem, I am leaving below the records I used for the implementation.

Upload.min.css | Uikit.min.js | Upload.min.js

I know it’s not a file problem because I made a Tester using the static files as I’m showing below, I took 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 you have no file error margin!

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 why Javascript is not enabled 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>

Something’s missing, but I don’t know what it is.

I’m desperate and accepting suggestions.

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

Without knowing what was wrong I decided to analyze my project thoroughly, and I had the idea to create a very simple project, this project has no entities, nor business rules, it only contains an HTML page with CSS and Javascript imports.

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

take a look

It corresponds to the first line of this Javascript code below;

Click here to see my repository of the mini project

As you can see he failed to identify the function in the Javascript code that is the Uikit.uploadSelect and the Uikit.uploadDrop

What happens is that I cannot connect this javascript file although it is connecting in the correct way.

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

I’m guessing the problem is in the IDE Spring Tools tool

Could someone run a test for me please.