New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

filebokz

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

filebokz - npm Package Compare versions

Comparing version 0.0.2 to 0.1.0

.editorconfig
babel.config.json
dist/filebokz.js
dist/filebokz.js.map
rollup.config.js

8

dist/filebokz.min.js

@@ -0,6 +1,6 @@

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).filebokz=t()}(this,function(){"use strict";
/*!
filebokz v0.0.2 (https://github.com/kodie/filebokz)
by Kodie Grantham (https://kodieg.com)
*/
var filebokz=function(e,i){e=e||".filebokz","string"!=typeof i&&(i="filebokz");var h=["apng","bmp","gif","x-icon","jpeg","png","svg+xml","tiff","webp"],r=["kB","MB","GB","TB","PB","EB","ZB","YB"],t=document.createElement("div"),y="draggable"in t||"ondragstart"in t&&"ondrop"in t,s="FormData"in window&&"FileReader"in window;filebokz.count||(filebokz.count=0),"string"==typeof e?e=document.querySelectorAll(e):e instanceof HTMLElement&&(e=[e]);function E(e,t,i,r){return e.hasOwnProperty(t+r)?e[t+r]:e.hasOwnProperty(t+i)?e[t+i]:void 0}function w(e){if(Math.abs(e)<1024)return e+" B";for(var t=-1;e/=1024,++t,1024<=Math.round(10*Math.abs(e))/10&&t<r.length-1;);return+e.toFixed(1)+" "+r[t]}function o(e,l,f){var t=f.files,i=f.originalFiles||[],r="remove"===e.filebokzAction;if(t.length){var a=!l.dataset.appendable||"false"!==l.dataset.appendable.toLowerCase(),e=f.hasAttribute("multiple")&&"false"!==f.getAttribute("multiple").toLowerCase();if(a&&e&&!r&&i.length){for(var n=Array.from(t),s=Array.from(i),o=0;o<n.length;o++){for(var d=!1,c=0;c<s.length;c++)n[o].lastModifed===s[c].lastModifed&&n[o].name===s[c].name&&n[o].size===s[c].size&&n[o].type===s[c].type&&(d=!0);d||s.push(n[o])}f.files=filebokz.newFileList(s),t=f.files}k(t,l,f)?l.classList.add("has-files"):t=[]}t.length||r||(f.files=filebokz.newFileList(i),t=f.files),t.length||l.classList.remove("has-files"),f.originalFiles=t,l.dataset.fileCount=t.length,(r=l.querySelector(".file-count"))&&(r.innerHTML=t.length);for(var g=0,u=0;u<t.length;u++)g+=t[u].size;l.dataset.size=g,(r=l.querySelector(".size"))&&(r.innerHTML=w(g));var v=l.querySelector(".files");if(v){var m=v.dataset,p=v.querySelectorAll(".file");if(p)for(var b=0;b<p.length;b++)v.removeChild(p[b]);if(t.length)for(var L=!m.draggable||"false"!==m.draggable.toLowerCase(),z=0;z<t.length;z++)!function(e,r){var t=e.type.split("/")[0],i=e.type.replace(/[/+-](\w{1})/g,function(e){return e.toUpperCase()}).replace(/[/+-]/g,""),t=t.charAt(0).toUpperCase()+t.slice(1),a=(a=E(m,"element",t,i))||m.element||"span",n=(n=E(m,"content",t,i))||m.content||"{name}",s=(s=E(m,"contentBefore",t,i))||m.contentBefore||"",o=(o=E(m,"contentAfter",t,i))||m.contentAfter||"",i=(i=E(m,"url",t,i))||(h.includes(e.type.replace("image/",""))?window.URL.createObjectURL(e):m.url||"");n=(n=(n=(n=(n=s+n+o).replace(/{name}/gi,e.name)).replace(/{type}/gi,e.type)).replace(/{size}/gi,w(e.size))).replace(/{url}/gi,i);a=document.createElement(a);a.className="file",a.innerHTML=n,y&&L&&(a.draggable="true",a.addEventListener("drag",function(e){!function(e,t){e.preventDefault(),e.stopPropagation();var i=document.elementFromPoint(e.pageX,e.pageY);if(i){var r=document.getElementById(t);var a=i.closest("[filebokz-id]");if(a&&a.classList.contains("js-enabled")){if(a.id!==t){e.target.classList.add("is-transferring");r.classList.add("is-transferring")}e.target.classList.remove("is-removing");r.classList.remove("is-removing")}else{e.target.classList.add("is-removing");r.classList.add("is-removing");e.target.classList.remove("is-transferring");r.classList.remove("is-transferring")}}}(e,l.id)},!1),a.addEventListener("dragstart",function(e){!function(e,t){e.target.classList.add("is-dragging");var i=Array.from(e.target.parentNode.children).indexOf(e.target);e.dataTransfer.setData("fileBoxId",t),e.dataTransfer.setData("fileIndex",i)}(e,l.id)},!1));n=a.querySelector(".remove");n&&n.addEventListener("click",function(e){var t,i;t=f,i=r,(e=e).preventDefault(),e.stopPropagation(),filebokz.removeFiles(t,i)},!1),v.append(a)}(t[z],z)}t.length>i.length?filebokz.triggerEvent("file-added",l):t.length<i.length&&filebokz.triggerEvent("file-removed",l)}function l(e,t,i){e.preventDefault(),e.stopPropagation(),t.classList.add("is-dragging")}function k(e,t,i){var r=t.dataset,i=i.hasAttribute("multiple")&&"false"!==i.getAttribute("multiple").toLowerCase()?r.hasOwnProperty("maxFiles")?r.maxFiles:null:1,a=r.maxFileSize,n=r.maxSize,s=r.allowedExtensions?r.allowedExtensions.split(","):null,o=0;if(i&&e.length>i)return d(t,"maxFiles",i),0;for(var l=0;l<e.length;l++){var f=(f=e[l].name.split("."))?f.pop().toLowerCase():"[none]";if(o+=e[l].size,a&&e[l].size>a)return d(t,"maxFileSize",a),0;if(n&&n<o)return d(t,"maxSize",n),0;if(s&&!s.includes(f))return d(t,"allowedExtensions",s.join(", ")),0}return 1}for(var d=function(e,t,i){var r=e.querySelector(".error-msg"),a=e.dataset.errorDisplayDuration||3e3;e.classList.add("error");var n=e.dataset,s="";"maxFiles"===t&&(s=(s=(s=n.maxFilesErrorMsg||"A maximum of {variable} file{s} can be uploaded.").replace(/{variable}/gi,i)).replace(/{s}/gi,1<i?"s":"")),"maxFileSize"===t&&(s=(s=n.maxFileSizeErrorMsg||"File size cannot exceed {variable}.").replace(/{variable}/gi,w(i))),"maxSize"===t&&(s=(s=n.maxSizeErrorMsg||"Total combined file size cannot exceed {variable}.").replace(/{variable}/gi,w(i))),"allowedExtensions"===t&&(s=(s=n.allowedExtensionsErrorMsg||"Only the following file types are allowed: {variable}.").replace(/{variable}/gi,i)),r&&(r.innerHTML=s,i=250,e.dataset.hasOwnProperty("errorAnimationDuration")&&(i=e.dataset.errorAnimationDuration),setTimeout(function(){r.innerHTML=""},a+i)),setTimeout(function(){e.classList.remove("error")},a),filebokz.triggerEvent("error",e,{errorMessage:s,errorType:t})},a=0;a<e.length;a++)!function(a){var t=a.closest("form"),n=a.querySelector('input[type="file"]');!n||a.classList.contains("no-js")||a.dataset.hasOwnProperty("filebokzId")||(filebokz.count++,a.dataset.filebokzId=filebokz.count,a.classList.add("js-enabled"),i&&!a.classList.contains(i)&&a.classList.add(i),s&&a.classList.add("is-advanced"),y&&a.classList.add("is-draggable"),a.id||(a.id="filebokz-"+filebokz.count),a.addEventListener("dragover",function(e){l(e,a)},!1),a.addEventListener("dragenter",function(e){l(e,a)},!1),a.addEventListener("dragleave",function(e){var t;t=a,(e=e).preventDefault(),e.stopPropagation(),t.classList.remove("is-dragging")},!1),a.addEventListener("drop",function(e){!function(e,t,i){e.preventDefault(),e.stopPropagation(),t.classList.remove("is-dragging");var r=e.dataTransfer.files,a=e.dataTransfer.getData("fileBoxId");if(a){var n=e.dataTransfer.getData("fileIndex"),s=document.getElementById(a),o=s.querySelector("input"),e=s.querySelector(".files").children[n];if(s.classList.remove("is-dragging"),s.classList.remove("is-removing"),s.classList.remove("is-transferring"),e.classList.remove("is-dragging"),e.classList.remove("is-removing"),e.classList.remove("is-transferring"),a===t.id)return;s=Array.from(o.files),e=s[n],a=Array.from(i.files);i.hasAttribute("multiple")&&"false"!==i.getAttribute("multiple").toLowerCase()?a.push(e):a=[e],k(a,t,i)&&(r=filebokz.newFileList(a),s.splice(n,1),o.files=filebokz.newFileList(s),filebokz.triggerEvent("change",o,{filebokzAction:"remove"}))}r&&r.length&&(i.files=r,filebokz.triggerEvent("change",i))}(e,a,n)},!1),n.addEventListener("change",function(e){o(e,a,n)},!1),n.addEventListener("focus",function(e){a.classList.add("in-focus")},!1),n.addEventListener("blur",function(e){a.classList.remove("in-focus")},!1),t&&(a.dataset.autoSubmit&&"false"!==a.dataset.autoSubmit.toLowerCase()&&n.addEventListener("change",function(e){t.submit()},!1),t.addEventListener("reset",function(e){var t,i,r;i=n,(r=(t=a).querySelector(".error"))&&(r.innerHTML=""),t.classList.remove("error"),filebokz.triggerEvent("change",i)},!1),t.addEventListener("submit",function(e){a.classList.add("is-uploading")},!1)),o(new Event("change"),a,n))}(e[a]);return window.addEventListener("dragover",function(e){e.preventDefault()},!1),window.addEventListener("drop",function(e){!function(e){e.preventDefault(),e.stopImmediatePropagation();var t=e.dataTransfer.getData("fileBoxId");t&&(t=document.getElementById(t).querySelector("input"),e=e.dataTransfer.getData("fileIndex"),filebokz.removeFiles(t,e))}(e)},!1),e};filebokz.addFiles=function(e,t){var i=Array.from(e.files);i.concat(Array.from(t)),e.files=filebokz.newFileList(i),filebokz.triggerEvent("change",e)},filebokz.newFileList=function(e){var t;try{t=new DataTransfer}catch(e){t=new ClipboardEvent("")}for(var i=0;i<e.length;i++)t.items.add(e[i]);return t.files},filebokz.removeFiles=function(e,t,i){var r=Array.from(e.files);r.splice(t||0,i||1),e.files=filebokz.newFileList(r),filebokz.triggerEvent("change",e,{filebokzAction:"remove"})},filebokz.triggerEvent=function(i,r,a,e){return setTimeout(function(){var e,t=new Event(i);for(e in a)a.hasOwnProperty(e)&&(t[e]=a[e]);r.dispatchEvent(t)},e||1)};
filebokz v0.1.0 (https://github.com/kodie/filebokz)
by Kodie Grantham (https://kodieg.com)
*/function x(e,r){e=e||".filebokz","string"!=typeof r&&(r="filebokz");var m=["apng","bmp","gif","x-icon","jpeg","png","svg+xml","tiff","webp"],i=["kB","MB","GB","TB","PB","EB","ZB","YB"],t=document.createElement("div"),v="draggable"in t||"ondragstart"in t&&"ondrop"in t,s="FormData"in window&&"FileReader"in window;x.count||(x.count=0),"string"==typeof e?e=document.querySelectorAll(e):e instanceof HTMLElement&&(e=[e]);for(var c=function(e,t,r){var i=e.querySelector(".error-msg"),n=e.dataset.errorDisplayDuration||3e3;e.classList.add("error");var a=e.dataset,s="";"maxFiles"===t&&(s=(s=(s=a.maxFilesErrorMsg||"A maximum of {letiable} file{s} can be uploaded.").replace(/{letiable}/gi,r)).replace(/{s}/gi,1<r?"s":"")),"maxFileSize"===t&&(s=(s=a.maxFileSizeErrorMsg||"File size cannot exceed {letiable}.").replace(/{letiable}/gi,h(r))),"maxSize"===t&&(s=(s=a.maxSizeErrorMsg||"Total combined file size cannot exceed {letiable}.").replace(/{letiable}/gi,h(r))),"allowedExtensions"===t&&(s=(s=a.allowedExtensionsErrorMsg||"Only the following file types are allowed: {letiable}.").replace(/{letiable}/gi,r)),i&&(i.innerHTML=s,r=250,Object.prototype.hasOwnProperty.call(e.dataset,"errorAnimationDuration")&&(r=e.dataset.errorAnimationDuration),setTimeout(function(){i.innerHTML=""},n+r)),setTimeout(function(){e.classList.remove("error")},n),x.triggerEvent("error",e,{errorMessage:s,errorType:t})},L=function(e,t,r,i){return Object.prototype.hasOwnProperty.call(e,t+i)?e[t+i]:Object.prototype.hasOwnProperty.call(e,t+r)?e[t+r]:void 0},h=function(e){if(Math.abs(e)<1024)return e+" B";for(var t=-1;e/=1024,++t,1024<=Math.round(10*Math.abs(e))/10&&t<i.length-1;);return+e.toFixed(1)+" "+i[t]},o=function(e,c,f){var r=f.files,t=f.originalFiles||[],i="remove"===e.filebokzAction;if(r.length){var n=!c.dataset.appendable||"false"!==c.dataset.appendable.toLowerCase(),e=f.hasAttribute("multiple")&&"false"!==f.getAttribute("multiple").toLowerCase();if(n&&e&&!i&&t.length){for(var a=Array.from(r),s=Array.from(t),o=0;o<a.length;o++){for(var l=!1,d=0;d<s.length;d++)a[o].lastModifed===s[d].lastModifed&&a[o].name===s[d].name&&a[o].size===s[d].size&&a[o].type===s[d].type&&(l=!0);l||s.push(a[o])}f.files=x.newFileList(s),r=f.files}w(r,c,f)?c.classList.add("has-files"):r=[]}r.length||i||(f.files=x.newFileList(t),r=f.files),r.length||c.classList.remove("has-files"),f.originalFiles=r,c.dataset.fileCount=r.length;i=c.querySelector(".file-count");i&&(i.innerHTML=r.length);for(var g=0,u=0;u<r.length;u++)g+=r[u].size;c.dataset.size=g;i=c.querySelector(".size");i&&(i.innerHTML=h(g));var p=c.querySelector(".files");p&&function(){var d=p.dataset,e=p.querySelectorAll(".file");if(e)for(var t=0;t<e.length;t++)p.removeChild(e[t]);r.length&&function(){for(var l=!d.draggable||"false"!==d.draggable.toLowerCase(),e=0;e<r.length;e++)!function(e,t){var r=e.type.split("/")[0],i=e.type.replace(/[/+-](\w{1})/g,function(e){return e.toUpperCase()}).replace(/[/+-]/g,""),r=r.charAt(0).toUpperCase()+r.slice(1),n=(n=L(d,"element",r,i))||d.element||"span",a=(a=L(d,"content",r,i))||d.content||"{name}",s=(s=L(d,"contentBefore",r,i))||d.contentBefore||"",o=(o=L(d,"contentAfter",r,i))||d.contentAfter||"",i=(i=L(d,"url",r,i))||(m.includes(e.type.replace("image/",""))?window.URL.createObjectURL(e):d.url||"");a=(a=(a=(a=(a=s+a+o).replace(/{name}/gi,e.name)).replace(/{type}/gi,e.type)).replace(/{size}/gi,h(e.size))).replace(/{url}/gi,i);n=document.createElement(n);n.className="file",n.innerHTML=a,v&&l&&(n.draggable="true",n.addEventListener("drag",function(e){b(e,c.id)},!1),n.addEventListener("dragstart",function(e){y(e,c.id)},!1));a=n.querySelector(".remove");a&&a.addEventListener("click",function(e){E(e,f,t)},!1),p.append(n)}(r[e],e)}()}(),r.length>t.length?x.triggerEvent("file-added",c):r.length<t.length&&x.triggerEvent("file-removed",c)},l=function(e,t,r){e.preventDefault(),e.stopPropagation(),t.classList.add("is-dragging")},b=function(e,t){e.preventDefault(),e.stopPropagation();var r,i=document.elementFromPoint(e.pageX,e.pageY);i&&(r=document.getElementById(t),(i=i.closest("[filebokz-id]"))&&i.classList.contains("js-enabled")?(i.id!==t&&(e.target.classList.add("is-transferring"),r.classList.add("is-transferring")),e.target.classList.remove("is-removing"),r.classList.remove("is-removing")):(e.target.classList.add("is-removing"),r.classList.add("is-removing"),e.target.classList.remove("is-transferring"),r.classList.remove("is-transferring")))},y=function(e,t,r){e.target.classList.add("is-dragging");var i=Array.from(e.target.parentNode.children).indexOf(e.target);e.dataTransfer.setData("fileBoxId",t),e.dataTransfer.setData("fileIndex",i)},E=function(e,t,r){e.preventDefault(),e.stopPropagation(),x.removeFiles(t,r)},w=function(e,t,r){var i=t.dataset,r=r.hasAttribute("multiple")&&"false"!==r.getAttribute("multiple").toLowerCase()?Object.prototype.hasOwnProperty.call(i,"maxFiles")?i.maxFiles:null:1,n=i.maxFileSize,a=i.maxSize,s=i.allowedExtensions?i.allowedExtensions.split(","):null,o=0;if(r&&e.length>r)return c(t,"maxFiles",r),!1;for(var l=0;l<e.length;l++){var d=(d=e[l].name.split("."))?d.pop().toLowerCase():"[none]";if(o+=e[l].size,n&&e[l].size>n)return c(t,"maxFileSize",n),!1;if(a&&a<o)return c(t,"maxSize",a),!1;if(s&&!s.includes(d))return c(t,"allowedExtensions",s.join(", ")),!1}return!0},n=0;n<e.length;n++)!function(n){var t=n.closest("form"),a=n.querySelector('input[type="file"]');!a||n.classList.contains("no-js")||Object.prototype.hasOwnProperty.call(n.dataset,"filebokzId")||(x.count++,n.dataset.filebokzId=x.count,n.classList.add("js-enabled"),r&&!n.classList.contains(r)&&n.classList.add(r),s&&n.classList.add("is-advanced"),v&&n.classList.add("is-draggable"),n.id||(n.id="filebokz-"+x.count),n.addEventListener("dragover",function(e){l(e,n)},!1),n.addEventListener("dragenter",function(e){l(e,n)},!1),n.addEventListener("dragleave",function(e){var t;t=n,(e=e).preventDefault(),e.stopPropagation(),t.classList.remove("is-dragging")},!1),n.addEventListener("drop",function(e){!function(e,t,r){e.preventDefault(),e.stopPropagation(),t.classList.remove("is-dragging");var i=e.dataTransfer.files,n=e.dataTransfer.getData("fileBoxId");if(n){var a=e.dataTransfer.getData("fileIndex"),s=document.getElementById(n),o=s.querySelector("input"),e=s.querySelector(".files").children[a];if(s.classList.remove("is-dragging"),s.classList.remove("is-removing"),s.classList.remove("is-transferring"),e.classList.remove("is-dragging"),e.classList.remove("is-removing"),e.classList.remove("is-transferring"),n===t.id)return;s=Array.from(o.files),e=s[a],n=Array.from(r.files);r.hasAttribute("multiple")&&"false"!==r.getAttribute("multiple").toLowerCase()?n.push(e):n=[e],w(n,t,r)&&(i=x.newFileList(n),s.splice(a,1),o.files=x.newFileList(s),x.triggerEvent("change",o,{filebokzAction:"remove"}))}i&&i.length&&(r.files=i,x.triggerEvent("change",r))}(e,n,a)},!1),a.addEventListener("change",function(e){o(e,n,a)},!1),a.addEventListener("focus",function(e){n.classList.add("in-focus")},!1),a.addEventListener("blur",function(e){n.classList.remove("in-focus")},!1),t&&(n.dataset.autoSubmit&&"false"!==n.dataset.autoSubmit.toLowerCase()&&a.addEventListener("change",function(e){t.submit()},!1),t.addEventListener("reset",function(e){var t,r,i;r=a,(i=(t=n).querySelector(".error"))&&(i.innerHTML=""),t.classList.remove("error"),x.triggerEvent("change",r)},!1),t.addEventListener("submit",function(e){n.classList.add("is-uploading")},!1)),o(new Event("change"),n,a))}(e[n]);return window.addEventListener("dragover",function(e){e.preventDefault()},!1),window.addEventListener("drop",function(e){!function(e){e.preventDefault(),e.stopImmediatePropagation();var t=e.dataTransfer.getData("fileBoxId");t&&(t=document.getElementById(t).querySelector("input"),e=e.dataTransfer.getData("fileIndex"),x.removeFiles(t,e))}(e)},!1),e}return x.addFiles=function(e,t){var r=Array.from(e.files);r.concat(Array.from(t)),e.files=x.newFileList(r),x.triggerEvent("change",e)},x.newFileList=function(e){var t;try{t=new DataTransfer}catch(e){t=new ClipboardEvent("")}for(var r=0;r<e.length;r++)t.items.add(e[r]);return t.files},x.removeFiles=function(e,t,r){var i=Array.from(e.files);i.splice(t||0,r||1),e.files=x.newFileList(i),x.triggerEvent("change",e,{filebokzAction:"remove"})},x.triggerEvent=function(r,i,n,e){return setTimeout(function(){var e,t=new Event(r);for(e in n)Object.prototype.hasOwnProperty.call(n,e)&&(t[e]=n[e]);i.dispatchEvent(t)},e||1)},x});
//# sourceMappingURL=filebokz.min.js.map

230

filebokz.js
/*!
filebokz v0.0.2 (https://github.com/kodie/filebokz)
filebokz v0.1.0 (https://github.com/kodie/filebokz)
by Kodie Grantham (https://kodieg.com)
*/
var filebokz = function (elements, applyClass) {
const filebokz = (elements, applyClass) => {
if (!elements) elements = '.filebokz'
if (typeof applyClass !== 'string') applyClass = 'filebokz'
var imageTypes = ['apng', 'bmp', 'gif', 'x-icon', 'jpeg', 'png', 'svg+xml', 'tiff', 'webp']
var sizeUnits = ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
var div = document.createElement('div')
var draggable = ('draggable' in div) || ('ondragstart' in div && 'ondrop' in div)
var advanced = ('FormData' in window && 'FileReader' in window)
const imageTypes = ['apng', 'bmp', 'gif', 'x-icon', 'jpeg', 'png', 'svg+xml', 'tiff', 'webp']
const sizeUnits = ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
const div = document.createElement('div')
const draggable = ('draggable' in div) || ('ondragstart' in div && 'ondrop' in div)
const advanced = ('FormData' in window && 'FileReader' in window)

@@ -24,30 +24,30 @@ if (!filebokz.count) filebokz.count = 0

var displayErrorMessage = function (fileBox, errorType, variable) {
var element = fileBox.querySelector('.error-msg')
var errorDisplayDuration = fileBox.dataset.errorDisplayDuration || 3000
const displayErrorMessage = (fileBox, errorType, letiable) => {
const element = fileBox.querySelector('.error-msg')
const errorDisplayDuration = fileBox.dataset.errorDisplayDuration || 3000
fileBox.classList.add('error')
var fileBoxData = fileBox.dataset
var message = ''
const fileBoxData = fileBox.dataset
let message = ''
if (errorType === 'maxFiles') {
message = fileBoxData.maxFilesErrorMsg || 'A maximum of {variable} file{s} can be uploaded.'
message = message.replace(/{variable}/ig, variable)
message = message.replace(/{s}/ig, (variable > 1) ? 's' : '')
message = fileBoxData.maxFilesErrorMsg || 'A maximum of {letiable} file{s} can be uploaded.'
message = message.replace(/{letiable}/ig, letiable)
message = message.replace(/{s}/ig, (letiable > 1) ? 's' : '')
}
if (errorType === 'maxFileSize') {
message = fileBoxData.maxFileSizeErrorMsg || 'File size cannot exceed {variable}.'
message = message.replace(/{variable}/ig, fileSize(variable))
message = fileBoxData.maxFileSizeErrorMsg || 'File size cannot exceed {letiable}.'
message = message.replace(/{letiable}/ig, fileSize(letiable))
}
if (errorType === 'maxSize') {
message = fileBoxData.maxSizeErrorMsg || 'Total combined file size cannot exceed {variable}.'
message = message.replace(/{variable}/ig, fileSize(variable))
message = fileBoxData.maxSizeErrorMsg || 'Total combined file size cannot exceed {letiable}.'
message = message.replace(/{letiable}/ig, fileSize(letiable))
}
if (errorType === 'allowedExtensions') {
message = fileBoxData.allowedExtensionsErrorMsg || 'Only the following file types are allowed: {variable}.'
message = message.replace(/{variable}/ig, variable)
message = fileBoxData.allowedExtensionsErrorMsg || 'Only the following file types are allowed: {letiable}.'
message = message.replace(/{letiable}/ig, letiable)
}

@@ -58,4 +58,4 @@

var errorAnimationDuration = 250
if (fileBox.dataset.hasOwnProperty('errorAnimationDuration')) {
let errorAnimationDuration = 250
if (Object.prototype.hasOwnProperty.call(fileBox.dataset, 'errorAnimationDuration')) {
errorAnimationDuration = fileBox.dataset.errorAnimationDuration

@@ -79,6 +79,6 @@ }

var fileAttribute = function (attributes, attrPrefix, typePrefix, typeKey) {
if (attributes.hasOwnProperty(attrPrefix + typeKey)) {
const fileAttribute = (attributes, attrPrefix, typePrefix, typeKey) => {
if (Object.prototype.hasOwnProperty.call(attributes, attrPrefix + typeKey)) {
return attributes[attrPrefix + typeKey]
} else if (attributes.hasOwnProperty(attrPrefix + typePrefix)) {
} else if (Object.prototype.hasOwnProperty.call(attributes, attrPrefix + typePrefix)) {
return attributes[attrPrefix + typePrefix]

@@ -88,6 +88,6 @@ }

var fileSize = function (bytes) {
const fileSize = (bytes) => {
if (Math.abs(bytes) < 1024) return bytes + ' B'
var u = -1
let u = -1

@@ -102,23 +102,23 @@ do {

var onBlur = function (e, fileBox) {
const onBlur = (e, fileBox) => {
fileBox.classList.remove('in-focus')
}
var onChange = function (e, fileBox, input) {
var files = input.files
var originalFiles = input.originalFiles || []
var removing = e.filebokzAction === 'remove'
const onChange = (e, fileBox, input) => {
let files = input.files
const originalFiles = input.originalFiles || []
const removing = e.filebokzAction === 'remove'
if (files.length) {
var appendable = !fileBox.dataset.appendable || fileBox.dataset.appendable.toLowerCase() !== 'false'
var multiple = input.hasAttribute('multiple') && input.getAttribute('multiple').toLowerCase() !== 'false'
const appendable = !fileBox.dataset.appendable || fileBox.dataset.appendable.toLowerCase() !== 'false'
const multiple = input.hasAttribute('multiple') && input.getAttribute('multiple').toLowerCase() !== 'false'
if (appendable && multiple && !removing && originalFiles.length) {
var filesArr = Array.from(files)
var newFilesArr = Array.from(originalFiles)
const filesArr = Array.from(files)
const newFilesArr = Array.from(originalFiles)
for (var i = 0; i < filesArr.length; i++) {
var duplicateFound = false
for (let i = 0; i < filesArr.length; i++) {
let duplicateFound = false
for (var k = 0; k < newFilesArr.length; k++) {
for (let k = 0; k < newFilesArr.length; k++) {
if (

@@ -158,7 +158,7 @@ filesArr[i].lastModifed === newFilesArr[k].lastModifed &&

var fileCountElement = fileBox.querySelector('.file-count')
const fileCountElement = fileBox.querySelector('.file-count')
if (fileCountElement) fileCountElement.innerHTML = files.length
var size = 0
for (var s = 0; s < files.length; s++) {
let size = 0
for (let s = 0; s < files.length; s++) {
size += files[s].size

@@ -169,12 +169,12 @@ }

var sizeElement = fileBox.querySelector('.size')
const sizeElement = fileBox.querySelector('.size')
if (sizeElement) sizeElement.innerHTML = fileSize(size)
var filesElement = fileBox.querySelector('.files')
const filesElement = fileBox.querySelector('.files')
if (filesElement) {
var filesElementData = filesElement.dataset
const filesElementData = filesElement.dataset
var fileElements = filesElement.querySelectorAll('.file')
const fileElements = filesElement.querySelectorAll('.file')
if (fileElements) {
for (var fe = 0; fe < fileElements.length; fe++) {
for (let fe = 0; fe < fileElements.length; fe++) {
filesElement.removeChild(fileElements[fe])

@@ -185,8 +185,8 @@ }

if (files.length) {
var draggableFiles = !filesElementData.draggable || filesElementData.draggable.toLowerCase() !== 'false'
const draggableFiles = !filesElementData.draggable || filesElementData.draggable.toLowerCase() !== 'false'
for (var f = 0; f < files.length; f++) {
for (let f = 0; f < files.length; f++) {
(function (file, index) {
var typePrefix = file.type.split('/')[0]
var typeKey = file.type
let typePrefix = file.type.split('/')[0]
const typeKey = file.type
.replace(/[/+-](\w{1})/g, function (c) { return c.toUpperCase() })

@@ -197,15 +197,15 @@ .replace(/[/+-]/g, '')

var element = fileAttribute(filesElementData, 'element', typePrefix, typeKey)
let element = fileAttribute(filesElementData, 'element', typePrefix, typeKey)
element = element || filesElementData.element || 'span'
var content = fileAttribute(filesElementData, 'content', typePrefix, typeKey)
let content = fileAttribute(filesElementData, 'content', typePrefix, typeKey)
content = content || filesElementData.content || '{name}'
var contentBefore = fileAttribute(filesElementData, 'contentBefore', typePrefix, typeKey)
let contentBefore = fileAttribute(filesElementData, 'contentBefore', typePrefix, typeKey)
contentBefore = contentBefore || filesElementData.contentBefore || ''
var contentAfter = fileAttribute(filesElementData, 'contentAfter', typePrefix, typeKey)
let contentAfter = fileAttribute(filesElementData, 'contentAfter', typePrefix, typeKey)
contentAfter = contentAfter || filesElementData.contentAfter || ''
var url = fileAttribute(filesElementData, 'url', typePrefix, typeKey)
let url = fileAttribute(filesElementData, 'url', typePrefix, typeKey)

@@ -226,3 +226,3 @@ if (!url) {

var fileElement = document.createElement(element)
const fileElement = document.createElement(element)

@@ -238,3 +238,3 @@ fileElement.className = 'file'

var removeElement = fileElement.querySelector('.remove')
const removeElement = fileElement.querySelector('.remove')
if (removeElement) {

@@ -257,3 +257,3 @@ removeElement.addEventListener('click', function (e) { onFileRemoveClick(e, input, index) }, false)

var onDragEnter = function (e, fileBox, input) {
const onDragEnter = (e, fileBox, input) => {
e.preventDefault()

@@ -264,3 +264,3 @@ e.stopPropagation()

var onDragLeave = function (e, fileBox) {
const onDragLeave = (e, fileBox) => {
e.preventDefault()

@@ -271,3 +271,3 @@ e.stopPropagation()

var onDrop = function (e, fileBox, input) {
const onDrop = (e, fileBox, input) => {
e.preventDefault()

@@ -278,10 +278,10 @@ e.stopPropagation()

var files = e.dataTransfer.files
var oldFileBoxId = e.dataTransfer.getData('fileBoxId')
let files = e.dataTransfer.files
const oldFileBoxId = e.dataTransfer.getData('fileBoxId')
if (oldFileBoxId) {
var oldFileIndex = e.dataTransfer.getData('fileIndex')
var oldFileBox = document.getElementById(oldFileBoxId)
var oldInput = oldFileBox.querySelector('input')
var oldFileElement = oldFileBox.querySelector('.files').children[oldFileIndex]
const oldFileIndex = e.dataTransfer.getData('fileIndex')
const oldFileBox = document.getElementById(oldFileBoxId)
const oldInput = oldFileBox.querySelector('input')
const oldFileElement = oldFileBox.querySelector('.files').children[oldFileIndex]

@@ -297,6 +297,6 @@ oldFileBox.classList.remove('is-dragging')

var oldFilesArr = Array.from(oldInput.files)
var file = oldFilesArr[oldFileIndex]
var filesArr = Array.from(input.files)
var multiple = input.hasAttribute('multiple') && input.getAttribute('multiple').toLowerCase() !== 'false'
const oldFilesArr = Array.from(oldInput.files)
const file = oldFilesArr[oldFileIndex]
let filesArr = Array.from(input.files)
const multiple = input.hasAttribute('multiple') && input.getAttribute('multiple').toLowerCase() !== 'false'

@@ -325,11 +325,11 @@ if (multiple) {

var onFileDrag = function (e, fileBoxId) {
const onFileDrag = (e, fileBoxId) => {
e.preventDefault()
e.stopPropagation()
var overElement = document.elementFromPoint(e.pageX, e.pageY)
const overElement = document.elementFromPoint(e.pageX, e.pageY)
if (overElement) {
var fileBox = document.getElementById(fileBoxId)
var newFileBox = overElement.closest('[filebokz-id]')
const fileBox = document.getElementById(fileBoxId)
const newFileBox = overElement.closest('[filebokz-id]')

@@ -353,6 +353,6 @@ if (newFileBox && newFileBox.classList.contains('js-enabled')) {

var onFileDragStart = function (e, fileBoxId, index) {
const onFileDragStart = (e, fileBoxId, index) => {
e.target.classList.add('is-dragging')
var fileIndex = Array.from(e.target.parentNode.children).indexOf(e.target)
const fileIndex = Array.from(e.target.parentNode.children).indexOf(e.target)

@@ -363,3 +363,3 @@ e.dataTransfer.setData('fileBoxId', fileBoxId)

var onFileRemoveClick = function (e, input, index) {
const onFileRemoveClick = (e, input, index) => {
e.preventDefault()

@@ -370,8 +370,8 @@ e.stopPropagation()

var onFocus = function (e, fileBox) {
const onFocus = (e, fileBox) => {
fileBox.classList.add('in-focus')
}
var onReset = function (e, fileBox, input) {
var error = fileBox.querySelector('.error')
const onReset = (e, fileBox, input) => {
const error = fileBox.querySelector('.error')
if (error) error.innerHTML = ''

@@ -384,20 +384,20 @@

var onSubmit = function (e, fileBox) {
const onSubmit = (e, fileBox) => {
fileBox.classList.add('is-uploading')
}
var onWindowDragOver = function (e) {
const onWindowDragOver = (e) => {
e.preventDefault()
}
var onWindowDrop = function (e) {
const onWindowDrop = (e) => {
e.preventDefault()
e.stopImmediatePropagation()
var fileBoxId = e.dataTransfer.getData('fileBoxId')
const fileBoxId = e.dataTransfer.getData('fileBoxId')
if (fileBoxId) {
var fileBox = document.getElementById(fileBoxId)
var input = fileBox.querySelector('input')
var index = e.dataTransfer.getData('fileIndex')
const fileBox = document.getElementById(fileBoxId)
const input = fileBox.querySelector('input')
const index = e.dataTransfer.getData('fileIndex')

@@ -408,10 +408,10 @@ filebokz.removeFiles(input, index)

var validateFiles = function (fileList, fileBox, input) {
var fileBoxData = fileBox.dataset
var multiple = input.hasAttribute('multiple') && input.getAttribute('multiple').toLowerCase() !== 'false'
var maxFiles = !multiple ? 1 : fileBoxData.hasOwnProperty('maxFiles') ? fileBoxData.maxFiles : null
var maxFileSize = fileBoxData.maxFileSize
var maxSize = fileBoxData.maxSize
var allowedExtensions = fileBoxData.allowedExtensions ? fileBoxData.allowedExtensions.split(',') : null
var size = 0
const validateFiles = (fileList, fileBox, input) => {
const fileBoxData = fileBox.dataset
const multiple = input.hasAttribute('multiple') && input.getAttribute('multiple').toLowerCase() !== 'false'
const maxFiles = !multiple ? 1 : Object.prototype.hasOwnProperty.call(fileBoxData, 'maxFiles') ? fileBoxData.maxFiles : null
const maxFileSize = fileBoxData.maxFileSize
const maxSize = fileBoxData.maxSize
const allowedExtensions = fileBoxData.allowedExtensions ? fileBoxData.allowedExtensions.split(',') : null
let size = 0

@@ -423,4 +423,4 @@ if (maxFiles && fileList.length > maxFiles) {

for (var i = 0; i < fileList.length; i++) {
var ext = fileList[i].name.split('.')
for (let i = 0; i < fileList.length; i++) {
let ext = fileList[i].name.split('.')

@@ -454,8 +454,8 @@ if (ext) {

for (var i = 0; i < elements.length; i++) {
for (let i = 0; i < elements.length; i++) {
(function (fileBox) {
var form = fileBox.closest('form')
var input = fileBox.querySelector('input[type="file"]')
const form = fileBox.closest('form')
const input = fileBox.querySelector('input[type="file"]')
if (!input || fileBox.classList.contains('no-js') || fileBox.dataset.hasOwnProperty('filebokzId')) return
if (!input || fileBox.classList.contains('no-js') || Object.prototype.hasOwnProperty.call(fileBox.dataset, 'filebokzId')) return

@@ -500,4 +500,4 @@ filebokz.count++

filebokz.addFiles = function (input, files) {
var filesArr = Array.from(input.files)
filebokz.addFiles = (input, files) => {
const filesArr = Array.from(input.files)

@@ -510,4 +510,4 @@ filesArr.concat(Array.from(files))

filebokz.newFileList = function (files) {
var dt
filebokz.newFileList = (files) => {
let dt

@@ -520,3 +520,3 @@ try {

for (var i = 0; i < files.length; i++) {
for (let i = 0; i < files.length; i++) {
dt.items.add(files[i])

@@ -528,4 +528,4 @@ }

filebokz.removeFiles = function (input, index, count) {
var filesArr = Array.from(input.files)
filebokz.removeFiles = (input, index, count) => {
const filesArr = Array.from(input.files)

@@ -538,8 +538,8 @@ filesArr.splice(index || 0, count || 1)

filebokz.triggerEvent = function (type, element, data, delay) {
filebokz.triggerEvent = (type, element, data, delay) => {
return setTimeout(function () {
var e = new Event(type)
const e = new Event(type)
for (var key in data) {
if (data.hasOwnProperty(key)) e[key] = data[key]
for (const key in data) {
if (Object.prototype.hasOwnProperty.call(data, key)) e[key] = data[key]
}

@@ -550,1 +550,3 @@

}
export default filebokz

21

package.json
{
"name": "filebokz",
"version": "0.0.2",
"version": "0.1.0",
"description": "A tiny, dependency-free, highly customizable and configurable, easy to use file input with some pretty sweet features.",

@@ -31,15 +31,26 @@ "keywords": [

"homepage": "https://kodie.github.io/filebokz",
"main": "filebokz.js",
"license": "MIT",
"main": "dist/filebokz.js",
"module": "filebokz.js",
"scripts": {
"build": "npm run build-css && npm run build-js",
"build": "npm run build-css && npm run build-js && npm run minify-js",
"build-css": "cleancss --batch ./*.css --batch-suffix '.min' --output dist --debug --source-map",
"build-js": "uglifyjs filebokz.js --comments /^!/ --compress --mangle --output dist/filebokz.min.js --source-map \"url='filebokz.min.js.map'\" --verbose",
"build-js": "rollup --config rollup.config.js",
"minify-js": "uglifyjs dist/filebokz.js --comments /^!/ --compress --mangle --output dist/filebokz.min.js --source-map \"url='filebokz.min.js.map'\" --verbose",
"test": "standard --env browser"
},
"devDependencies": {
"@babel/preset-env": "^7.16.4",
"@rollup/plugin-babel": "^5.3.0",
"clean-css-cli": "^5.3.3",
"standard": "^11.0.1",
"core-js": "^3.19.2",
"rollup": "^2.60.2",
"standard": "^16.0.4",
"uglify-js": "^3.10.4"
},
"standard": {
"ignore": [
"/dist/*"
]
}
}

51

readme.md

@@ -45,24 +45,57 @@ # filebokz

## Usage
## Installation
Add the CSS:
### Manual Download
[Download the latest version of filebokz](https://github.com/kodie/minitaur/archive/refs/heads/main.zip) and then place the following HTML in your page's head element:
```html
<script type="text/javascript" src="dist/filebokz.min.js"></script>
<link rel="stylesheet" href="dist/filebokz.min.css" />
<!--Optional theme-->
<link rel="stylesheet" href="dist/filebokz-theme.min.css" />
```
and optionally the theme CSS:
### CDN (Courtesy of [jsDelivr](https://jsdelivr.com))
Place the following HTML in your page's head element (check to make sure the version in the URLs are the version you want):
```html
<link rel="stylesheet" href="dist/filebokz-theme.min.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/kodie/filebokz@0.0.2/dist/filebokz.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kodie/filebokz@0.0.2/dist/filebokz.min.css" />
<!--Optional theme-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kodie/filebokz@0.0.2/dist/filebokz-theme.min.css" />
```
and the JS:
```html
<script type="text/javascript" src="dist/filebokz.min.js"></script>
### [NPM](https://npmjs.com)
```
npm install filebokz --save
```
and your HTML:
### [GPM](https://github.com/itsahappymedium/gpm)
```
gpm install kodie/filebokz --save
```
### [Bower](https://bower.io)
```
bower install kodie/filebokz --save
```
## Usage
### Basic HTML Structure
```html

@@ -80,5 +113,3 @@ <div class="filebokz">

And then just use the function below:
### The `filebokz([elements], [applyClass])` Function

@@ -85,0 +116,0 @@ 

dist/filebokz-theme.min.css

Sorry, the diff of this file is not supported yet

dist/filebokz.min.css

Sorry, the diff of this file is not supported yet

dist/filebokz.min.js.map

Sorry, the diff of this file is not supported yet

filebokz-theme.css

Sorry, the diff of this file is not supported yet

filebokz.css

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc