FILELOADER

Kimera CSS is approaching its peak. We will build the last parts and prepare the work for major changes and new projects steps. These steps towards the future will necessarily drastic changes of this repo. We invite everyone to download and update the packs used to avoid finding themselves with no references on their sites and apps, ex: 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

FILE LOADER SYSTEM

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

This is a tipical one row structure for upload a single image:

<div class = "fileloader MY_LAYOUT_CLASS"
     data-settings = "[type:single, preview:true, converter:true]"
     data-compressor = "[image-quality:35, image-resolution:50x50]">

    <div class="display"><!--auto-populated--></div>

    <div class="button-file">
        <input type="file" size="0.5" maxsize="1.5" minlength="1" maxlength="1" accept="png, jpeg, jpg, webp"/>
        <label>Upload an image</label>
    </div>

</div>

This is a simple a super basic exemple for upload an element. Obviously it is not always so simple ... as the files are multiple things, in fact, need automatisms that simplify the process.

Another exemple but with multiple files an display result in a list:

<div class="fileloader"
     data-settings="[type:listed, sortable:true, converter:true, preview:true, titlelabel:true, metalabel:true, linked:true, deleter:true, grabber:true]"
     data-compressor="[image-quality:75, image-resolution:300x300]">

    <div class="display" style="height:50vw; max-height:25vh;">
    </div>

    <hr/>

    <div class="grid-x gap-10">

        <div class="box-[70-70-100]">

            <div class="button-file">
                <input type="file" multiple size="5120" maxsize="5120" minlength="1" maxlength="25" />
                <label>upload and refresh all files</label>
            </div>

        </div>

        <div class="box-[30-30-100]">

            <div class="button-sendnow">
                <a rel="nofollow">UPLOAD NOW</a>
            </div>

        </div>

    </div>

</div>

The logic is the same for wall and grid ... with the only difference that you have to say how many columns or which cut the boxes will have.

Having said how much 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.