| Next revision | Previous revision |
| javascript:plugins:fileuploader [2020-04-13 10:01] – created admin | javascript:plugins:fileuploader [2023-10-26 20:08] (current) – external edit 127.0.0.1 |
|---|
| * Flow (adapted by KGI to use bootstrap modal) | * Flow (adapted by KGI to use bootstrap modal) |
| * Adding files by clicking ''<div class="fileuploader-input">'' or dragging files into it | * Adding files by clicking ''<div class="fileuploader-input">'' or dragging files into it |
| * ''jquery.fileuploader.js'': | - ''jquery.fileuploader.js'': |
| * s = //input element//, p = //parent element//, o = //new input element//, l = //list element//, sl = //input elements//, n = //options//, f = //fileuploader// | * 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 |
| | * <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> |
| | - ~~codedoc:xref:filesAddData~~ ''files.add() --> data'' |
| | * <code> |
| | 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 |
| | }; |
| | </code> |
| |