https://innostudio.de/fileuploader/

• Flow (adapted by KGI to use bootstrap modal)
  • Adding files by clicking <div class="fileuploader-input"> or dragging files into it
    1. jquery.fileuploader.js:
       • s = input element, p = parent element, o = new input element, l = list element, sl = input elements, n = options, f = fileuploader
       • f.init:
         • set p, language, merge options
         • callback n.beforeRender(parentEl p, inputEl s); Callback fired before rendering the fileuploader elements, by returning false, you will prevent the rendering
         • f.redesign();
           • set theme, set new input html, hide standard input
           • f.thumbnails.create(); create thumbnails list
             • callback n.thumbnails.beforeShow(parentEl p, newInputEl o, inputEl s); Callback fired before adding the list element
             • create box (n.thumbnails.box)
             • bind item popup, start, retry, rotate, remove/cancel methods to the selector n.thumbnails._selectors.popup_open, .start, .retry, .rotate, .remove
           • set drag&drop container
         • if (n.files) { f.files.append(n.files); } append files from options (see pre-loading files)
         • callback n.afterRender(listEl l, parentEl p, newInputEl o, inputEl s); Callback fired after rendering the fileuploader elements
           • fotos.js.afterRender:
             • bind click to .fileuploader-input –> api.open()
             • bind dropdown buttons (.fileuploader-action-settings, .gallery-action-rename, .gallery-action-asmain)
         • f.bindUnbindEvents(true) bind all events (click input –> f.onEvent, drag&drop, clipboardPaste, sorter)
         • f.reset()
           • f.files.clear() clear files from the memory
             • n.onEmpty(listEl l, parentEl p, newInputEl o, inputEl s) Callback fired when fileuploader has no files
    2. $('body').on('show.bs.modal', '#modalFotos', …) after clicking the button to show modal for a specific album
       • ajax/fileuploader.php {action: 'preload', fotoalbum_id: fotoalbumId} (see below for details)
       • api.reset(); = f.reset (see above)
       • api.append(preload) (nop if no files in album yet)
    3. click .fileuploader-input –> api.open(); –> s.trigger('click'); –> f.onEvent('click') –> nop;
       • after selecting image: f.onEvent('change') –> f.onChange.call(this) [this=input.gallery_media]
       • f.onChange
         • callback n.beforeSelect(files, listEl l, parentEl p, newInputEl o, inputEl s) Callback fired after selecting the files from computer but only before processing them; by returning false, you will prevent the processing of the files but they will remain in the input
         • for each selected file {
           • item = f._itFl[f.files.add(file, 'choosed')] }
             • f.files.add: see below
               • creation of item
               • binding of item.remove, item.editor.rotate, item.editor.cropper, item.editor.save
               • return index –> item = f._itFl[index]
             • status = f.files.check(item, files, i == 0) ["type", "message", "do not show the warning message", "do not check the next files"]
               • check n.limit, n.maxSize
               • callback n.onFilesCheck(files, options n, listEl l, parentEl p, newInputEl o, inputEl s) Callback fired on checking for warnings the chosen ("choosed") files; by returning false, you will prevent the files from adding/upload
               • check n.extensions, n.disallowedExtensions, n.fileMaxSize, no remoteFile, no Folder
             • f.thumbnails.item(item)
               • generate item.icon
               • item.html = textParse(n.thumbnails.item)
               • item.progressBar = item.html.find('.fileuploader-progressbar')
               • item.html.addClass('file-type-format file-ext-extension') or file-type-no if no format; file-ext-no if no extension
               • Append or Prepend item to l
               • add item.popup
               • f.thumbnails.renderThumbnail(item) (arglist: item, forceRender, src)
                 • Only create for ['image', 'video', 'audio', 'astext'] and item.appended || n.thumbnails.startImageRenderer || forceRender
                 • f.files.read(item, function () { process(item.frame || (item.reader.node && item.reader.node.nodeName.toLowerCase() == 'img') ? item.reader.frame || item.reader.src : null, true); }, null, src, true);
                   • item.reader = { _FileReader: reader, _callbacks: [], read: item.reader.read }
                   • if (item.format == 'image' || hasThumb)
                     • define reader.onload and reader.onerror
                     • useFile == true –> reader.readAsDataURL(item.file) –> reader.onload()
                       • reader.onload:exif rotation f._assets.getExifOrientation(item.file, function (orientation) { if (orientation) { item.reader.exifOrientation = orientation; } loadNode(); });
                         • f._assets.getExifOrientation:

