==== Javascript plugins ==== === fileuploader === https://innostudio.de/fileuploader/ * Flow (adapted by KGI to use bootstrap modal) * Adding files by clicking ''
'' or dragging files into it - ''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 [[#preloading|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// - ''**$('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 [[#ajaxpreload|below]] for details)// * ''api.reset();'' = ''f.reset'' (see above) * ''api.append(preload)'' //(nop if no files in album yet)// - 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 [[#filesAddData|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'': ---- == Notes == - ~~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' } }] - ~~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" - ~~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 };