JS Class to work with file upload. Custom responsive forms, progress bars, drag 'n' drop function, Ctrl + V paste, image preview, ...
Table of Contents
- Dragio.js demo
- Installing Dragio.js
- Using Dragio.js
- Browser Support
- API
- Dragio.js options
- Author
- License
- Documentation
Check out the demo to see it in action (on your mobile or emulate touches on your browser).
Download Dragio.js and Dragio.css from releases, include them in <head> by entering following code:
<script src="Dragio.js"></script>
<link rel="stylesheet" href="Dragio.css"><html>
<head>
<link rel="stylesheet" href="Dragio.css">
<script src="Dragio.js"></script>
</head>
<body>
<button onclick="dragio.open()">Upload file</button>
</body>
<script>
var dragio = new Dragio({
'ID': "dragio1",
"URL": "http://localhost:8000/upload",
"pasteURL": "http://localhost:8000/paste",
"debug": true,
});
</script>
</html>Tested on:
- Chrome (Android, desktop)
- MS Edge (desktop)
Create a new instance of Dragio
options(Object) - Options to customize a new instance of Dragio.- [
options.ID] (String) - The ID of instance. - [
options.URL] (String) - The URL where will be sent the AJAX request with files - [
options.pasteURL] (String) - The URL where will be sent the AJAX request with the image from clipboard. - [
options.container] (HTMLElement) - The DOM element that will have touch listeners. Default:body. - [
options.animationTime] (Number) - The opening animation time in milliseconds. Default:300. - [
options.callback] (Function) - The callback function. If it is set, then submit function will call this function. - [
options.debug] (Boolean) - Sets the application output via a console. Default:false. - [
options.paste] (Boolean) - Enable or disable paste. Default:truewhich means enabled paste. - [
options.justOverlay] (Boolean) - If it is sets to false, it will open custom file dialog with more information about upload. Defaultfalse
var dragio = new Dragio({
'container': document.querySelector('body'),
'wrapper': document.getElementById('site-wrapper'),
'canvas': document.getElementById('site-canvas'),
'button': document.getElementById('logo'),
'percent': 0.25,
'area': 0.1,
'debug': 'false',
'closeMenuOnWidth': false,
'disableMenuOnWidth': false,
'size': 300,
'animationTime': 300
});Opens the dialog.
dragio.open();Closes the dialog.
dragio.close();Submits the form.
dragio.submit();Displays message.
dragio.displayMessage("Hello world", false);- Alex Krátký
- E-mail: info@alexkratky.cz
- Web: https://alexkratky.cz/
- Web: https://alexkratky.com/
This project is licensed under the MIT License - see the LICENSE file for details