1. ~~codedoc:xref:preloading~~ Pre-loading files

   • [{
         name: 'file.txt', // file name
         size: 1024, // file size in bytes
         type: 'text/plain', // file MIME type
         file: 'uploads/file.txt', // file path
         local: '../uploads/file.txt', // file path in listInput (optional)
         data: {
             thumbnail: 'uploads/file_thumbnail.jpg', // item custom thumbnail; if false will disable the thumbnail (optional)
             readerCrossOrigin: 'anonymous', // fix image cross-origin issue (optional)
             readerForce: true, // prevent the browser cache of the image (optional)
             readerSkip: true, // skip file from reading by rendering a thumbnail (optional)
             popup: false, // remove the popup for this file (optional)
             listProps: {}, // custom key: value attributes in the fileuploader's list (optional)
             your_own_attribute: 'your own value'
         }
     }]

2. ~~codedoc:xref:ajaxpreload~~ /ajax/fileuploader.php - action:"preload"

   • response = array[
       name: "IMG_20200301_150420 (1).jpg"
       type: "image/jpeg"
       size: "821914"
       file: "/foto/albums/fotos/004/IMG_20200301_150420 (1).jpg"
       data:
        readerForce: true
        isMain: "0"
        headline: "Mercedes, Meldert, Stephan Vanfleteren,2004"
        description: null
        url: "/foto/albums/fotos/004/IMG_20200301_150420 (1).jpg"
        date: null
        width: "1920"
        height: "1483"
        size: "821914"
        size2: "803 KB"
        thumbnail: "/foto/albums/thumbs/004/IMG_20200301_150420 (1).jpg"
        thumbnail_width: "388"
        thumbnail_height: "300"
        thumbnail_size: "54363"
        thumbnail_size2: "53.1 KB"
        orig: "/foto/albums/origs/004/IMG_20200301_150420 (1).jpg"
        orig_width: "1920"
        orig_height: "1483"
        orig_size: "821856"
        orig_size2: "803 KB"
        listProps: {id: "1"}
        metadata:
          summary: {Headline: "Mercedes, Meldert, Stephan Vanfleteren,2004"}
          exif: {FileName: "IMG_20200301_150420 (1).jpg", FileDateTime: 1586764120, FileSize: 821914, FileType: 2, MimeType: "image/jpeg", …}
          iptc: {Headline: "Mercedes, Meldert, Stephan Vanfleteren,2004", Description: "Mercedes, Meldert, Stephan Vanfleteren,2004", Creator: "Kris Gielen", Location: "FOMU", City: "Antwerpen", …}
          regions: []
        format: "image"

3. ~~codedoc:xref:filesAddData~~ files.add() –> data

   • data = {
       name: "IMG_20200301_150420 (1).jpg"
       title: "IMG_20200301_150420 (1)"
       size: 821856
       size2: "803 KB"
       type: "image/jpeg"
       format: "image"
       extension: "jpg"
       data: {}
       file: File {name: "IMG_20200301_150420 (1).jpg", lastModified: 1586083807175, lastModifiedDate: Sun Apr 05 2020 12:50:07 GMT+0200 (Central European Summer Time), webkitRelativePath: "", size: 821856, …}
       reader: {read: ƒ}
       id: 1586790020907
       input: w.fn.init [input.gallery_media]
       html: null
       choosed: true
       appended: false
       uploaded: false
     };