├── fancy-file-uploader ├── fancy_okay.png ├── fancy_remove.png ├── fancy_upload.png ├── fancy_webcam.png ├── fancy_microphone.png ├── lang │ ├── de.js │ └── fr.js ├── cors │ ├── jquery.xdr-transport.js │ └── jquery.postmessage-transport.js ├── jquery.iframe-transport.js ├── fancy_fileupload.css ├── jquery.ui.widget.js ├── jquery.fancy-fileupload.js └── jquery.fileupload.js ├── server-side-helpers ├── lang │ ├── de.php │ └── fr.php └── fancy_file_uploader_helper.php └── README.md /fancy-file-uploader/fancy_okay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cubiclesoft/jquery-fancyfileuploader/master/fancy-file-uploader/fancy_okay.png -------------------------------------------------------------------------------- /fancy-file-uploader/fancy_remove.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cubiclesoft/jquery-fancyfileuploader/master/fancy-file-uploader/fancy_remove.png -------------------------------------------------------------------------------- /fancy-file-uploader/fancy_upload.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cubiclesoft/jquery-fancyfileuploader/master/fancy-file-uploader/fancy_upload.png -------------------------------------------------------------------------------- /fancy-file-uploader/fancy_webcam.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cubiclesoft/jquery-fancyfileuploader/master/fancy-file-uploader/fancy_webcam.png -------------------------------------------------------------------------------- /fancy-file-uploader/fancy_microphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cubiclesoft/jquery-fancyfileuploader/master/fancy-file-uploader/fancy_microphone.png -------------------------------------------------------------------------------- /server-side-helpers/lang/de.php: -------------------------------------------------------------------------------- 1 | 9 | "Die hochgeladene Datei ist größer als 'upload_max_filesize' in der 'php.ini'.", 10 | 11 | "The uploaded file exceeds the 'MAX_FILE_SIZE' directive that was specified in the submitted form." => 12 | "Die hochgeladene Datei ist größer als 'MAX_FILE_SIZE' im Formular.", 13 | 14 | "The uploaded file was only partially uploaded." => 15 | "Die Datei wurde nur teilweise hochgeladen.", 16 | 17 | "No file was uploaded." => 18 | "Es wurde keine Datei hochgeladen.", 19 | 20 | "The configured temporary folder on the server is missing." => 21 | "Der temporäre Ordner auf dem LoxBerry ist nicht vorhanden.", 22 | 23 | "Unable to write the temporary file to disk. The server is out of disk space, incorrectly configured, or experiencing hardware issues." => 24 | "Kann die temporäre Datei nicht schreiben. Entweder ist Speicherplatz voll oder das Speichermedium defekt.", 25 | 26 | "A PHP extension stopped the upload." => 27 | "Keine PHP Erweiterung stoppte das Hochladen.", 28 | 29 | "An unknown error occurred." => 30 | "Ein unbekannter Fehler ist aufgetreten.", 31 | 32 | "The specified input filename was not uploaded to this server." => 33 | "Der angegebene Dateiname wurde nicht auf diesen Server hochgeladen.", 34 | 35 | "File data was submitted but is missing." => 36 | "Dateiinformationen wurden gesendet aber es fehlen Angaben.", 37 | 38 | "Invalid file extension. Must be one of %s." => 39 | "Ungültige Dateiendung. Es muss eine von diesen sein %s.", 40 | 41 | "The server did not set a valid filename." => 42 | "Der Server hat keinen gültigen Dateinamen gesendet.", 43 | 44 | "The server file size limit was exceeded." => 45 | "Die Server Dateigrößenbeschränkung wurde überschritten.", 46 | 47 | "Unable to open a required file for writing." => 48 | "Kann eine benötigte Datei nicht für den Schreibzugriff öffnen.", 49 | 50 | "Unable to open a required file for reading." => 51 | "Kann eine benötigte Datei nicht für den Lesezugriff öffnen." 52 | ); 53 | ?> -------------------------------------------------------------------------------- /server-side-helpers/lang/fr.php: -------------------------------------------------------------------------------- 1 | 9 | "Le poids du fichier dépasse la directive 'upload_max_filesize' dans 'php.ini'.", 10 | 11 | "The uploaded file exceeds the 'MAX_FILE_SIZE' directive that was specified in the submitted form." => 12 | "Le poids du fichier dépasse la directive 'MAX_FILE_SIZE' spécifiée dans le formulaire.", 13 | 14 | "The uploaded file was only partially uploaded." => 15 | "Le fichier n'a été que partiellement transféré.", 16 | 17 | "No file was uploaded." => 18 | "Aucun fichier n'a été transféré.", 19 | 20 | "The configured temporary folder on the server is missing." => 21 | "Le dossier temporaire configuré sur le serveur n'existe pas.", 22 | 23 | "Unable to write the temporary file to disk. The server is out of disk space, incorrectly configured, or experiencing hardware issues." => 24 | "Impossible d'écrire le fichier temporaire sur le disque. Le serveur manque d'espace disque ou rencontre des problèmes techniques.", 25 | 26 | "A PHP extension stopped the upload." => 27 | "Une extension PHP a arrêté le transfert.", 28 | 29 | "An unknown error occurred." => 30 | "Une erreur inconnue est survenue.", 31 | 32 | "The specified input filename was not uploaded to this server." => 33 | "Le nom de fichier spécifié n'a pu être transmis au serveur.", 34 | 35 | "File data was submitted but is missing." => 36 | "Les données du fichier ont été transférées mais le fichier est manquant.", 37 | 38 | "Invalid file extension. Must be one of %s." => 39 | "Extension de fichier invalide. Les extensions acceptées sont : %s.", 40 | 41 | "The server did not set a valid filename." => 42 | "Le serveur n'a pas retourné un nom de fichier valide.", 43 | 44 | "The server file size limit was exceeded." => 45 | "La limite de poids de fichier définie sur le serveur a été dépassée.", 46 | 47 | "Unable to open a required file for writing." => 48 | "Impossible d'ouvrir un fichier requis pour l'écriture.", 49 | 50 | "Unable to open a required file for reading." => 51 | "Impossible d'ouvrir un fichier requis pour la lecture." 52 | ); 53 | ?> -------------------------------------------------------------------------------- /fancy-file-uploader/lang/de.js: -------------------------------------------------------------------------------- 1 | // German translation provided courtesy of GitHub user Woersty. 2 | // (C) 2021 CubicleSoft. All Rights Reserved. 3 | 4 | if (!$.fn.FancyFileUpload.langs) $.fn.FancyFileUpload.langs = {}; 5 | 6 | $.fn.FancyFileUpload.langs['de'] = { 7 | 'Start uploading': 8 | 'Starte Hochladen', 9 | 10 | 'Starting upload...': 11 | 'Hochladen gestartet...', 12 | 13 | 'Upload completed': 14 | 'Hochladen erfolgreich', 15 | 16 | 'There is a file upload still in progress. Leaving the page will cancel the upload.\n\nAre you sure you want to leave this page?': 17 | 'Es wird gerade eine Datei hochgeladen. Das Verlassen der Seite bricht das Hochladen ab.\n\nBist du sicher, dass du gehen willst?', 18 | 19 | 'There is a file that was added to the queue but the upload has not been started. Leaving the page will clear the queue and not upload the file.\n\nAre you sure you want to leave this page?': 20 | 'Es wurde eine Datei zur Warteschlange hinzugefügt aber noch nicht hochgeladen. Das Verlassen der Seite leert die Warteschlange und die Datei wird nicht hochgeladen.\n\nBist du sicher, dass du gehen willst?', 21 | 22 | 'Cancel upload and remove from list': 23 | 'Breche Hochladen ab und entferne Datei aus der Liste.', 24 | 25 | 'This file is currently being uploaded.\n\nStop the upload and remove the file from the list?': 26 | 'Die Datei wird gerade hochgeladen.\n\nHochladen stoppen und Datei aus der Liste entfernen?', 27 | 28 | 'This file is waiting to start.\n\nCancel the operation and remove the file from the list?': 29 | 'Die Datei wartet auf ihren Start.\n\nOperation abbrechen und Datei aus der Liste entfernen?', 30 | 31 | 'Preview': 32 | 'Vorschau', 33 | 34 | 'No preview available': 35 | 'Keine Vorschau verfügbar', 36 | 37 | 'Invalid file extension.': 38 | 'Ungültige Dateiendung.', 39 | 40 | 'File is too large. Maximum file size is {0}.': 41 | 'Datei zu groß. Die maximal erlaubte Größe ist {0}.', 42 | 43 | 'Remove from list': 44 | 'Aus der Liste entfernen', 45 | 46 | '{0} of {1} | {2}%': 47 | '{0} von {1} | {2}%', 48 | 49 | '{0} | Network error, retrying in a moment... ({1})': 50 | '{0} | Netzwerkfehler, ich versuche es gleich nochmal... ({1})', 51 | 52 | 'The upload was cancelled.': 53 | 'Das Hochladen wurde abgebrochen.', 54 | 55 | 'The upload failed. {0} ({1})': 56 | 'Das Hochladen ist fehlgeschlagen. {0} ({1})', 57 | 58 | 'The upload failed.': 59 | 'Das Hochladen ist fehlgeschlagen.', 60 | 61 | 'The server indicated that the upload was not successful. No additional information available.': 62 | 'Der Server meldet, dass das Hochladen fehlgeschlagen ist. Keine weiteren Details bekannt.', 63 | 64 | 'Browse, drag-and-drop, or paste files to upload': 65 | 'Durchsuchen, Drag & Drop oder Einfügen zum Hochladen', 66 | 67 | 'Record audio using a microphone': 68 | 'Ton aufnehmen (Mikro)', 69 | 70 | 'Audio recording - {0}.mp3': 71 | 'Tonaufnahme - {0}.mp3', 72 | 73 | 'Unable to record audio. Either a microphone was not found or access was denied.': 74 | 'Kann keine Tonaufnahme machen. Kein Mikrofon oder keinen Zugriff darauf.', 75 | 76 | 'Record video using a camera': 77 | 'Video aufnehmen (Kamera)', 78 | 79 | 'Video recording - {0}.mp4': 80 | 'Videoaufnahme - {0}.mp4', 81 | 82 | 'Unable to record video. Either a camera was not found or access was denied.': 83 | 'Kann keine Videoaufnahme machen. Keine Kamera oder keinen Zugriff darauf.' 84 | }; 85 | 86 | $.fn.FancyFileUpload.defaults.langmap = $.fn.FancyFileUpload.langs['de']; 87 | -------------------------------------------------------------------------------- /fancy-file-uploader/lang/fr.js: -------------------------------------------------------------------------------- 1 | // French translation provided courtesy of GitHub user tuxfamily. 2 | // (C) 2022 CubicleSoft. All Rights Reserved. 3 | 4 | if (!$.fn.FancyFileUpload.langs) $.fn.FancyFileUpload.langs = {}; 5 | 6 | $.fn.FancyFileUpload.langs['fr'] = { 7 | 'Start uploading': 8 | 'Démarrer le transfert', 9 | 10 | 'Starting upload...': 11 | 'Démarrage du transfert...', 12 | 13 | 'Upload completed': 14 | 'Transfert terminé', 15 | 16 | 'There is a file upload still in progress. Leaving the page will cancel the upload.\n\nAre you sure you want to leave this page?': 17 | 'Un transfert de fichier est toujours en cours. Si vous quittez la page, il sera annulé.\n\nVoulez-vous vraiment quitter cette page ?', 18 | 19 | 'There is a file that was added to the queue but the upload has not been started. Leaving the page will clear the queue and not upload the file.\n\nAre you sure you want to leave this page?': 20 | 'Un fichier a été ajouté à la file d\'attente, mais le transfert n\'a pas démarré. Quitter la page effacera la file d\'attente et ne téléversera pas le fichier.\n\nVoulez- vous vraiment quitter cette page ?', 21 | 22 | 'Cancel upload and remove from list': 23 | 'Annuler le transfert et le supprimer de la liste', 24 | 25 | 'This file is currently being uploaded.\n\nStop the upload and remove the file from the list?': 26 | 'Ce fichier est en cours de transfert.\n\nArrêter le transfert et supprimer le fichier de la liste ?', 27 | 28 | 'This file is waiting to start.\n\nCancel the operation and remove the file from the list?': 29 | 'Ce fichier est en attente de transfert.\n\nAnnuler l\'opération et supprimer le fichier de la liste ?', 30 | 31 | 'Preview': 32 | 'Aperçu', 33 | 34 | 'No preview available': 35 | 'Aucun aperçu disponible', 36 | 37 | 'Invalid file extension.': 38 | 'Extension de fichier invalide.', 39 | 40 | 'File is too large. Maximum file size is {0}.': 41 | 'Fichier trop volumineux. Le poids maximum acceptée est de {0}.', 42 | 43 | 'Remove from list': 44 | 'Retirer de la liste', 45 | 46 | '{0} of {1} | {2}%': 47 | '{0} sur {1} | {2}%', 48 | 49 | '{0} | Network error, retrying in a moment... ({1})': 50 | '{0} | Erreur réseau, nouvelle tentative dans un instant... ({1})', 51 | 52 | 'The upload was cancelled.': 53 | 'Le transfert a été annulé.', 54 | 55 | 'The upload failed. {0} ({1})': 56 | 'Le transfert a échoué. {0} ({1})', 57 | 58 | 'The upload failed.': 59 | 'Le transfert a échoué.', 60 | 61 | 'The server indicated that the upload was not successful. No additional information available.': 62 | 'Le serveur a indiqué que le transfert a échoué sans donner d\'informations supplémentaires.', 63 | 64 | 'Browse, drag-and-drop, or paste files to upload': 65 | 'Parcourir, glisser-déposer ou coller des fichiers à transférer', 66 | 67 | 'Record audio using a microphone': 68 | 'Enregistrer de l\'audio à l\'aide d\'un microphone', 69 | 70 | 'Audio recording - {0}.mp3': 71 | 'Enregistrement audio - {0}.mp3', 72 | 73 | 'Unable to record audio. Either a microphone was not found or access was denied.': 74 | 'Impossible d\'enregistrer le son. Soit le microphone n\'a pas été trouvé, soit son accès a été refusé.', 75 | 76 | 'Record video using a camera': 77 | 'Enregistrer une vidéo à l\'aide d\'une caméra', 78 | 79 | 'Video recording - {0}.mp4': 80 | 'Enregistrement vidéo - {0}.mp4', 81 | 82 | 'Unable to record video. Either a camera was not found or access was denied.': 83 | 'Impossible d\'enregistrer la vidéo. Soit la caméra n\'a pas été trouvée, soit son accès a été refusé.' 84 | }; 85 | 86 | $.fn.FancyFileUpload.defaults.langmap = $.fn.FancyFileUpload.langs['fr']; 87 | -------------------------------------------------------------------------------- /fancy-file-uploader/cors/jquery.xdr-transport.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery XDomainRequest Transport Plugin 3 | * https://github.com/blueimp/jQuery-File-Upload 4 | * 5 | * Copyright 2011, Sebastian Tschan 6 | * https://blueimp.net 7 | * 8 | * Licensed under the MIT license: 9 | * https://opensource.org/licenses/MIT 10 | * 11 | * Based on Julian Aubourg's ajaxHooks xdr.js: 12 | * https://github.com/jaubourg/ajaxHooks/ 13 | */ 14 | 15 | /* global define, require, window, XDomainRequest */ 16 | 17 | ;(function (factory) { 18 | 'use strict'; 19 | if (typeof define === 'function' && define.amd) { 20 | // Register as an anonymous AMD module: 21 | define(['jquery'], factory); 22 | } else if (typeof exports === 'object') { 23 | // Node/CommonJS: 24 | factory(require('jquery')); 25 | } else { 26 | // Browser globals: 27 | factory(window.jQuery); 28 | } 29 | }(function ($) { 30 | 'use strict'; 31 | if (window.XDomainRequest && !$.support.cors) { 32 | $.ajaxTransport(function (s) { 33 | if (s.crossDomain && s.async) { 34 | if (s.timeout) { 35 | s.xdrTimeout = s.timeout; 36 | delete s.timeout; 37 | } 38 | var xdr; 39 | return { 40 | send: function (headers, completeCallback) { 41 | var addParamChar = /\?/.test(s.url) ? '&' : '?'; 42 | function callback(status, statusText, responses, responseHeaders) { 43 | xdr.onload = xdr.onerror = xdr.ontimeout = $.noop; 44 | xdr = null; 45 | completeCallback(status, statusText, responses, responseHeaders); 46 | } 47 | xdr = new XDomainRequest(); 48 | // XDomainRequest only supports GET and POST: 49 | if (s.type === 'DELETE') { 50 | s.url = s.url + addParamChar + '_method=DELETE'; 51 | s.type = 'POST'; 52 | } else if (s.type === 'PUT') { 53 | s.url = s.url + addParamChar + '_method=PUT'; 54 | s.type = 'POST'; 55 | } else if (s.type === 'PATCH') { 56 | s.url = s.url + addParamChar + '_method=PATCH'; 57 | s.type = 'POST'; 58 | } 59 | xdr.open(s.type, s.url); 60 | xdr.onload = function () { 61 | callback( 62 | 200, 63 | 'OK', 64 | {text: xdr.responseText}, 65 | 'Content-Type: ' + xdr.contentType 66 | ); 67 | }; 68 | xdr.onerror = function () { 69 | callback(404, 'Not Found'); 70 | }; 71 | if (s.xdrTimeout) { 72 | xdr.ontimeout = function () { 73 | callback(0, 'timeout'); 74 | }; 75 | xdr.timeout = s.xdrTimeout; 76 | } 77 | xdr.send((s.hasContent && s.data) || null); 78 | }, 79 | abort: function () { 80 | if (xdr) { 81 | xdr.onerror = $.noop(); 82 | xdr.abort(); 83 | } 84 | } 85 | }; 86 | } 87 | }); 88 | } 89 | })); 90 | -------------------------------------------------------------------------------- /fancy-file-uploader/cors/jquery.postmessage-transport.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery postMessage Transport Plugin 3 | * https://github.com/blueimp/jQuery-File-Upload 4 | * 5 | * Copyright 2011, Sebastian Tschan 6 | * https://blueimp.net 7 | * 8 | * Licensed under the MIT license: 9 | * https://opensource.org/licenses/MIT 10 | */ 11 | 12 | /* global define, require, window, document */ 13 | 14 | ;(function (factory) { 15 | 'use strict'; 16 | if (typeof define === 'function' && define.amd) { 17 | // Register as an anonymous AMD module: 18 | define(['jquery'], factory); 19 | } else if (typeof exports === 'object') { 20 | // Node/CommonJS: 21 | factory(require('jquery')); 22 | } else { 23 | // Browser globals: 24 | factory(window.jQuery); 25 | } 26 | }(function ($) { 27 | 'use strict'; 28 | 29 | var counter = 0, 30 | names = [ 31 | 'accepts', 32 | 'cache', 33 | 'contents', 34 | 'contentType', 35 | 'crossDomain', 36 | 'data', 37 | 'dataType', 38 | 'headers', 39 | 'ifModified', 40 | 'mimeType', 41 | 'password', 42 | 'processData', 43 | 'timeout', 44 | 'traditional', 45 | 'type', 46 | 'url', 47 | 'username' 48 | ], 49 | convert = function (p) { 50 | return p; 51 | }; 52 | 53 | $.ajaxSetup({ 54 | converters: { 55 | 'postmessage text': convert, 56 | 'postmessage json': convert, 57 | 'postmessage html': convert 58 | } 59 | }); 60 | 61 | $.ajaxTransport('postmessage', function (options) { 62 | if (options.postMessage && window.postMessage) { 63 | var iframe, 64 | loc = $('').prop('href', options.postMessage)[0], 65 | target = loc.protocol + '//' + loc.host, 66 | xhrUpload = options.xhr().upload; 67 | // IE always includes the port for the host property of a link 68 | // element, but not in the location.host or origin property for the 69 | // default http port 80 and https port 443, so we strip it: 70 | if (/^(http:\/\/.+:80)|(https:\/\/.+:443)$/.test(target)) { 71 | target = target.replace(/:(80|443)$/, ''); 72 | } 73 | return { 74 | send: function (_, completeCallback) { 75 | counter += 1; 76 | var message = { 77 | id: 'postmessage-transport-' + counter 78 | }, 79 | eventName = 'message.' + message.id; 80 | iframe = $( 81 | '' 84 | ).bind('load', function () { 85 | $.each(names, function (i, name) { 86 | message[name] = options[name]; 87 | }); 88 | message.dataType = message.dataType.replace('postmessage ', ''); 89 | $(window).bind(eventName, function (e) { 90 | e = e.originalEvent; 91 | var data = e.data, 92 | ev; 93 | if (e.origin === target && data.id === message.id) { 94 | if (data.type === 'progress') { 95 | ev = document.createEvent('Event'); 96 | ev.initEvent(data.type, false, true); 97 | $.extend(ev, data); 98 | xhrUpload.dispatchEvent(ev); 99 | } else { 100 | completeCallback( 101 | data.status, 102 | data.statusText, 103 | {postmessage: data.result}, 104 | data.headers 105 | ); 106 | iframe.remove(); 107 | $(window).unbind(eventName); 108 | } 109 | } 110 | }); 111 | iframe[0].contentWindow.postMessage( 112 | message, 113 | target 114 | ); 115 | }).appendTo(document.body); 116 | }, 117 | abort: function () { 118 | if (iframe) { 119 | iframe.remove(); 120 | } 121 | } 122 | }; 123 | } 124 | }); 125 | 126 | })); 127 | -------------------------------------------------------------------------------- /fancy-file-uploader/jquery.iframe-transport.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery Iframe Transport Plugin 3 | * https://github.com/blueimp/jQuery-File-Upload 4 | * 5 | * Copyright 2011, Sebastian Tschan 6 | * https://blueimp.net 7 | * 8 | * Licensed under the MIT license: 9 | * https://opensource.org/licenses/MIT 10 | */ 11 | 12 | /* global define, require */ 13 | 14 | (function (factory) { 15 | 'use strict'; 16 | if (typeof define === 'function' && define.amd) { 17 | // Register as an anonymous AMD module: 18 | define(['jquery'], factory); 19 | } else if (typeof exports === 'object') { 20 | // Node/CommonJS: 21 | factory(require('jquery')); 22 | } else { 23 | // Browser globals: 24 | factory(window.jQuery); 25 | } 26 | })(function ($) { 27 | 'use strict'; 28 | 29 | // Helper variable to create unique names for the transport iframes: 30 | var counter = 0, 31 | jsonAPI = $, 32 | jsonParse = 'parseJSON'; 33 | 34 | if ('JSON' in window && 'parse' in JSON) { 35 | jsonAPI = JSON; 36 | jsonParse = 'parse'; 37 | } 38 | 39 | // The iframe transport accepts four additional options: 40 | // options.fileInput: a jQuery collection of file input fields 41 | // options.paramName: the parameter name for the file form data, 42 | // overrides the name property of the file input field(s), 43 | // can be a string or an array of strings. 44 | // options.formData: an array of objects with name and value properties, 45 | // equivalent to the return data of .serializeArray(), e.g.: 46 | // [{name: 'a', value: 1}, {name: 'b', value: 2}] 47 | // options.initialIframeSrc: the URL of the initial iframe src, 48 | // by default set to "javascript:false;" 49 | $.ajaxTransport('iframe', function (options) { 50 | if (options.async) { 51 | // javascript:false as initial iframe src 52 | // prevents warning popups on HTTPS in IE6: 53 | // eslint-disable-next-line no-script-url 54 | var initialIframeSrc = options.initialIframeSrc || 'javascript:false;', 55 | form, 56 | iframe, 57 | addParamChar; 58 | return { 59 | send: function (_, completeCallback) { 60 | form = $('
'); 61 | form.attr('accept-charset', options.formAcceptCharset); 62 | addParamChar = /\?/.test(options.url) ? '&' : '?'; 63 | // XDomainRequest only supports GET and POST: 64 | if (options.type === 'DELETE') { 65 | options.url = options.url + addParamChar + '_method=DELETE'; 66 | options.type = 'POST'; 67 | } else if (options.type === 'PUT') { 68 | options.url = options.url + addParamChar + '_method=PUT'; 69 | options.type = 'POST'; 70 | } else if (options.type === 'PATCH') { 71 | options.url = options.url + addParamChar + '_method=PATCH'; 72 | options.type = 'POST'; 73 | } 74 | // IE versions below IE8 cannot set the name property of 75 | // elements that have already been added to the DOM, 76 | // so we set the name along with the iframe HTML markup: 77 | counter += 1; 78 | iframe = $( 79 | '' 84 | ).on('load', function () { 85 | var fileInputClones, 86 | paramNames = $.isArray(options.paramName) 87 | ? options.paramName 88 | : [options.paramName]; 89 | iframe.off('load').on('load', function () { 90 | var response; 91 | // Wrap in a try/catch block to catch exceptions thrown 92 | // when trying to access cross-domain iframe contents: 93 | try { 94 | response = iframe.contents(); 95 | // Google Chrome and Firefox do not throw an 96 | // exception when calling iframe.contents() on 97 | // cross-domain requests, so we unify the response: 98 | if (!response.length || !response[0].firstChild) { 99 | throw new Error(); 100 | } 101 | } catch (e) { 102 | response = undefined; 103 | } 104 | // The complete callback returns the 105 | // iframe content document as response object: 106 | completeCallback(200, 'success', { iframe: response }); 107 | // Fix for IE endless progress bar activity bug 108 | // (happens on form submits to iframe targets): 109 | $('').appendTo( 110 | form 111 | ); 112 | window.setTimeout(function () { 113 | // Removing the form in a setTimeout call 114 | // allows Chrome's developer tools to display 115 | // the response result 116 | form.remove(); 117 | }, 0); 118 | }); 119 | form 120 | .prop('target', iframe.prop('name')) 121 | .prop('action', options.url) 122 | .prop('method', options.type); 123 | if (options.formData) { 124 | $.each(options.formData, function (index, field) { 125 | $('') 126 | .prop('name', field.name) 127 | .val(field.value) 128 | .appendTo(form); 129 | }); 130 | } 131 | if ( 132 | options.fileInput && 133 | options.fileInput.length && 134 | options.type === 'POST' 135 | ) { 136 | fileInputClones = options.fileInput.clone(); 137 | // Insert a clone for each file input field: 138 | options.fileInput.after(function (index) { 139 | return fileInputClones[index]; 140 | }); 141 | if (options.paramName) { 142 | options.fileInput.each(function (index) { 143 | $(this).prop('name', paramNames[index] || options.paramName); 144 | }); 145 | } 146 | // Appending the file input fields to the hidden form 147 | // removes them from their original location: 148 | form 149 | .append(options.fileInput) 150 | .prop('enctype', 'multipart/form-data') 151 | // enctype must be set as encoding for IE: 152 | .prop('encoding', 'multipart/form-data'); 153 | // Remove the HTML5 form attribute from the input(s): 154 | options.fileInput.removeAttr('form'); 155 | } 156 | form.submit(); 157 | // Insert the file input fields at their original location 158 | // by replacing the clones with the originals: 159 | if (fileInputClones && fileInputClones.length) { 160 | options.fileInput.each(function (index, input) { 161 | var clone = $(fileInputClones[index]); 162 | // Restore the original name and form properties: 163 | $(input) 164 | .prop('name', clone.prop('name')) 165 | .attr('form', clone.attr('form')); 166 | clone.replaceWith(input); 167 | }); 168 | } 169 | }); 170 | form.append(iframe).appendTo(document.body); 171 | }, 172 | abort: function () { 173 | if (iframe) { 174 | // javascript:false as iframe src aborts the request 175 | // and prevents warning popups on HTTPS in IE6. 176 | iframe.off('load').prop('src', initialIframeSrc); 177 | } 178 | if (form) { 179 | form.remove(); 180 | } 181 | } 182 | }; 183 | } 184 | }); 185 | 186 | // The iframe transport returns the iframe content document as response. 187 | // The following adds converters from iframe to text, json, html, xml 188 | // and script. 189 | // Please note that the Content-Type for JSON responses has to be text/plain 190 | // or text/html, if the browser doesn't include application/json in the 191 | // Accept header, else IE will show a download dialog. 192 | // The Content-Type for XML responses on the other hand has to be always 193 | // application/xml or text/xml, so IE properly parses the XML response. 194 | // See also 195 | // https://github.com/blueimp/jQuery-File-Upload/wiki/Setup#content-type-negotiation 196 | $.ajaxSetup({ 197 | converters: { 198 | 'iframe text': function (iframe) { 199 | return iframe && $(iframe[0].body).text(); 200 | }, 201 | 'iframe json': function (iframe) { 202 | return iframe && jsonAPI[jsonParse]($(iframe[0].body).text()); 203 | }, 204 | 'iframe html': function (iframe) { 205 | return iframe && $(iframe[0].body).html(); 206 | }, 207 | 'iframe xml': function (iframe) { 208 | var xmlDoc = iframe && iframe[0]; 209 | return xmlDoc && $.isXMLDoc(xmlDoc) 210 | ? xmlDoc 211 | : $.parseXML( 212 | (xmlDoc.XMLDocument && xmlDoc.XMLDocument.xml) || 213 | $(xmlDoc.body).html() 214 | ); 215 | }, 216 | 'iframe script': function (iframe) { 217 | return iframe && $.globalEval($(iframe[0].body).text()); 218 | } 219 | } 220 | }); 221 | }); 222 | -------------------------------------------------------------------------------- /server-side-helpers/fancy_file_uploader_helper.php: -------------------------------------------------------------------------------- 1 | false, 52 | "error" => self::FFTranslate($msg), 53 | "errorcode" => $code 54 | ); 55 | } 56 | else if (!is_uploaded_file($currfiles["tmp_name"][$x])) 57 | { 58 | $entry = array( 59 | "success" => false, 60 | "error" => self::FFTranslate("The specified input filename was not uploaded to this server."), 61 | "errorcode" => "invalid_input_filename" 62 | ); 63 | } 64 | else 65 | { 66 | $currfiles["name"][$x] = self::FilenameSafe($currfiles["name"][$x]); 67 | $pos = strrpos($currfiles["name"][$x], "."); 68 | $fileext = ($pos !== false ? (string)substr($currfiles["name"][$x], $pos + 1) : ""); 69 | 70 | $entry = array( 71 | "success" => true, 72 | "file" => $currfiles["tmp_name"][$x], 73 | "name" => $currfiles["name"][$x], 74 | "ext" => $fileext, 75 | "type" => $currfiles["type"][$x], 76 | "size" => $currfiles["size"][$x] 77 | ); 78 | } 79 | 80 | $result[] = $entry; 81 | } 82 | } 83 | } 84 | 85 | return $result; 86 | } 87 | 88 | public static function GetMaxUploadFileSize() 89 | { 90 | $maxpostsize = floor(self::ConvertUserStrToBytes(ini_get("post_max_size")) * 3 / 4); 91 | if ($maxpostsize > 4096) $maxpostsize -= 4096; 92 | 93 | $maxuploadsize = self::ConvertUserStrToBytes(ini_get("upload_max_filesize")); 94 | if ($maxuploadsize < 1) $maxuploadsize = ($maxpostsize < 1 ? -1 : $maxpostsize); 95 | 96 | return ($maxpostsize < 1 ? $maxuploadsize : min($maxpostsize, $maxuploadsize)); 97 | } 98 | 99 | // Copy included for class self-containment. 100 | public static function ConvertUserStrToBytes($str) 101 | { 102 | $str = trim($str); 103 | $num = (double)$str; 104 | if (strtoupper(substr($str, -1)) == "B") $str = substr($str, 0, -1); 105 | switch (strtoupper(substr($str, -1))) 106 | { 107 | case "P": $num *= 1024; 108 | case "T": $num *= 1024; 109 | case "G": $num *= 1024; 110 | case "M": $num *= 1024; 111 | case "K": $num *= 1024; 112 | } 113 | 114 | return $num; 115 | } 116 | 117 | public static function GetChunkFilename() 118 | { 119 | if (isset($_SERVER["HTTP_CONTENT_DISPOSITION"])) 120 | { 121 | // Content-Disposition: attachment; filename="urlencodedstr" 122 | $str = $_SERVER["HTTP_CONTENT_DISPOSITION"]; 123 | if (strtolower(substr($str, 0, 11)) === "attachment;") 124 | { 125 | $pos = strpos($str, "\"", 11); 126 | $pos2 = strrpos($str, "\""); 127 | 128 | if ($pos !== false && $pos2 !== false && $pos < $pos2) 129 | { 130 | $str = self::FilenameSafe(rawurldecode(substr($str, $pos + 1, $pos2 - $pos - 1))); 131 | 132 | if ($str !== "") return $str; 133 | } 134 | } 135 | } 136 | 137 | return false; 138 | } 139 | 140 | public static function GetFileStartPosition() 141 | { 142 | if (isset($_SERVER["HTTP_CONTENT_RANGE"]) || isset($_SERVER["HTTP_RANGE"])) 143 | { 144 | // Content-Range: bytes (*|integer-integer)/(*|integer-integer) 145 | $vals = explode(" ", preg_replace('/\s+/', " ", str_replace(",", "", (isset($_SERVER["HTTP_CONTENT_RANGE"]) ? $_SERVER["HTTP_CONTENT_RANGE"] : $_SERVER["HTTP_RANGE"])))); 146 | if (count($vals) === 2 && strtolower($vals[0]) === "bytes") 147 | { 148 | $vals = explode("/", trim($vals[1])); 149 | if (count($vals) === 2) 150 | { 151 | $vals = explode("-", trim($vals[0])); 152 | 153 | if (count($vals) === 2) return (double)$vals[0]; 154 | } 155 | } 156 | } 157 | 158 | return 0; 159 | } 160 | 161 | public static function HandleUpload($filekey, $options = array()) 162 | { 163 | if (!isset($_REQUEST["fileuploader"]) && !isset($_POST["fileuploader"])) return array("success" => false, "error" => "No upload or missing 'fileuploader'.", "errorcode" => "no_upload"); 164 | 165 | if (isset($options["allowed_exts"])) 166 | { 167 | $allowedexts = array(); 168 | 169 | if (is_string($options["allowed_exts"])) $options["allowed_exts"] = explode(",", $options["allowed_exts"]); 170 | 171 | foreach ($options["allowed_exts"] as $ext) 172 | { 173 | $ext = strtolower(trim(trim($ext), ".")); 174 | if ($ext !== "") $allowedexts[$ext] = true; 175 | } 176 | } 177 | 178 | $files = self::NormalizeFiles($filekey); 179 | if (!isset($files[0])) $result = array("success" => false, "error" => self::FFTranslate("File data was submitted but is missing."), "errorcode" => "bad_input"); 180 | else if (!$files[0]["success"]) $result = $files[0]; 181 | else if (isset($options["allowed_exts"]) && !isset($allowedexts[strtolower($files[0]["ext"])])) 182 | { 183 | $result = array( 184 | "success" => false, 185 | "error" => self::FFTranslate("Invalid file extension. Must be one of %s.", "'." . implode("', '.", array_keys($allowedexts)) . "'"), 186 | "errorcode" => "invalid_file_ext" 187 | ); 188 | } 189 | else 190 | { 191 | // For chunked file uploads, get the current filename and starting position from the incoming headers. 192 | $name = self::GetChunkFilename(); 193 | if ($name !== false) 194 | { 195 | $startpos = self::GetFileStartPosition(); 196 | 197 | $name = substr($name, 0, -(strlen($files[0]["ext"]) + 1)); 198 | 199 | if (isset($options["filename_callback"]) && is_callable($options["filename_callback"])) $filename = call_user_func_array($options["filename_callback"], array($name, strtolower($files[0]["ext"]), $files[0])); 200 | else if (isset($options["filename"])) $filename = (isset($options["fixed_filename"]) && $options["fixed_filename"] ? $options["filename"] : str_replace(array("{name}", "{ext}"), array($name, strtolower($files[0]["ext"])), $options["filename"])); 201 | else $filename = false; 202 | 203 | if (!is_string($filename)) $result = array("success" => false, "error" => self::FFTranslate("The server did not set a valid filename."), "errorcode" => "invalid_filename"); 204 | else if (isset($options["limit"]) && $options["limit"] > -1 && $startpos + filesize($files[0]["file"]) > $options["limit"]) $result = array("success" => false, "error" => self::FFTranslate("The server file size limit was exceeded."), "errorcode" => "file_too_large"); 205 | else 206 | { 207 | if (file_exists($filename) && $startpos === filesize($filename)) $fp = @fopen($filename, "ab"); 208 | else 209 | { 210 | $fp = @fopen($filename, ($startpos > 0 && file_exists($filename) ? "r+b" : "wb")); 211 | if ($fp !== false) @fseek($fp, $startpos, SEEK_SET); 212 | } 213 | 214 | $fp2 = @fopen($files[0]["file"], "rb"); 215 | 216 | if ($fp === false) $result = array("success" => false, "error" => self::FFTranslate("Unable to open a required file for writing."), "errorcode" => "open_failed", "info" => $filename); 217 | else if ($fp2 === false) $result = array("success" => false, "error" => self::FFTranslate("Unable to open a required file for reading."), "errorcode" => "open_failed", "info" => $files[0]["file"]); 218 | else 219 | { 220 | do 221 | { 222 | $data2 = @fread($fp2, 1048576); 223 | if ($data2 == "") break; 224 | 225 | @fwrite($fp, $data2); 226 | } while (1); 227 | 228 | fclose($fp2); 229 | fclose($fp); 230 | 231 | $result = array( 232 | "success" => true 233 | ); 234 | } 235 | } 236 | } 237 | else 238 | { 239 | $name = substr($files[0]["name"], 0, -(strlen($files[0]["ext"]) + 1)); 240 | 241 | if (isset($options["filename_callback"]) && is_callable($options["filename_callback"])) $filename = call_user_func_array($options["filename_callback"], array($name, strtolower($files[0]["ext"]), $files[0])); 242 | else if (isset($options["filename"])) $filename = (isset($options["fixed_filename"]) && $options["fixed_filename"] ? $options["filename"] : str_replace(array("{name}", "{ext}"), array($name, strtolower($files[0]["ext"])), $options["filename"])); 243 | else $filename = false; 244 | 245 | if (!is_string($filename)) $result = array("success" => false, "error" => self::FFTranslate("The server did not set a valid filename."), "errorcode" => "invalid_filename"); 246 | else if (isset($options["limit"]) && $options["limit"] > -1 && filesize($files[0]["file"]) > $options["limit"]) $result = array("success" => false, "error" => self::FFTranslate("The server file size limit was exceeded."), "errorcode" => "file_too_large"); 247 | else 248 | { 249 | @copy($files[0]["file"], $filename); 250 | 251 | $result = array( 252 | "success" => true 253 | ); 254 | } 255 | } 256 | } 257 | 258 | if ($result["success"] && isset($options["result_callback"]) && is_callable($options["result_callback"])) call_user_func_array($options["result_callback"], array(&$result, $filename, $name, strtolower($files[0]["ext"]), $files[0], (isset($options["result_callback_opts"]) ? $options["result_callback_opts"] : false))); 259 | 260 | if (isset($options["return_result"]) && $options["return_result"]) return $result; 261 | 262 | header("Content-Type: application/json"); 263 | 264 | echo json_encode($result, JSON_UNESCAPED_SLASHES); 265 | 266 | exit(); 267 | } 268 | 269 | public static function FFTranslate() 270 | { 271 | $args = func_get_args(); 272 | if (!count($args)) return ""; 273 | 274 | return call_user_func_array((defined("CS_TRANSLATE_FUNC") && function_exists(CS_TRANSLATE_FUNC) ? CS_TRANSLATE_FUNC : "sprintf"), $args); 275 | } 276 | } 277 | ?> -------------------------------------------------------------------------------- /fancy-file-uploader/fancy_fileupload.css: -------------------------------------------------------------------------------- 1 | .ff_fileupload_hidden { display: none; } 2 | 3 | .ff_fileupload_wrap .ff_fileupload_dropzone_wrap { position: relative; } 4 | 5 | .ff_fileupload_wrap .ff_fileupload_dropzone { display: block; width: 100%; height: 200px; box-sizing: border-box; border: 2px dashed #A2B4CA; border-radius: 3px; padding: 0; background-color: #FCFCFC; background-image: url('fancy_upload.png'); background-repeat: no-repeat; background-position: center center; opacity: 0.85; cursor: pointer; outline: none; } 6 | .ff_fileupload_wrap .ff_fileupload_dropzone::-moz-focus-inner { border: 0; } 7 | .ff_fileupload_wrap .ff_fileupload_dropzone:hover, .ff_fileupload_wrap .ff_fileupload_dropzone:focus, .ff_fileupload_wrap .ff_fileupload_dropzone:active { opacity: 1; background-color: #FDFDFD; border-color: #157EFB; } 8 | 9 | .ff_fileupload_wrap .ff_fileupload_dropzone_tools { position: absolute; right: 10px; top: 0; } 10 | .ff_fileupload_wrap .ff_fileupload_dropzone_tool { display: block; margin-top: 10px; width: 40px; height: 40px; box-sizing: border-box; border: 1px solid #A2B4CA; border-radius: 3px; padding: 0; background-color: #FDFDFD; background-repeat: no-repeat; background-position: center center; opacity: 0.85; cursor: pointer; outline: none; } 11 | .ff_fileupload_wrap .ff_fileupload_dropzone_tool::-moz-focus-inner { border: 0; } 12 | .ff_fileupload_wrap .ff_fileupload_dropzone_tool:hover, .ff_fileupload_wrap .ff_fileupload_dropzone_tool:focus, .ff_fileupload_wrap .ff_fileupload_dropzone_tool:active { opacity: 1; background-color: #FFFFFF; border-color: #157EFB; } 13 | 14 | .ff_fileupload_wrap .ff_fileupload_recordaudio { background-image: url('fancy_microphone.png'); } 15 | .ff_fileupload_wrap .ff_fileupload_recordvideo { background-image: url('fancy_webcam.png'); } 16 | .ff_fileupload_wrap .ff_fileupload_recordvideo_preview { position: absolute; display: block; right: 60px; top: 10px; width: 320px; max-width: calc(100% - 70px); height: calc(100% - 20px); background-color: #222222; } 17 | .ff_fileupload_wrap .ff_fileupload_recordvideo_preview.ff_fileupload_hidden { display: none; } 18 | 19 | @keyframes ff_fileupload_recording_animate { 20 | from { border-color: #EF1F1F; } 21 | to { border-color: #C9A1A1; } 22 | } 23 | 24 | .ff_fileupload_wrap .ff_fileupload_recording { animation: ff_fileupload_recording_animate 1.2s infinite alternate; } 25 | 26 | .ff_fileupload_wrap table.ff_fileupload_uploads { width: 100%; border-collapse: collapse !important; border: 0 none; } 27 | .ff_fileupload_wrap table.ff_fileupload_uploads tr, .ff_fileupload_wrap table.ff_fileupload_uploads td { margin: 0; border: 0 none; padding: 0; } 28 | .ff_fileupload_wrap table.ff_fileupload_uploads td { vertical-align: top; padding: 1em 0; white-space: nowrap; line-height: normal; } 29 | 30 | @keyframes ff_fileupload_bounce_animate { 31 | 10%, 90% { transform: translateY(-1px); } 32 | 20%, 80% { transform: translateY(2px); } 33 | 30%, 50%, 70% { transform: translateY(-3px); } 34 | 40%, 60% { transform: translateY(3px); } 35 | } 36 | 37 | .ff_fileupload_wrap table.ff_fileupload_uploads tr.ff_fileupload_bounce { animation: ff_fileupload_bounce_animate 0.82s cubic-bezier(.36,.07,.19,.97) both; transform: translateY(0); } 38 | 39 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview { width: 1px; } 40 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_image { display: block; box-sizing: border-box; border: 0 none; padding: 0; background-color: #DDDDDD; background-size: cover; background-repeat: no-repeat; background-position: center center; width: 50px; height: 50px; border-radius: 5px; opacity: 0.75; text-align: center; font-size: 12px; font-weight: bold; color: #222222; overflow: hidden; outline: none; cursor: default; } 41 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_image::-moz-focus-inner { border: 0; } 42 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_image_has_preview { cursor: pointer; } 43 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_image:hover, .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_image:focus, .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_image:active { opacity: 1; } 44 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text { display: block; margin: 0 auto; width: 70%; overflow: hidden; } 45 | 46 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_actions button { display: inline-block; vertical-align: top; width: 26px; height: 26px; box-sizing: border-box; border: 1px solid #A2B4CA; border-radius: 3px; padding: 0; background-color: #FCFCFC; background-repeat: no-repeat; background-position: center center; opacity: 0.85; cursor: pointer; outline: none; } 47 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_actions button::-moz-focus-inner { border: 0; } 48 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_actions button:hover, .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_actions button:focus, .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_actions button:active { opacity: 1; background-color: #FDFDFD; border-color: #157EFB; } 49 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_actions button.ff_fileupload_start_upload { margin-right: 0.5em; } 50 | 51 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_actions_mobile { display: none; } 52 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_actions_mobile button { display: block; margin-top: 0.3em; width: 100%; height: 28px; box-sizing: border-box; border: 1px solid #A2B4CA; border-radius: 3px; padding: 0; background-color: #FCFCFC; background-repeat: no-repeat; background-position: center center; opacity: 0.85; cursor: pointer; outline: none; } 53 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_actions_mobile button::-moz-focus-inner { border: 0; } 54 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_actions_mobile button:hover, .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_actions_mobile button:focus, .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_actions_mobile button:active { opacity: 1; background-color: #FDFDFD; border-color: #157EFB; } 55 | 56 | .ff_fileupload_wrap table.ff_fileupload_uploads button.ff_fileupload_start_upload { background-image: url('fancy_okay.png'); } 57 | .ff_fileupload_wrap table.ff_fileupload_uploads button.ff_fileupload_remove_file { background-image: url('fancy_remove.png'); } 58 | 59 | /* Colored buttons based on file extension for non-images. */ 60 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text_with_color { color: #FFFFFF; } 61 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text_a { background-color: #F03C3C; } 62 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text_b { background-color: #F05A3C; } 63 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text_c { background-color: #F0783C; } 64 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text_d { background-color: #F0963C; } 65 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text_e { background-color: #E0862B; } 66 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text_f { background-color: #DCA12B; } 67 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text_g { background-color: #C7AB1E; } 68 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text_h { background-color: #C7C71E; } 69 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text_i { background-color: #ABC71E; } 70 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text_j { background-color: #8FC71E; } 71 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text_k { background-color: #72C71E; } 72 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text_l { background-color: #56C71E; } 73 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text_m { background-color: #3AC71E; } 74 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text_n { background-color: #1EC71E; } 75 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text_o { background-color: #1EC73A; } 76 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text_p { background-color: #1EC756; } 77 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text_q { background-color: #1EC78F; } 78 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text_r { background-color: #1EC7AB; } 79 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text_s { background-color: #1EC7C7; } 80 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text_t { background-color: #1EABC7; } 81 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text_u { background-color: #1E8FC7; } 82 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text_v { background-color: #1E72C7; } 83 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text_w { background-color: #3C78F0; } 84 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text_x { background-color: #3C5AF0; } 85 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text_y { background-color: #3C3CF0; } 86 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text_z { background-color: #5A3CF0; } 87 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text_0 { background-color: #783CF0; } 88 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text_1 { background-color: #963CF0; } 89 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text_2 { background-color: #B43CF0; } 90 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text_3 { background-color: #D23CF0; } 91 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text_4 { background-color: #F03CF0; } 92 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text_5 { background-color: #F03CD2; } 93 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text_6 { background-color: #F03CB4; } 94 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text_7 { background-color: #F03C96; } 95 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text_8 { background-color: #F03C78; } 96 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_text_9 { background-color: #F03C5A; } 97 | 98 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_summary { padding: 1em; font-size: 0.9em; white-space: normal; } 99 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_summary .ff_fileupload_filename { width: 100%; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 100 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_summary .ff_fileupload_filename input { box-sizing: border-box; width: 100%; padding: 0.3em; margin-bottom: 0.1em; font-size: 1.0em; font-weight: normal; line-height: normal; border: 1px solid #BBBBBB; border-radius: 0; box-shadow: none; } 101 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_summary .ff_fileupload_filename input:focus, .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_summary .ff_fileupload_filename input:hover { border: 1px solid #888888; } 102 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_summary .ff_fileupload_errors { color: #A94442; font-weight: bold; } 103 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_summary .ff_fileupload_progress_background { margin-top: 0.5em; background-color: #CCCCCC; height: 2px; } 104 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_summary .ff_fileupload_progress_bar { background-color: #157EFB; width: 0; height: 2px; } 105 | 106 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_actions { width: 1px; text-align: right; } 107 | 108 | @media (max-width: 420px) { 109 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_image { width: 36px; height: 36px; font-size: 11px; } 110 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_summary { padding-right: 0; } 111 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_actions { display: none; } 112 | .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_actions_mobile { display: block; } 113 | } 114 | 115 | .ff_fileupload_dialog_background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); z-index: 10000; } 116 | .ff_fileupload_dialog_main { position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; text-align: center; } 117 | .ff_fileupload_dialog_main img { position: relative; top: 50%; transform: perspective(1px) translateY(-50%); max-width: 100%; max-height: 100%; } 118 | .ff_fileupload_dialog_main audio { position: relative; top: 50%; transform: perspective(1px) translateY(-50%); width: 100%; } 119 | .ff_fileupload_dialog_main video { position: relative; top: 50%; transform: perspective(1px) translateY(-50%); max-width: 100%; max-height: 100%; } 120 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | jQuery Fancy File Uploader 2 | ========================== 3 | 4 | A jQuery plugin to convert the HTML file input type into a mobile-friendly fancy file uploader. Choose from a MIT or LGPL license. 5 | 6 | Also available in [FlexForms Modules](https://github.com/cubiclesoft/php-flexforms-modules). 7 | 8 | ![Screenshot](https://user-images.githubusercontent.com/1432111/28810269-b1571d10-763d-11e7-9ac5-6190b94d0f2d.png) 9 | 10 | [Live demo via Admin Pack](https://barebonescms.com/demos/admin_pack/admin.php?action=addeditexample&sec_t=7a110e04a283159db5a4e282c76e29b02e70e52c) (This plugin is located near the bottom of that page.) 11 | 12 | Also used by [Cool File Transfer](https://github.com/cubiclesoft/php-cool-file-transfer). 13 | 14 | [![Donate](https://cubiclesoft.com/res/donate-shield.png)](https://cubiclesoft.com/donate/) [![Discord](https://img.shields.io/discord/777282089980526602?label=chat&logo=discord)](https://cubiclesoft.com/product-support/github/) 15 | 16 | Features 17 | -------- 18 | 19 | * Beautiful, compact, and fully responsive layout. 20 | * Drag-and-drop dropzone with paste support. 21 | * Full keyboard navigation. 22 | * Client-side file naming. 23 | * Preview support for images, audio, and video. 24 | * Supports recording video and audio directly from a webcam, microphone, and other media sources. 25 | * Chunked file upload support. 26 | * Lots of useful callbacks. 27 | * Automatic retries with exponential fallback. 28 | * Multilingual support. 29 | * Has a liberal open source license. MIT or LGPL, your choice. 30 | * Designed for relatively painless integration into your project. 31 | * Sits on GitHub for all of that pull request and issue tracker goodness to easily submit changes and ideas respectively. 32 | 33 | Alternate Options 34 | ----------------- 35 | 36 | jQuery Fancy File Uploader just handles uploading of files in an environment where you plan to apply strict storage controls. However, if you need something even fancier, here are a couple of options: 37 | 38 | If you need a general-purpose hierarchical file management and tabbed file editor solution that can be readily embedded into existing software products, check out the open source CubicleSoft [PHP File Manager and Editor](https://github.com/cubiclesoft/php-filemanager) application. 39 | 40 | If you need something even more powerful, flexible, and highly customizable with hierarchical directory and file structures, check out the open source CubicleSoft [Folder and File Explorer](https://github.com/cubiclesoft/js-fileexplorer) zero-dependencies Javascript widget. 41 | 42 | Getting Started 43 | --------------- 44 | 45 | jQuery is required to use this software so hopefully that doesn't come as a surprise to anyone. Parts of this plugin require the jQuery UI widget factory. If you are already including jQuery UI on your webpage, then you already have the widget factory and don't need to do anything else. Otherwise, add this line after including jQuery: 46 | 47 | ```html 48 | 49 | ``` 50 | 51 | Now you can include Fancy File Uploader: 52 | 53 | ```html 54 | 55 | 56 | 57 | 58 | ``` 59 | 60 | Let's say you have a file input element somewhere on the same page that looks like: 61 | 62 | ```html 63 | 64 | ``` 65 | 66 | To transform that file input into something fancy, pass in some options to the plugin and let the magic happen: 67 | 68 | ```html 69 | 79 | ``` 80 | 81 | Other than handling the files on the server side of things and leveraging the various callbacks, that's pretty much it for basic usage. 82 | 83 | Server-Side Processing 84 | ---------------------- 85 | 86 | The server should reply with the following JSON object format for successful uploads: 87 | 88 | ```json 89 | { 90 | "success" : true 91 | } 92 | ``` 93 | 94 | The server should reply with the following JSON object format for error conditions: 95 | 96 | ```json 97 | { 98 | "success" : false, 99 | "error" : "Human-readable, possibly translated error.", 100 | "errorcode" : "relevant_error_code" 101 | } 102 | ``` 103 | 104 | See [FlexForms Modules](https://github.com/cubiclesoft/php-flexforms-modules), [Admin Pack](https://github.com/cubiclesoft/admin-pack), and [FlexForms](https://github.com/cubiclesoft/php-flexforms) for example usage with open source CubicleSoft products that handle Fancy File Uploader submissions. 105 | 106 | Fancy File Uploader works with most server-side languages. For basic server-side PHP integration with Fancy File Uploader, you can use the included server-side helper class: 107 | 108 | ```php 109 | array("jpg", "png"), 119 | "filename" => __DIR__ . "/images/" . $id . ".{ext}", 120 | // "result_callback" => "ModifyUploadResult" 121 | ); 122 | 123 | FancyFileUploaderHelper::HandleUpload("files", $options); 124 | ?> 125 | ``` 126 | 127 | The class also contains `FancyFileUploaderHelper::GetMaxUploadFileSize()`, which determines the maximum allowed file/chunk upload size that PHP allows. 128 | 129 | When using `FancyFileUploaderHelper::HandleUpload()`, be sure to pass `fileuploader` as a parameter to the server so the FancyFileUploaderHelper class will handle the request instead of ignoring it. For example: 130 | 131 | ```html 132 | 142 | ``` 143 | 144 | Additional Examples 145 | ------------------- 146 | 147 | To automatically start every upload as soon as it is added, do something similar to this: 148 | 149 | ```html 150 | 165 | ``` 166 | 167 | It is possible to add a button to the screen to start all of the uploads at once that are able to be started: 168 | 169 | ```html 170 | 171 | ``` 172 | 173 | The specialized function `data.ff_info.RemoveFile()` can be used at any time to remove a file from the list which will immediately abort any upload in progress, remove the associated UI elements, and clean up internal structures: 174 | 175 | ```html 176 | 208 | ``` 209 | 210 | To use chunked uploads for handling large file transfers, read up on [jQuery File Upload chunked file uploads](https://github.com/blueimp/jQuery-File-Upload/wiki/Chunked-file-uploads) and do something like: 211 | 212 | ```html 213 | 225 | ``` 226 | 227 | Enable the microphone and webcam/camera recording buttons: 228 | 229 | ```html 230 | 241 | ``` 242 | 243 | To remove the widget altogether and restore the original file input, call: `$('#thefiles').FancyFileUpload('destroy');` 244 | 245 | In order to be able to remove the widget later, `data('fancy-fileupload')` is used to store information alongside the object. Modifying various options after initial creation is possible but tricky. Accessing these internal options is at your own, probably minimal, risk: 246 | 247 | * fileuploadwrap - A jQuery object pointing at the root of the DOM node of the main user interface. 248 | * form - A jQuery object pointing at the hidden form that is created during the initialization process. When the user clicks the button to select files, the click transfers to the hidden file input field in the form. 249 | * settings - A reference to the settings object. 250 | 251 | Example usage to access the hidden file input element after creating it (e.g. to change its `accept` attribute): 252 | 253 | ```html 254 | 270 | ``` 271 | 272 | Options 273 | ------- 274 | 275 | This plugin accepts the following options: 276 | 277 | * url - A string containing the destination URL to use to send the data. The default behavior is to locate the `action` of the nearest `form` element to the matching input file element and use that (Default is ''). 278 | * params - An object containing key-value pairs to send to the server when submitting file data (Default is an empty object). 279 | * edit - A boolean indicating whether or not to allow the user to enter a filename minus the file extension after selecting a file but before the upload process has started (Default is true). 280 | * maxfilesize - An integer containing the maximum size, in bytes, to allow for file upload (Default is -1, which means no limit). 281 | * accept - An array containing a list of allowed file extensions (Default is null, which allows all file extensions). Note that the server is still responsible for validating uploads. 282 | * displayunits - A string containing one of 'iec_windows', 'iec_formal', or 'si' to specify what units to use when displaying file sizes to the user (Default is 'iec_windows'). 283 | * adjustprecision - A boolean indicating whether or not to adjust the final precision when displaying file sizes to the user (Default is true). 284 | * retries - An integer containing the number of retries to perform before giving up (Default is 5). 285 | * retrydelay - An integer containing the base delay, in milliseconds, to apply between retries (Default is 500). Note that the delay is multiplied by 2 for exponential fallback. 286 | * recordaudio - A boolean indicating whether or not to display a toolbar button with a microphone icon for recording audio directly via the web browser (Default is false). 287 | * audiosettings - An object containing valid MediaRecorder options (Default is an empty object). 288 | * recordvideo - A boolean indicating whether or not to display a toolbar button with a webcam icon for recording video directly via the web browser (Default is false). 289 | * videosettings - An object containing valid MediaRecorder options (Default is an empty object). 290 | * preinit - A valid callback function that is called during initialization to allow for last second changes to the settings. Useful for altering `fileupload` options on the fly. The callback function must accept one parameter - callback(settings). 291 | * postinit - A valid callback function that is called at the end of initialization of each instance. The `this` is a jQuery object to the instance. The callback function must accept zero parameters - callback(). 292 | * added - A valid callback function that is called for each item after its UI has been added to the DOM. The callback function must accept two parameters - callback(e, data). 293 | * showpreview - A valid callback function that is called after the preview dialog appears. Useful for temporarily preventing unwanted UI interactions elsewhere. The callback function must accept three parameters - callback(data, preview, previewclone). 294 | * hidepreview - A valid callback function that is called after the preview dialog disappears. The callback function must accept three parameters - callback(data, preview, previewclone). 295 | * startupload - A valid callback function that is called when the button is clicked to start the upload. The callback function must accept three parameters - callback(SubmitUpload, e, data). The callback is expected to call the `SubmitUpload()` function when it is ready to start the file upload. 296 | * continueupload - A valid callback function that is called whenever progress is updated (default is every 100 milliseconds). The callback function must accept three parameters - callback(e, data). The callback may return false or call `data.abort()` to cancel the upload. 297 | * uploadcancelled - A valid callback function that is called whenever an upload has been cancelled. The callback function must accept two parameters - callback(e, data). 298 | * uploadcompleted - A valid callback function that is called whenever an upload has successfully completed. The callback function must accept two parameters - callback(e, data). 299 | * fileupload - An object containing [jQuery File Upload options](https://github.com/blueimp/jQuery-File-Upload/wiki/Options) (Default is an empty object). The following options are immutable and cannot be changed (doing so will break this plugin): `singleFileUploads` (always true), `dropZone`, `add`, `progress`, `fail`, `done`, `chunksend`, and `chunkdone`. The `dataType` option must be 'json' (the default) or 'jsonp' as the plugin depends on a valid JSON response for correct operation. 300 | * langmap - An object containing translation strings. Support exists for most of the user interface (Default is an empty object). 301 | 302 | All callbacks have a `this` containing the jQuery object for the current UI table row. Use the jQuery `this.find(selector)` syntax to locate relevant UI elements. 303 | 304 | The default settings can be adjusted before creating any instances via `$.FancyFileUpload.defaults`. The most common use-case is to apply a set of translation strings to `langmap`. 305 | 306 | Translations 307 | ------------ 308 | 309 | To translate this plugin to another language, open `jquery.fancy-fileupload.js` in a text editor and locate strings passed to the `Translate()` function. In a new .js file, create a mapping between English and the target language: 310 | 311 | ```js 312 | $.FancyFileUpload.defaults.langmap = { 313 | 'File is too large. Maximum file size is {0}.': 'Translation goes here...' 314 | }; 315 | ``` 316 | 317 | Some strings contain `{0}`, `{1}`, etc. which are placeholders for `FormatStr()` to fill in. Load your .js file after loading `jquery.fancy-fileupload.js`. 318 | 319 | Under the Hood 320 | -------------- 321 | 322 | jQuery Fancy File Uploader uses the core plugin from blueimp [jQuery File Upload](https://github.com/blueimp/jQuery-File-Upload) and then wraps the core plugin up in the custom user interface that users interact with. 323 | -------------------------------------------------------------------------------- /fancy-file-uploader/jquery.ui.widget.js: -------------------------------------------------------------------------------- 1 | /*! jQuery UI - v1.12.1+0b7246b6eeadfa9e2696e22f3230f6452f8129dc - 2020-02-20 2 | * http://jqueryui.com 3 | * Includes: widget.js 4 | * Copyright jQuery Foundation and other contributors; Licensed MIT */ 5 | 6 | /* global define, require */ 7 | /* eslint-disable no-param-reassign, new-cap, jsdoc/require-jsdoc */ 8 | 9 | (function (factory) { 10 | 'use strict'; 11 | if (typeof define === 'function' && define.amd) { 12 | // AMD. Register as an anonymous module. 13 | define(['jquery'], factory); 14 | } else if (typeof exports === 'object') { 15 | // Node/CommonJS 16 | factory(require('jquery')); 17 | } else { 18 | // Browser globals 19 | factory(window.jQuery); 20 | } 21 | })(function ($) { 22 | ('use strict'); 23 | 24 | $.ui = $.ui || {}; 25 | 26 | $.ui.version = '1.12.1'; 27 | 28 | /*! 29 | * jQuery UI Widget 1.12.1 30 | * http://jqueryui.com 31 | * 32 | * Copyright jQuery Foundation and other contributors 33 | * Released under the MIT license. 34 | * http://jquery.org/license 35 | */ 36 | 37 | //>>label: Widget 38 | //>>group: Core 39 | //>>description: Provides a factory for creating stateful widgets with a common API. 40 | //>>docs: http://api.jqueryui.com/jQuery.widget/ 41 | //>>demos: http://jqueryui.com/widget/ 42 | 43 | // Support: jQuery 1.9.x or older 44 | // $.expr[ ":" ] is deprecated. 45 | if (!$.expr.pseudos) { 46 | $.expr.pseudos = $.expr[':']; 47 | } 48 | 49 | // Support: jQuery 1.11.x or older 50 | // $.unique has been renamed to $.uniqueSort 51 | if (!$.uniqueSort) { 52 | $.uniqueSort = $.unique; 53 | } 54 | 55 | var widgetUuid = 0; 56 | var widgetHasOwnProperty = Array.prototype.hasOwnProperty; 57 | var widgetSlice = Array.prototype.slice; 58 | 59 | $.cleanData = (function (orig) { 60 | return function (elems) { 61 | var events, elem, i; 62 | // eslint-disable-next-line eqeqeq 63 | for (i = 0; (elem = elems[i]) != null; i++) { 64 | // Only trigger remove when necessary to save time 65 | events = $._data(elem, 'events'); 66 | if (events && events.remove) { 67 | $(elem).triggerHandler('remove'); 68 | } 69 | } 70 | orig(elems); 71 | }; 72 | })($.cleanData); 73 | 74 | $.widget = function (name, base, prototype) { 75 | var existingConstructor, constructor, basePrototype; 76 | 77 | // ProxiedPrototype allows the provided prototype to remain unmodified 78 | // so that it can be used as a mixin for multiple widgets (#8876) 79 | var proxiedPrototype = {}; 80 | 81 | var namespace = name.split('.')[0]; 82 | name = name.split('.')[1]; 83 | var fullName = namespace + '-' + name; 84 | 85 | if (!prototype) { 86 | prototype = base; 87 | base = $.Widget; 88 | } 89 | 90 | if ($.isArray(prototype)) { 91 | prototype = $.extend.apply(null, [{}].concat(prototype)); 92 | } 93 | 94 | // Create selector for plugin 95 | $.expr.pseudos[fullName.toLowerCase()] = function (elem) { 96 | return !!$.data(elem, fullName); 97 | }; 98 | 99 | $[namespace] = $[namespace] || {}; 100 | existingConstructor = $[namespace][name]; 101 | constructor = $[namespace][name] = function (options, element) { 102 | // Allow instantiation without "new" keyword 103 | if (!this._createWidget) { 104 | return new constructor(options, element); 105 | } 106 | 107 | // Allow instantiation without initializing for simple inheritance 108 | // must use "new" keyword (the code above always passes args) 109 | if (arguments.length) { 110 | this._createWidget(options, element); 111 | } 112 | }; 113 | 114 | // Extend with the existing constructor to carry over any static properties 115 | $.extend(constructor, existingConstructor, { 116 | version: prototype.version, 117 | 118 | // Copy the object used to create the prototype in case we need to 119 | // redefine the widget later 120 | _proto: $.extend({}, prototype), 121 | 122 | // Track widgets that inherit from this widget in case this widget is 123 | // redefined after a widget inherits from it 124 | _childConstructors: [] 125 | }); 126 | 127 | basePrototype = new base(); 128 | 129 | // We need to make the options hash a property directly on the new instance 130 | // otherwise we'll modify the options hash on the prototype that we're 131 | // inheriting from 132 | basePrototype.options = $.widget.extend({}, basePrototype.options); 133 | $.each(prototype, function (prop, value) { 134 | if (!$.isFunction(value)) { 135 | proxiedPrototype[prop] = value; 136 | return; 137 | } 138 | proxiedPrototype[prop] = (function () { 139 | function _super() { 140 | return base.prototype[prop].apply(this, arguments); 141 | } 142 | 143 | function _superApply(args) { 144 | return base.prototype[prop].apply(this, args); 145 | } 146 | 147 | return function () { 148 | var __super = this._super; 149 | var __superApply = this._superApply; 150 | var returnValue; 151 | 152 | this._super = _super; 153 | this._superApply = _superApply; 154 | 155 | returnValue = value.apply(this, arguments); 156 | 157 | this._super = __super; 158 | this._superApply = __superApply; 159 | 160 | return returnValue; 161 | }; 162 | })(); 163 | }); 164 | constructor.prototype = $.widget.extend( 165 | basePrototype, 166 | { 167 | // TODO: remove support for widgetEventPrefix 168 | // always use the name + a colon as the prefix, e.g., draggable:start 169 | // don't prefix for widgets that aren't DOM-based 170 | widgetEventPrefix: existingConstructor 171 | ? basePrototype.widgetEventPrefix || name 172 | : name 173 | }, 174 | proxiedPrototype, 175 | { 176 | constructor: constructor, 177 | namespace: namespace, 178 | widgetName: name, 179 | widgetFullName: fullName 180 | } 181 | ); 182 | 183 | // If this widget is being redefined then we need to find all widgets that 184 | // are inheriting from it and redefine all of them so that they inherit from 185 | // the new version of this widget. We're essentially trying to replace one 186 | // level in the prototype chain. 187 | if (existingConstructor) { 188 | $.each(existingConstructor._childConstructors, function (i, child) { 189 | var childPrototype = child.prototype; 190 | 191 | // Redefine the child widget using the same prototype that was 192 | // originally used, but inherit from the new version of the base 193 | $.widget( 194 | childPrototype.namespace + '.' + childPrototype.widgetName, 195 | constructor, 196 | child._proto 197 | ); 198 | }); 199 | 200 | // Remove the list of existing child constructors from the old constructor 201 | // so the old child constructors can be garbage collected 202 | delete existingConstructor._childConstructors; 203 | } else { 204 | base._childConstructors.push(constructor); 205 | } 206 | 207 | $.widget.bridge(name, constructor); 208 | 209 | return constructor; 210 | }; 211 | 212 | $.widget.extend = function (target) { 213 | var input = widgetSlice.call(arguments, 1); 214 | var inputIndex = 0; 215 | var inputLength = input.length; 216 | var key; 217 | var value; 218 | 219 | for (; inputIndex < inputLength; inputIndex++) { 220 | for (key in input[inputIndex]) { 221 | value = input[inputIndex][key]; 222 | if ( 223 | widgetHasOwnProperty.call(input[inputIndex], key) && 224 | value !== undefined 225 | ) { 226 | // Clone objects 227 | if ($.isPlainObject(value)) { 228 | target[key] = $.isPlainObject(target[key]) 229 | ? $.widget.extend({}, target[key], value) 230 | : // Don't extend strings, arrays, etc. with objects 231 | $.widget.extend({}, value); 232 | 233 | // Copy everything else by reference 234 | } else { 235 | target[key] = value; 236 | } 237 | } 238 | } 239 | } 240 | return target; 241 | }; 242 | 243 | $.widget.bridge = function (name, object) { 244 | var fullName = object.prototype.widgetFullName || name; 245 | $.fn[name] = function (options) { 246 | var isMethodCall = typeof options === 'string'; 247 | var args = widgetSlice.call(arguments, 1); 248 | var returnValue = this; 249 | 250 | if (isMethodCall) { 251 | // If this is an empty collection, we need to have the instance method 252 | // return undefined instead of the jQuery instance 253 | if (!this.length && options === 'instance') { 254 | returnValue = undefined; 255 | } else { 256 | this.each(function () { 257 | var methodValue; 258 | var instance = $.data(this, fullName); 259 | 260 | if (options === 'instance') { 261 | returnValue = instance; 262 | return false; 263 | } 264 | 265 | if (!instance) { 266 | return $.error( 267 | 'cannot call methods on ' + 268 | name + 269 | ' prior to initialization; ' + 270 | "attempted to call method '" + 271 | options + 272 | "'" 273 | ); 274 | } 275 | 276 | if (!$.isFunction(instance[options]) || options.charAt(0) === '_') { 277 | return $.error( 278 | "no such method '" + 279 | options + 280 | "' for " + 281 | name + 282 | ' widget instance' 283 | ); 284 | } 285 | 286 | methodValue = instance[options].apply(instance, args); 287 | 288 | if (methodValue !== instance && methodValue !== undefined) { 289 | returnValue = 290 | methodValue && methodValue.jquery 291 | ? returnValue.pushStack(methodValue.get()) 292 | : methodValue; 293 | return false; 294 | } 295 | }); 296 | } 297 | } else { 298 | // Allow multiple hashes to be passed on init 299 | if (args.length) { 300 | options = $.widget.extend.apply(null, [options].concat(args)); 301 | } 302 | 303 | this.each(function () { 304 | var instance = $.data(this, fullName); 305 | if (instance) { 306 | instance.option(options || {}); 307 | if (instance._init) { 308 | instance._init(); 309 | } 310 | } else { 311 | $.data(this, fullName, new object(options, this)); 312 | } 313 | }); 314 | } 315 | 316 | return returnValue; 317 | }; 318 | }; 319 | 320 | $.Widget = function (/* options, element */) {}; 321 | $.Widget._childConstructors = []; 322 | 323 | $.Widget.prototype = { 324 | widgetName: 'widget', 325 | widgetEventPrefix: '', 326 | defaultElement: '
', 327 | 328 | options: { 329 | classes: {}, 330 | disabled: false, 331 | 332 | // Callbacks 333 | create: null 334 | }, 335 | 336 | _createWidget: function (options, element) { 337 | element = $(element || this.defaultElement || this)[0]; 338 | this.element = $(element); 339 | this.uuid = widgetUuid++; 340 | this.eventNamespace = '.' + this.widgetName + this.uuid; 341 | 342 | this.bindings = $(); 343 | this.hoverable = $(); 344 | this.focusable = $(); 345 | this.classesElementLookup = {}; 346 | 347 | if (element !== this) { 348 | $.data(element, this.widgetFullName, this); 349 | this._on(true, this.element, { 350 | remove: function (event) { 351 | if (event.target === element) { 352 | this.destroy(); 353 | } 354 | } 355 | }); 356 | this.document = $( 357 | element.style 358 | ? // Element within the document 359 | element.ownerDocument 360 | : // Element is window or document 361 | element.document || element 362 | ); 363 | this.window = $( 364 | this.document[0].defaultView || this.document[0].parentWindow 365 | ); 366 | } 367 | 368 | this.options = $.widget.extend( 369 | {}, 370 | this.options, 371 | this._getCreateOptions(), 372 | options 373 | ); 374 | 375 | this._create(); 376 | 377 | if (this.options.disabled) { 378 | this._setOptionDisabled(this.options.disabled); 379 | } 380 | 381 | this._trigger('create', null, this._getCreateEventData()); 382 | this._init(); 383 | }, 384 | 385 | _getCreateOptions: function () { 386 | return {}; 387 | }, 388 | 389 | _getCreateEventData: $.noop, 390 | 391 | _create: $.noop, 392 | 393 | _init: $.noop, 394 | 395 | destroy: function () { 396 | var that = this; 397 | 398 | this._destroy(); 399 | $.each(this.classesElementLookup, function (key, value) { 400 | that._removeClass(value, key); 401 | }); 402 | 403 | // We can probably remove the unbind calls in 2.0 404 | // all event bindings should go through this._on() 405 | this.element.off(this.eventNamespace).removeData(this.widgetFullName); 406 | this.widget().off(this.eventNamespace).removeAttr('aria-disabled'); 407 | 408 | // Clean up events and states 409 | this.bindings.off(this.eventNamespace); 410 | }, 411 | 412 | _destroy: $.noop, 413 | 414 | widget: function () { 415 | return this.element; 416 | }, 417 | 418 | option: function (key, value) { 419 | var options = key; 420 | var parts; 421 | var curOption; 422 | var i; 423 | 424 | if (arguments.length === 0) { 425 | // Don't return a reference to the internal hash 426 | return $.widget.extend({}, this.options); 427 | } 428 | 429 | if (typeof key === 'string') { 430 | // Handle nested keys, e.g., "foo.bar" => { foo: { bar: ___ } } 431 | options = {}; 432 | parts = key.split('.'); 433 | key = parts.shift(); 434 | if (parts.length) { 435 | curOption = options[key] = $.widget.extend({}, this.options[key]); 436 | for (i = 0; i < parts.length - 1; i++) { 437 | curOption[parts[i]] = curOption[parts[i]] || {}; 438 | curOption = curOption[parts[i]]; 439 | } 440 | key = parts.pop(); 441 | if (arguments.length === 1) { 442 | return curOption[key] === undefined ? null : curOption[key]; 443 | } 444 | curOption[key] = value; 445 | } else { 446 | if (arguments.length === 1) { 447 | return this.options[key] === undefined ? null : this.options[key]; 448 | } 449 | options[key] = value; 450 | } 451 | } 452 | 453 | this._setOptions(options); 454 | 455 | return this; 456 | }, 457 | 458 | _setOptions: function (options) { 459 | var key; 460 | 461 | for (key in options) { 462 | this._setOption(key, options[key]); 463 | } 464 | 465 | return this; 466 | }, 467 | 468 | _setOption: function (key, value) { 469 | if (key === 'classes') { 470 | this._setOptionClasses(value); 471 | } 472 | 473 | this.options[key] = value; 474 | 475 | if (key === 'disabled') { 476 | this._setOptionDisabled(value); 477 | } 478 | 479 | return this; 480 | }, 481 | 482 | _setOptionClasses: function (value) { 483 | var classKey, elements, currentElements; 484 | 485 | for (classKey in value) { 486 | currentElements = this.classesElementLookup[classKey]; 487 | if ( 488 | value[classKey] === this.options.classes[classKey] || 489 | !currentElements || 490 | !currentElements.length 491 | ) { 492 | continue; 493 | } 494 | 495 | // We are doing this to create a new jQuery object because the _removeClass() call 496 | // on the next line is going to destroy the reference to the current elements being 497 | // tracked. We need to save a copy of this collection so that we can add the new classes 498 | // below. 499 | elements = $(currentElements.get()); 500 | this._removeClass(currentElements, classKey); 501 | 502 | // We don't use _addClass() here, because that uses this.options.classes 503 | // for generating the string of classes. We want to use the value passed in from 504 | // _setOption(), this is the new value of the classes option which was passed to 505 | // _setOption(). We pass this value directly to _classes(). 506 | elements.addClass( 507 | this._classes({ 508 | element: elements, 509 | keys: classKey, 510 | classes: value, 511 | add: true 512 | }) 513 | ); 514 | } 515 | }, 516 | 517 | _setOptionDisabled: function (value) { 518 | this._toggleClass( 519 | this.widget(), 520 | this.widgetFullName + '-disabled', 521 | null, 522 | !!value 523 | ); 524 | 525 | // If the widget is becoming disabled, then nothing is interactive 526 | if (value) { 527 | this._removeClass(this.hoverable, null, 'ui-state-hover'); 528 | this._removeClass(this.focusable, null, 'ui-state-focus'); 529 | } 530 | }, 531 | 532 | enable: function () { 533 | return this._setOptions({ disabled: false }); 534 | }, 535 | 536 | disable: function () { 537 | return this._setOptions({ disabled: true }); 538 | }, 539 | 540 | _classes: function (options) { 541 | var full = []; 542 | var that = this; 543 | 544 | options = $.extend( 545 | { 546 | element: this.element, 547 | classes: this.options.classes || {} 548 | }, 549 | options 550 | ); 551 | 552 | function bindRemoveEvent() { 553 | options.element.each(function (_, element) { 554 | var isTracked = $.map(that.classesElementLookup, function (elements) { 555 | return elements; 556 | }).some(function (elements) { 557 | return elements.is(element); 558 | }); 559 | 560 | if (!isTracked) { 561 | that._on($(element), { 562 | remove: '_untrackClassesElement' 563 | }); 564 | } 565 | }); 566 | } 567 | 568 | function processClassString(classes, checkOption) { 569 | var current, i; 570 | for (i = 0; i < classes.length; i++) { 571 | current = that.classesElementLookup[classes[i]] || $(); 572 | if (options.add) { 573 | bindRemoveEvent(); 574 | current = $( 575 | $.uniqueSort(current.get().concat(options.element.get())) 576 | ); 577 | } else { 578 | current = $(current.not(options.element).get()); 579 | } 580 | that.classesElementLookup[classes[i]] = current; 581 | full.push(classes[i]); 582 | if (checkOption && options.classes[classes[i]]) { 583 | full.push(options.classes[classes[i]]); 584 | } 585 | } 586 | } 587 | 588 | if (options.keys) { 589 | processClassString(options.keys.match(/\S+/g) || [], true); 590 | } 591 | if (options.extra) { 592 | processClassString(options.extra.match(/\S+/g) || []); 593 | } 594 | 595 | return full.join(' '); 596 | }, 597 | 598 | _untrackClassesElement: function (event) { 599 | var that = this; 600 | $.each(that.classesElementLookup, function (key, value) { 601 | if ($.inArray(event.target, value) !== -1) { 602 | that.classesElementLookup[key] = $(value.not(event.target).get()); 603 | } 604 | }); 605 | 606 | this._off($(event.target)); 607 | }, 608 | 609 | _removeClass: function (element, keys, extra) { 610 | return this._toggleClass(element, keys, extra, false); 611 | }, 612 | 613 | _addClass: function (element, keys, extra) { 614 | return this._toggleClass(element, keys, extra, true); 615 | }, 616 | 617 | _toggleClass: function (element, keys, extra, add) { 618 | add = typeof add === 'boolean' ? add : extra; 619 | var shift = typeof element === 'string' || element === null, 620 | options = { 621 | extra: shift ? keys : extra, 622 | keys: shift ? element : keys, 623 | element: shift ? this.element : element, 624 | add: add 625 | }; 626 | options.element.toggleClass(this._classes(options), add); 627 | return this; 628 | }, 629 | 630 | _on: function (suppressDisabledCheck, element, handlers) { 631 | var delegateElement; 632 | var instance = this; 633 | 634 | // No suppressDisabledCheck flag, shuffle arguments 635 | if (typeof suppressDisabledCheck !== 'boolean') { 636 | handlers = element; 637 | element = suppressDisabledCheck; 638 | suppressDisabledCheck = false; 639 | } 640 | 641 | // No element argument, shuffle and use this.element 642 | if (!handlers) { 643 | handlers = element; 644 | element = this.element; 645 | delegateElement = this.widget(); 646 | } else { 647 | element = delegateElement = $(element); 648 | this.bindings = this.bindings.add(element); 649 | } 650 | 651 | $.each(handlers, function (event, handler) { 652 | function handlerProxy() { 653 | // Allow widgets to customize the disabled handling 654 | // - disabled as an array instead of boolean 655 | // - disabled class as method for disabling individual parts 656 | if ( 657 | !suppressDisabledCheck && 658 | (instance.options.disabled === true || 659 | $(this).hasClass('ui-state-disabled')) 660 | ) { 661 | return; 662 | } 663 | return (typeof handler === 'string' 664 | ? instance[handler] 665 | : handler 666 | ).apply(instance, arguments); 667 | } 668 | 669 | // Copy the guid so direct unbinding works 670 | if (typeof handler !== 'string') { 671 | handlerProxy.guid = handler.guid = 672 | handler.guid || handlerProxy.guid || $.guid++; 673 | } 674 | 675 | var match = event.match(/^([\w:-]*)\s*(.*)$/); 676 | var eventName = match[1] + instance.eventNamespace; 677 | var selector = match[2]; 678 | 679 | if (selector) { 680 | delegateElement.on(eventName, selector, handlerProxy); 681 | } else { 682 | element.on(eventName, handlerProxy); 683 | } 684 | }); 685 | }, 686 | 687 | _off: function (element, eventName) { 688 | eventName = 689 | (eventName || '').split(' ').join(this.eventNamespace + ' ') + 690 | this.eventNamespace; 691 | element.off(eventName); 692 | 693 | // Clear the stack to avoid memory leaks (#10056) 694 | this.bindings = $(this.bindings.not(element).get()); 695 | this.focusable = $(this.focusable.not(element).get()); 696 | this.hoverable = $(this.hoverable.not(element).get()); 697 | }, 698 | 699 | _delay: function (handler, delay) { 700 | var instance = this; 701 | function handlerProxy() { 702 | return (typeof handler === 'string' 703 | ? instance[handler] 704 | : handler 705 | ).apply(instance, arguments); 706 | } 707 | return setTimeout(handlerProxy, delay || 0); 708 | }, 709 | 710 | _hoverable: function (element) { 711 | this.hoverable = this.hoverable.add(element); 712 | this._on(element, { 713 | mouseenter: function (event) { 714 | this._addClass($(event.currentTarget), null, 'ui-state-hover'); 715 | }, 716 | mouseleave: function (event) { 717 | this._removeClass($(event.currentTarget), null, 'ui-state-hover'); 718 | } 719 | }); 720 | }, 721 | 722 | _focusable: function (element) { 723 | this.focusable = this.focusable.add(element); 724 | this._on(element, { 725 | focusin: function (event) { 726 | this._addClass($(event.currentTarget), null, 'ui-state-focus'); 727 | }, 728 | focusout: function (event) { 729 | this._removeClass($(event.currentTarget), null, 'ui-state-focus'); 730 | } 731 | }); 732 | }, 733 | 734 | _trigger: function (type, event, data) { 735 | var prop, orig; 736 | var callback = this.options[type]; 737 | 738 | data = data || {}; 739 | event = $.Event(event); 740 | event.type = (type === this.widgetEventPrefix 741 | ? type 742 | : this.widgetEventPrefix + type 743 | ).toLowerCase(); 744 | 745 | // The original event may come from any element 746 | // so we need to reset the target on the new event 747 | event.target = this.element[0]; 748 | 749 | // Copy original event properties over to the new event 750 | orig = event.originalEvent; 751 | if (orig) { 752 | for (prop in orig) { 753 | if (!(prop in event)) { 754 | event[prop] = orig[prop]; 755 | } 756 | } 757 | } 758 | 759 | this.element.trigger(event, data); 760 | return !( 761 | ($.isFunction(callback) && 762 | callback.apply(this.element[0], [event].concat(data)) === false) || 763 | event.isDefaultPrevented() 764 | ); 765 | } 766 | }; 767 | 768 | $.each({ show: 'fadeIn', hide: 'fadeOut' }, function (method, defaultEffect) { 769 | $.Widget.prototype['_' + method] = function (element, options, callback) { 770 | if (typeof options === 'string') { 771 | options = { effect: options }; 772 | } 773 | 774 | var hasOptions; 775 | var effectName = !options 776 | ? method 777 | : options === true || typeof options === 'number' 778 | ? defaultEffect 779 | : options.effect || defaultEffect; 780 | 781 | options = options || {}; 782 | if (typeof options === 'number') { 783 | options = { duration: options }; 784 | } 785 | 786 | hasOptions = !$.isEmptyObject(options); 787 | options.complete = callback; 788 | 789 | if (options.delay) { 790 | element.delay(options.delay); 791 | } 792 | 793 | if (hasOptions && $.effects && $.effects.effect[effectName]) { 794 | element[method](options); 795 | } else if (effectName !== method && element[effectName]) { 796 | element[effectName](options.duration, options.easing, callback); 797 | } else { 798 | element.queue(function (next) { 799 | $(this)[method](); 800 | if (callback) { 801 | callback.call(element[0]); 802 | } 803 | next(); 804 | }); 805 | } 806 | }; 807 | }); 808 | }); 809 | -------------------------------------------------------------------------------- /fancy-file-uploader/jquery.fancy-fileupload.js: -------------------------------------------------------------------------------- 1 | // jQuery plugin to display a custom jQuery File Uploader interface. 2 | // (C) 2020 CubicleSoft. All Rights Reserved. 3 | 4 | (function($) { 5 | var EscapeHTML = function(text) { 6 | var map = { 7 | '&': '&', 8 | '<': '<', 9 | '>': '>', 10 | '"': '"', 11 | "'": ''' 12 | }; 13 | 14 | return text.replace(/[&<>"']/g, function(m) { return map[m]; }); 15 | } 16 | 17 | var FormatStr = function(format) { 18 | var args = Array.prototype.slice.call(arguments, 1); 19 | 20 | return format.replace(/{(\d+)}/g, function(match, number) { 21 | return (typeof args[number] != 'undefined' ? args[number] : match); 22 | }); 23 | }; 24 | 25 | var GetDisplayFilesize = function(numbytes, adjustprecision, units) { 26 | if (numbytes == 0) return '0 Bytes'; 27 | if (numbytes == 1) return '1 Byte'; 28 | 29 | numbytes = Math.abs(numbytes); 30 | var magnitude, abbreviations; 31 | if (units && units.toLowerCase() === 'iec_formal') 32 | { 33 | magnitude = Math.pow(2, 10); 34 | abbreviations = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']; 35 | } 36 | else if (units && units.toLowerCase() === 'si') 37 | { 38 | magnitude = Math.pow(10, 3); 39 | abbreviations = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; 40 | } 41 | else 42 | { 43 | magnitude = Math.pow(2, 10); 44 | abbreviations = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; 45 | } 46 | 47 | var pos = Math.floor(Math.log(numbytes) / Math.log(magnitude)); 48 | var result = (numbytes / Math.pow(magnitude, pos)); 49 | 50 | return (pos == 0 || (adjustprecision && result >= 99.995) ? result.toFixed(0) : result.toFixed(2)) + ' ' + abbreviations[pos]; 51 | }; 52 | 53 | var DisplayPreviewDialog = function(preview, endelem, inforow, data, settings) { 54 | var previewbackground = $('
').addClass('ff_fileupload_dialog_background'); 55 | var previewclone = preview.clone(true, true).click(function(e) { 56 | e.stopPropagation(); 57 | }); 58 | var previewdialog = $('
').addClass('ff_fileupload_dialog_main').append(previewclone); 59 | 60 | var HidePreviewDialog = function() { 61 | $(document).off('keyup.fancy_fileupload'); 62 | 63 | previewbackground.remove(); 64 | endelem.focus(); 65 | 66 | if (settings.hidepreview) settings.hidepreview.call(inforow, data, preview, previewclone); 67 | }; 68 | 69 | $(document).on('keyup.fancy_fileupload', function(e) { 70 | if (e.keyCode == 27) { 71 | HidePreviewDialog(); 72 | } 73 | }); 74 | 75 | previewbackground.append(previewdialog).click(function() { 76 | HidePreviewDialog(); 77 | }); 78 | 79 | $('body').append(previewbackground); 80 | previewclone.focus(); 81 | 82 | if (settings.showpreview) settings.showpreview.call(inforow, data, preview, previewclone); 83 | }; 84 | 85 | var InitShowAriaLabelInfo = function(inforow) { 86 | inforow.find('button').hover(function() { 87 | var val = $(this).attr('aria-label'); 88 | 89 | if (val) 90 | { 91 | inforow.find('.ff_fileupload_buttoninfo').text(val).removeClass('ff_fileupload_hidden'); 92 | inforow.find('.ff_fileupload_fileinfo').addClass('ff_fileupload_hidden'); 93 | } 94 | }, function() { 95 | inforow.find('.ff_fileupload_fileinfo').removeClass('ff_fileupload_hidden'); 96 | inforow.find('.ff_fileupload_buttoninfo').addClass('ff_fileupload_hidden'); 97 | }); 98 | }; 99 | 100 | $.fn.FancyFileUpload = function(options) { 101 | this.each(function() { 102 | var $this = $(this); 103 | 104 | // Remove the previous file uploader. 105 | if ($this.data('fancy-fileupload') && typeof($this.data('fancy-fileupload')) === 'object') 106 | { 107 | $this.removeClass('ff_fileupload_hidden'); 108 | 109 | var data = $this.data('fancy-fileupload'); 110 | 111 | data.form.find('input[type=file]').fileupload('destroy'); 112 | data.form.remove(); 113 | data.fileuploadwrap.remove(); 114 | 115 | $this.removeData('fancy-fileupload'); 116 | } 117 | }); 118 | 119 | if (!$('.ff_fileupload_hidden').length) 120 | { 121 | $(document).off('drop.fancy_fileupload dragover.fancy_fileupload'); 122 | $(window).off('beforeunload.fancy_fileupload'); 123 | } 124 | 125 | if (typeof(options) === 'string' && options === 'destroy') return this; 126 | 127 | var settings = $.extend({}, $.fn.FancyFileUpload.defaults, options); 128 | 129 | // Let custom callbacks make last second changes to the finalized settings. 130 | if (settings.preinit) settings.preinit(settings); 131 | 132 | // Prevent default file drag-and-drop operations. 133 | $(document).off('drop.fancy_fileupload dragover.fancy_fileupload'); 134 | $(document).on('drop.fancy_fileupload dragover.fancy_fileupload', function (e) { 135 | e.preventDefault(); 136 | }); 137 | 138 | // Some useful functions. 139 | var Translate = function(str) { 140 | return (settings.langmap[str] ? settings.langmap[str] : str); 141 | }; 142 | 143 | // Prevent the user from leaving the page if there is an active upload. 144 | // Most browsers won't show the custom message. So make the relevant UI elements bounce using CSS. 145 | $(window).on('beforeunload.fancy_fileupload', function(e) { 146 | var active = $('.ff_fileupload_uploading, .ff_fileupload_starting'); 147 | var queued = $('.ff_fileupload_queued'); 148 | 149 | if (active.length || queued.length) 150 | { 151 | active.removeClass('ff_fileupload_bounce'); 152 | setTimeout(function() { active.addClass('ff_fileupload_bounce') }, 250); 153 | 154 | queued.removeClass('ff_fileupload_bounce'); 155 | setTimeout(function() { queued.addClass('ff_fileupload_bounce') }, 250); 156 | 157 | if (active.length) return Translate('There is a file upload still in progress. Leaving the page will cancel the upload.\n\nAre you sure you want to leave this page?'); 158 | if (queued.length) return Translate('There is a file that was added to the queue but the upload has not been started. Leaving the page will clear the queue and not upload the file.\n\nAre you sure you want to leave this page?'); 159 | } 160 | }); 161 | 162 | // Create some extra DOM nodes for preview checking. 163 | var audioelem = document.createElement('audio'); 164 | var videoelem = document.createElement('video'); 165 | 166 | var AddFile = function(uploads, e, data) { 167 | var inforow = $('
'); 168 | var pos = data.files[0].name.lastIndexOf('.'); 169 | var filename = (pos > -1 ? data.files[0].name.substring(0, pos) : data.files[0].name); 170 | var fileext = (pos > -1 ? data.files[0].name.substring(pos + 1).toLowerCase() : ''); 171 | var alphanum = 'abcdefghijklmnopqrstuvwxyz0123456789'; 172 | pos = (fileext == '' ? -1 : alphanum.indexOf(fileext.charAt(0))); 173 | var fileextclass = alphanum.charAt((pos > -1 ? pos : Math.floor(Math.random() * alphanum.length))); 174 | 175 | // Initialize necessary callback options. 176 | data.ff_info = {}; 177 | data.ff_info.errors = []; 178 | data.ff_info.retries = 0; 179 | data.ff_info.retrydelay = settings.retrydelay; 180 | data.ff_info.removewidget = false; 181 | data.ff_info.inforow = inforow; 182 | data.ff_info.displayfilesize = GetDisplayFilesize(data.files[0].size, settings.adjustprecision, settings.displayunits); 183 | data.context = inforow; 184 | 185 | // A couple of functions for handling actions. 186 | var StartUpload = function(e) { 187 | e.preventDefault(); 188 | 189 | // Set filename. 190 | if (settings.edit && !data.ff_info.errors.length) 191 | { 192 | var fileinput = inforow.find('.ff_fileupload_filename input'); 193 | if (fileinput.length) 194 | { 195 | var newfilename = fileinput.val(); 196 | if (fileext != '') newfilename += '.' + fileext; 197 | 198 | inforow.find('.ff_fileupload_filename').text(newfilename); 199 | data.files[0].uploadName = newfilename; 200 | } 201 | } 202 | 203 | // Remove start upload buttons. 204 | inforow.find('button.ff_fileupload_start_upload').remove(); 205 | 206 | // Reset hover status. 207 | inforow.find('.ff_fileupload_fileinfo').removeClass('ff_fileupload_hidden'); 208 | inforow.find('.ff_fileupload_buttoninfo').addClass('ff_fileupload_hidden'); 209 | 210 | // Set the status. 211 | inforow.find('.ff_fileupload_fileinfo').text(data.ff_info.displayfilesize + ' | ' + Translate('Starting upload...')); 212 | 213 | // Display progress bar. 214 | inforow.find('.ff_fileupload_progress_background').removeClass('ff_fileupload_hidden'); 215 | 216 | // Alter remove buttons. 217 | inforow.find('button.ff_fileupload_remove_file').attr('aria-label', Translate('Cancel upload and remove from list')); 218 | 219 | // Begin the actual upload. 220 | inforow.removeClass('ff_fileupload_queued'); 221 | inforow.addClass('ff_fileupload_starting'); 222 | 223 | var SubmitUpload = function() { 224 | inforow.removeClass('ff_fileupload_starting'); 225 | inforow.addClass('ff_fileupload_uploading'); 226 | data.submit(); 227 | }; 228 | 229 | if (settings.startupload) settings.startupload.call(inforow, SubmitUpload, e, data); 230 | else SubmitUpload(); 231 | }; 232 | 233 | var RemoveFile = function(e) { 234 | e.preventDefault(); 235 | 236 | if (inforow.hasClass('ff_fileupload_uploading')) 237 | { 238 | if (!confirm(Translate('This file is currently being uploaded.\n\nStop the upload and remove the file from the list?'))) return; 239 | 240 | data.ff_info.removewidget = true; 241 | data.abort(); 242 | } 243 | else 244 | { 245 | if (inforow.hasClass('ff_fileupload_starting')) 246 | { 247 | if (!confirm(Translate('This file is waiting to start.\n\nCancel the operation and remove the file from the list?'))) return; 248 | 249 | if (settings.uploadcancelled) settings.uploadcancelled.call(data.ff_info.inforow, e, data); 250 | } 251 | 252 | inforow.remove(); 253 | 254 | delete data.ff_info; 255 | } 256 | }; 257 | 258 | data.ff_info.RemoveFile = function() { 259 | if (inforow.hasClass('ff_fileupload_uploading')) 260 | { 261 | data.ff_info.removewidget = true; 262 | data.abort(); 263 | } 264 | else 265 | { 266 | if (inforow.hasClass('ff_fileupload_starting')) 267 | { 268 | if (settings.uploadcancelled) settings.uploadcancelled.call(data.ff_info.inforow, e, data); 269 | } 270 | 271 | inforow.remove(); 272 | 273 | delete data.ff_info; 274 | } 275 | }; 276 | 277 | // Thumbnail preview. 278 | var haspreview = false; 279 | var preview; 280 | var hasimage = false; 281 | if (URL && URL.createObjectURL) 282 | { 283 | var url = URL.createObjectURL(data.files[0]); 284 | if (url) 285 | { 286 | if (data.files[0].type === 'image/gif' || data.files[0].type === 'image/jpeg' || data.files[0].type === 'image/png') 287 | { 288 | inforow.find('.ff_fileupload_preview_image').css('background-image', 'url("' + url + '")'); 289 | 290 | haspreview = true; 291 | preview = $('').attr('src', url); 292 | hasimage = true; 293 | } 294 | else if (data.files[0].type.lastIndexOf('audio/', 0) > -1 && audioelem.canPlayType && audioelem.canPlayType(data.files[0].type)) 295 | { 296 | haspreview = true; 297 | preview = $('