FILELOADER
THIS REPOSITORY WILL BE UPDATED TO VERSION 2.8.X IN DAYS... PLEASE LEAVE THE MAXIMUM CONTENT POSSIBLE ON YOUR SITES AND DO NOT USE CDNs. THANK YOU
Kimera CSS is approaching its peak. Over the next 4 months we will build the last parts and prepare the work for major changes and new projects combined. These steps towards the future will necessarily involve: change of name, development agency, and obsolescence of all the static urls currently in use. It will be a profound transformation.
We invite everyone to download and update the packs used to avoid finding themselves with no references on their sites and apps. In summary "don't rely on cdn! They will probably be lost"
thank you all.
If you like this project, you would like to click on the ★ above the github page and follow us on the official fanpage: kimera framework
The file loader is an expansion of the system. Precisely a logical superstructure ui/js of button-files with drag and drop and file reader. Its purpose is to upload files to ui before uploading. The uploaded files are returned in object form and ready to pieces.
Let's start from the basics:
<div class = "fileloader"
data-settings = "[ my settings option ]"
data-compressor = "[ compression option ]">
<div class="display">
<!--visual ui output (ex: grid of image loaded) -->
<div>
<!-- the button file of framework-->
<div class="button-file">
<input type="file" options... />
<label>Load a file</label>
</div>
</div>
Being a superstructure it has no real constraints but presets ( You can find the practical behavior and examples of the various presets on the online [tester] ).
The system will automatically load everything that a javascript fileReader can read ... whether it looks like an image format or an unknown file... loaded in binary chunks. Remember, however, it will do all of this via client and not all devices hold large objects, especially if you have multiple files.
Speaking of single files or multiples ... this is the basis on which everything is divided ... let's analyze the types, you have a preset for...
Single File load:
- type:single
Multiple Files loads:
- type:listed
- type:grid
- type:wall
As you can already guess, the type will tell the system how to build the output inside the "display". other settings to be combined will be:
| settings | value | ... |
|---|---|---|
| preview | bool | have this file a preview box? |
| converter | bool | do you wont convert in mimetype? |
| deleter | bool | do you wont a delete icon for erese it? |
| titlelabel | bool | do you wont print/change the title of file? |
| metalabel | bool | do you wont print the weight and type of file? |
| previewicons | bool | do you wont print the preview icon? |
| linked | bool | do you wont print the blob of preview? |
| grabber | bool | do you wont print the drag icon? |
| sortable | bool | do you change order of files via drag |
| filters | bool | do you wont print an extra icon? (exemple, an icon for filter style intagram) |
| boxgap | Int | gap of box if grid |
| boxcut | 00-00-00 | cut of grid, if grid |
| wallcols | 00-00-00 | columns if is vertical grid |
| chunksize | 00000000 | quantity of bit for chunks (stay easy, it's not required) |
| customized | bool | do it have got customized buttons? |
Another settings is the integrated compression of images: "image-quality: 0 to 100%" and "image-resolution:NxN"
These two settings will ensure that the image will be calculated optimized both for quality and for maximum size H x W (example max-possibile-height: 300px per max-possibile-witdh: 300px)
Since the system will try to fix things based on the preset or, alternatively, send you the mistake you made in the console, it is better to go straight to practice.
All the practical examples that we will present from now on can be found on: online tests - html tester page
....................
You may be wondering how the system divides files, which ones are accepted and with which mimes.
Remember that, first of all, you decide the quantity, weights and types of extensions in the button-file, then, the system will divide things following this list ... or the binary ... or it will return an incompatible one.
Here is an excerpt from the script:
web gettable:
'svg'
'gif'
'mjpeg','bmp','jpg','jpeg','png','ico','webp','cur','jpe','jps','jfif'
'amb','aac','flac','m4a','m4r','mp3','oga','ogg','opus','wav'
'mp4','f4v','mpeg','m4v','mov','webm','ogv'
binary sound: '8svx','ac3','aiff','au','avr','caf','cdda','cvs','cvsd','cvu','dts','dvms','fap','fssd','gsrt','hcom','htk','ima','ircam','maud','mp2','nist','paf','prc','pvf','ra','sd2','sln','smp','snd','sndr','sndt','sou','sph','spx','tta','txw','vms','voc','vox','w64','wma','wv','wve',
binary media : 'ai','dds','eps','exr','fts','hdr','mng','pam','pbm','pcd','pcx','pfm','pgm','picon','pict','pnm','ppm','psd','ras','sfw','sgi','tga','tiff','tif','wbmp','wpg','x3f','xbm','xdf','xwd','xcf','xpm','cr2','dng','erf','heic','heif','jp2','nef','nrw','orf','pef','pes','raf','rw2'
binary video : '3gp','asf','avi','flv','hevc','m2ts','m2v','mkv','mpg','mts','mxf','swf','ts','vob','wmv','wtv'
//compatibility return:
if(!fileextension) { typed = 'binary-file'; mime = 'not-web-compatible'; }
else if (issvg) { typed = 'web-xmlsvg'; mime = 'image/svg+xml'; }
else if (isgif) { typed = 'web-gif'; mime = 'image/gif'; }
else if (isimage) { typed = 'web-image'; mime = (fileextension=='image/ico') ? 'x-icon' : 'image/png'; }
else if (issound) { typed = 'web-audio'; mime = 'audio/mpeg'; }
else if (isvideo) { typed = 'web-video'; mime = 'video/mp4'; }
else if (isbinaryimage) { typed = 'not-web-image'; mime = 'not-web-compatible'; }
else if (isbinarysound) { typed = 'not-web-audio'; mime = 'not-web-compatible'; }
else if (isbinaryvideo) { typed = 'not-web-video'; mime = 'not-web-compatible'; }
else /*(isfiles)*/ { typed = 'binary-file'; mime = 'not-web-compatible'; }
All this can be found by extrapolating the data from the UI object.
Here is an example of how to do this from the online demo:
window.onload = () =>
{
document.getElementById('testvalues').onclick = () => print_ui();
document.getElementById('testvaluesvialog').onclick = () => logvalue();
function logvalue()
{
console.log("ui.loaderslist : ",ui.loaderslist);
}
function print_ui()
{
let printer = document.querySelectorAll('#printer')[0];
printer.innerHTML = 'Wait/Refresh....';
setTimeout(()=>{
printer.innerText = JSON.stringify(ui.loaderslist,null,2);
},500)
}
}
ui.loaderslist is list of all file loader in the page.