joomla/uikit
6
0
Fork 0
Code Issues Pull Requests Activity
2 Commits 1 Branch 5 Tags 107 KiB
JavaScript 100%
08484f8a9c
Go to file
Llewellyn van der Merwe 08484f8a9c
Add events, and other improvements
2024-09-12 07:10:27 +02:00
dist/js Add events, and other improvements 2024-09-12 07:10:27 +02:00
src/js Add events, and other improvements 2024-09-12 07:10:27 +02:00
.gitignore first commit 2020-09-04 19:45:23 +02:00
LICENSE.md first commit 2020-09-04 19:45:23 +02:00
package-lock.json first commit 2020-09-04 19:45:23 +02:00
package.json Add events, and other improvements 2024-09-12 07:10:27 +02:00
README.md Add events, and other improvements 2024-09-12 07:10:27 +02:00
rollup.config.js first commit 2020-09-04 19:45:23 +02:00

README.md

VDM Uikit Uploader Integration Guide

Overview

Uploader is an intuitive and lightweight JavaScript solution for embedding upload functionality into your website. By simply adding the Uploader class to any element that triggers an upload, you can enable users to upload files easily.

How to Add Uploader to Your Website

  1. Include the Uploader JavaScript File:

    First, include the Uploader script in the <head> section of your HTML document:

    <!-- Include the Uploader script from jsDelivr CDN -->
<script src="https://cdn.jsdelivr.net/gh/vdm-io/uikit@latest/dist/js/Uploader.min.js"></script>

  2. Markup Your Upload Area:

    In the body of your HTML document, apply the vdm-uikit-uploader class to any element that should trigger an upload action. Here is an example using a custom div:

    <select id="type-field-id" class="uk-select" aria-label="Select">
     <option value="guid-value-1">Option 01</option>
     <option value="guid-value-2">Option 02</option>
</select>

<div id="upload_id" class="vdm-uikit-uploader uk-placeholder uk-text-center"
     data-type-id="type-field-id"
     data-progressbar-id="progressbar-id"
     data-display-id="display-id"
     data-success-id="success-id"
     data-error-id="error-id"
     data-allowed-format-id="allowed-format-id"
     data-file-type-id="file-type-id"
 hidden>
    <span uk-icon="icon: cloud-upload"></span>
    <span class="uk-text-middle">Attach <span id="file-type-id">file</span> by dropping them here or</span>
    <div uk-form-custom>
        <input type="file" multiple>
        <span class="uk-link">selecting one</span> <span id="allowed-format-id"></span>
    </div>
</div>

<progress id="progressbar-id" class="uk-progress" value="0" max="100" hidden></progress>

<div id="success-id" hidden></div>
<div id="error-id" hidden></div>
<div id="display-id" hidden></div>

  3. Initializing the Uploader:

    The script will automatically initialize all elements with the vdm-uikit-uploader class. You don’t need to manually initialize it unless additional customization is required.

  4. Customization:

    You must set the various field configurations this way (before loading the class file):

    <script>
window.vdmUploaderConfig = {
   endpoint: 'https://your-type-endpoint.com',
   targetClass: 'vdm-uikit-uploader',
   upload_id: {
      endpoint: 'https://your-upload-endpoint.com',
      endpoint_diplay: 'https://your-display-endpoint.com'
   }
};
</script>
<script src="https://cdn.jsdelivr.net/gh/vdm-io/uikit@2.0.5/dist/js/Uploader.min.js"></script>

Preventing UIkit Collisions

The Uploader script has been designed to work independently of any existing UIkit installation on your website. It checks for existing instances of UIkit and uses them if they exist. If no UIkit instance is present, it loads its own copy.

License

Copyright Llewellyn van der Merwe under the MIT license.