Advanced File Picker For Uploader - jQuery formhelper
File Size: | 143 KB |
---|---|
Views Total: | 3486 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

formhelper is an advanced, customizable file input/file picker plugin that helps developers create file uploaders with ease.
Features:
- Compatible with Bootstrap framework.
- Allows you to pick files via drag and drop.
- Allows you to limit the size, number and format of files.
- Allows you to select multiple files at a time.
How to use it:
1. Load the required jQuery library and other resources in the document.
<!-- Bootstrap Stylesheet (OPTIONAL) --> <link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> <!-- jQuery is required --> <script src="/path/to/cdn/jquery.min.js"></script> <!-- Font Awesome Icons --> <link rel="stylesheet" href="/path/to/font-awesome/all.min.css" />
2. Load the jQuery formhelper plugin's files.
<link rel="stylesheet" href="./dist/css/jquery-formhelper.min.css" /> <script src="./dist/js/jquery-formhelper.min.js" defer></script>
3. Initialize the plugin on your HTML form.
<form class="uploader"></form>
$(function(){ var formhelper = $('.uploader').formhelper(); });
4. Add a file picker to the uploader.
var fileInput = formhelper.addFilePicker({ // config the file input fileInput: { name: 'files[]', accept: [], multiple: false, }, canRemove: true, canModify: true, canDragDrop: false, dragDropArea: false, // drop area container: false, maxBytes: 10 * 1024 * 1024, maxFiles: 10, // callbacks onChange: undefined, onCreate: undefined, onRemove: undefined, onDrop: undefined, onDragEnter: undefined, onDragOver: undefined, onDragLeave: undefined, offDragDrop: undefined, });
5. Add files to the uploader via JavaScript.
fileInput.addFileBox({ inputs: [ {name: 'hideValue', value: 'demo'} ], files: [ { name: '1.png', size: 11179, link: '1.png', }, { name: '2.png', size: 356745, link: '2.png', }, ], });
6. All possible options for the formhelper
method.
var formhelper = $('.uploader').formhelper({ maxBytes: 20 * 1024 * 1024, maxFiles: 20, filePicker: { canRemove: true, canModify: true, canDragDrop: false, showFileSize: true, dragDropArea: false, container: false, maxBytes: 10 * 1024 * 1024, maxFiles: 10, onChange: undefined, onCreate: undefined, onRemove: undefined, onDrop: undefined, onDragEnter: undefined, onDragOver: undefined, onDragLeave: undefined, offDragDrop: undefined, fileInput: { name: 'files[]', accept: [], multiple: false, }, }, language: { selectFile: 'Select file', selectingFile: 'Selecting files...', unselectFile: 'No files selected.', limitMsg: 'File size limit ({0}). Upload limit {1} files.', acceptMsg: 'File accept format list: {0}', fileSizeOverload: 'File size overload! limit size: {1}', fileCountOverload: 'File count overload! limit count: {1}', }, templates: { filePicker: false, fileBox: false, }, onFail: function (e) { alert(`[${e.code}] ${e.msg}`); }, });
7. Get the information about the file picker.
var total = formhelper.getFilePickerInfo(); total.count total.sizeHum // get the number of files from the fileInput instance fileInput.getCount(); // get the size of files from the fileInput instance fileInput.getSize(true)
Changelog:
v1.8.3 (2022-06-06)
- Hotfix
v1.8.2 (2021-06-11)
- Hotfix
v1.8.1 (2021-06-09)
- Added show file size config
v1.8.0 (2021-05-18)
- Delete fileinput use file blob
2021-04-25
- Added trigger to FilePicker API
This awesome jQuery plugin is developed by gunter1020. For more Advanced Usages, please check the demo page or visit the official website.