diff --git a/src/js/control/file.fineuploader.js b/src/js/control/file.fineuploader.js deleted file mode 100644 index b4a054c18..000000000 --- a/src/js/control/file.fineuploader.js +++ /dev/null @@ -1,256 +0,0 @@ -import controlText from './text' - -/** - * Fineuploader class - render the fineuploader tool (https://fineuploader.com) in place of the traditional file upload widget - * For assistance with further configuring Fine Uploader in your application, please refer to: - * https://docs.fineuploader.com/branch/master/api/options-ui.html - * - * If you wish to use your own installation of fineuploader, refer to here: - * - https://docs.fineuploader.com/quickstart/01-getting-started.html - * - You can download from here: https://fineuploader.com/customize - * - You can specify the location of your javascript & css in opts.controlConfig.file - * - The 'js' option should point to the jquery.fine-uploader.min.js file (note this is the jQuery plugin version) - * - * E.g. var opts = { - * // other formbuilder options here - * - * controlConfig: { - * 'file.fineuploader': { - * js: '/path/to/jquery.fine-uploader.min.js', - * css: '/path/to.css', - * handler: '/path/to/handler.php', - * - * // other fine uploader configuration options here - * } - * } - * }; - * - * This plugin is by default configured to use the 'Traditional' build, but you can easily reconfigure by passing appropriate Fine Uploader configuration options to controlConfig.file. - * A simple php upload handler endpoint can be found here: https://github.com/FineUploader/php-traditional-server. To use this for your handler, simply set the controlConfig.fineuploader.handler option to be '/path/to/php-traditional-server/endpoint.php' - * - * If you wish to define a custom uploader handler URL, define controlConfig.file.handler in the formbuilder options. Defaults to /upload - * If you wish to define a custom template for the interface, this can be defined in controlConfig.file.template. It defaults to the gallery template provided by the Fineuploader project - * - * @extends control - */ -export default class controlFineUploader extends controlText { - /** - * Class configuration - return the icons & label related to this control - * @return {Object} definition object - */ - static get definition() { - return { - i18n: { - default: 'Fine Uploader', - }, - } - } - - /** - * configure the fineupload default settings & allow for controlConfig options - */ - configure() { - this.js = - this.classConfig.js || - '//cdnjs.cloudflare.com/ajax/libs/file-uploader/5.14.2/jquery.fine-uploader/jquery.fine-uploader.min.js' - this.css = [ - this.classConfig.css || - '//cdnjs.cloudflare.com/ajax/libs/file-uploader/5.14.2/jquery.fine-uploader/fine-uploader-gallery.min.css', - { - type: 'inline', - id: 'fineuploader-inline', - style: ` - .qq-uploader .qq-error-message { - position: absolute; - left: 20%; - top: 20px; - width: 60%; - color: #a94442; - background: #f2dede; - border: solid 1px #ebccd1; - padding: 15px; - line-height: 1.5em; - text-align: center; - z-index: 99999; - } - .qq-uploader .qq-error-message span { - display: inline-block; - text-align: left; - }`, - }, - ] - this.handler = this.classConfig.handler || '/upload' - const deleteKeys = ['js', 'css', 'handler'] - deleteKeys.forEach(key => delete this.classConfig[key]) - - // fineuploader template that needs to be defined for the UI - const template = - this.classConfig.template || - ` - ` - this.fineTemplate = $('
') - .attr('id', 'qq-template') - .html(template) - } - - /** - * build a div DOM element with id - * @return {Object} DOM Element to be injected into the form. - */ - build() { - this.input = this.markup('input', null, { type: 'hidden', name: this.config.name, id: this.config.name }) - this.wrapper = this.markup('div', '', { id: this.config.name + '-wrapper' }) - return [this.input, this.wrapper] - } - - /** - * onRender callback - */ - onRender() { - const wrapper = $(this.wrapper) - const input = $(this.input) - - // we need to know where the server handler file located. I.e. where to we send the upload POST to? - // to set this, define controlConfig.file.handler in the formbuilder options - // defaults to '/upload' - - // deep copy merge in passed class configuration over any conflicting defaults - const config = jQuery.extend( - true, - { - request: { - endpoint: this.handler, - }, - deleteFile: { - enabled: true, - endpoint: this.handler, - }, - chunking: { - enabled: true, - concurrent: { - enabled: true, - }, - success: { - endpoint: this.handler + (this.handler.indexOf('?') == -1 ? '?' : '&') + 'done', - }, - }, - resume: { - enabled: true, - }, - retry: { - enableAuto: true, - showButton: true, - }, - callbacks: { - onError: (id, name, errorReason) => { - if (errorReason.slice(-1) != '.') { - errorReason += '.' - } - const error = $('
') - .addClass('qq-error-message') - .html(`Error processing upload: ${name}.
Reason: ${errorReason}
`) - .prependTo(wrapper.find('.qq-uploader')) - const removeErrorTimeout = window.setTimeout(() => { - error.fadeOut(() => { - error.remove() - window.clearTimeout(removeErrorTimeout) - }) - }, 6000) - return id - }, - onStatusChange: (id, oldStatus, newStatus) => { - const uploads = wrapper.fineUploader('getUploads') - - // retrieve an array of successfully uploaded filenames - const successful = [] - for (const upload of uploads) { - if (upload.status != 'upload successful') { - continue - } - successful.push(upload.name) - } - input.val(successful.join(', ')) - return { id, oldStatus, newStatus } - }, - }, - template: this.fineTemplate, - }, - this.classConfig, - ) - wrapper.fineUploader(config) - } -} - -// register fineuploader as a subtype to the 'file' type control (defined in text.js) -// also register the default file uploader as a subtype too so it appears in the dropdown -controlText.register('file', controlText, 'file') -controlText.register('fineuploader', controlFineUploader, 'file') diff --git a/src/js/control/index.js b/src/js/control/index.js index 3b8929221..21de29d73 100644 --- a/src/js/control/index.js +++ b/src/js/control/index.js @@ -5,7 +5,6 @@ import controlHidden from './hidden' import controlParagraph from './paragraph' import controlSelect from './select' import controlText from './text' -import controlFineUploader from './file.fineuploader' import controlTextarea from './textarea' import controlTinymce from './textarea.tinymce' import controlQuill from './textarea.quill' @@ -18,7 +17,6 @@ export default { controlParagraph, controlSelect, controlText, - controlFineUploader, controlTextarea, controlTinymce, controlQuill, diff --git a/src/js/form-builder.js b/src/js/form-builder.js index c5efc7bb4..14fafea7f 100644 --- a/src/js/form-builder.js +++ b/src/js/form-builder.js @@ -439,7 +439,7 @@ function FormBuilder(opts, element, $) { ], text: defaultAttrs.concat(['subtype', 'maxlength']), date: defaultAttrs.concat(['subtype','min', 'max', 'step']), - file: defaultAttrs.concat(['subtype', 'multiple']), + file: defaultAttrs.concat(['multiple']), header: ['label', 'subtype', 'className', 'access'], hidden: ['name', 'value', 'access'], paragraph: ['label', 'subtype', 'className', 'access'],