You are here: start » javascript » plugins » fileuploader

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
javascript:plugins:fileuploader [2020-04-13 10:07] – adminjavascript:plugins:fileuploader [2023-10-26 20:08] (current) – external edit 127.0.0.1
Line 4: Line 4:
   * 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'':  +        * ''f.init'':  
-          * set p, language, merge options +          * set ''p'', language, merge options 
-          * ''n.beforeRenderer(parentEl p, inputEl s);'' //Callback fired before rendering the fileuploader elements, by returning false, you will prevent the rendering +          * ''**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.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>