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
         • 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
             • 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)
         • 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 —- == Notes == - ~~codedoc:xref:preloading~~ Pre-loading files * <code>[{ 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' } }]</code> - ~~codedoc:xref:ajaxpreload~~ /ajax/fileuploader.php - action:"preload" * <code> 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" </code>