{: .page-header }
## UI
Fine Uploader [UI mode](../modes/ui.html) has a few different options as well as some options
pertaining specifically to the UI which [core mode](../modes/core.html) does not have.
Any options that exist in Core mode also exist in UI mode, and, in most cases,
can be overridden.
{% endmarkdown %}
{{ api_option("element", "element", "Container element for the default drop zone", "HTMLElement", "null") }}
{{ api_option("listElement", "listElement", "Container element for the item list.", "HTMLElement", "null") }}
{{ api_option("multiple", "multiple", "When `false` this will prevent the user from simultaneously selecting or dropping more than one item. Dropping or selecting another item will clear the upload list. If another is already uploading, it will be canceled. To ignore rather than cancel, simply return `false` in the 'validate' or 'submit' event handlers.", "Boolean", "true") }}
{{ api_option("showMessage", "showMessage", "Provide a function here to display a message to the user when the uploader receives an error or the user attempts to leave the page. The provided function may return a promise if one wishes to do asynchronous work whilst waiting for user input.", "Function", "function(message) { window.alert(message); }") }}
{{ api_option("showConfirm", "showConfirm", "Provide a function here to prompt the user to confirm deletion of a file. The provided function may return a promise if one wishes to do asynchronous work whilst waiting for user input.", "Function", "function(message) { window.confirm(message); }") }}
{{ api_option("showPrompt", "showPrompt", "Provide a function here to prompt the user for a filename when pasting file(s). The provided function may return a promise if one wishes to do asynchronous work whilst waiting for user input.", "Function", "function(message, defaultValue) { window.prompt(message, defaultValue); }") }}
{{ api_option("template", "template", "This points to the container element that contains the template to use for one or more Fine Uploader UI instances. You can either specify a string, which is the element ID (the ID of the container element on the page) or an `Element` that points to the container element.", "String or Element", "qq-template") }}
{{ api_parent_option("deleteFile", "deleteFile",
"This section defines UI specific options for [the core `deleteFile` option](options.html#deleteFile).",
(
("deleteFile.confirmMessage", "confirmMessage", "The message displayed in the confirm delete dialog.", "String", "Are you sure you want to delete {filename}?",),
("deleteFile.deletingFailedText", "deletingFailedText", "The status message to appear next to a file that has failed to delete.", "String", "Delete failed",),
("deleteFile.deletingStatusText", "deletingStatusText", "The status message to appear next to a file that is pending deletion.", "String", "Deleting...",),
("deleteFile.forceConfirm", "forceConfirm", "If this value is set to `true`, the user will be required to confirm the file delete request via a confirmation dialog.", "Boolean", "false",),
)
)}}
{{ api_parent_option("display", "display", "",
(
("display.fileSizeOnSubmit", "fileSizeOnSubmit", "Enable or disable the display of the file size next to the file after it has been submitted.", "Boolean", "false",),
("display.prependFiles", "prependFiles", "When `true` batches of files are added to the top of the UI's file list. The default is to append file(s) to the bottom of the list.", "Boolean", "false",),
)
)}}
{{ api_parent_option("dragAndDrop", "dragAndDrop", "",
(
("dragAndDrop.extraDropzones", "extraDropzones", "Designate additional drop zones for file input.", "Array", "[]",),
("dragAndDrop.reportDirectoryPaths", "reportDirectoryPaths", "Include the path of dropped files (starting with the top-level dropped directory). This value will be sent along with the request as a qqpath parameter.", "Boolean", "false",),
)
)}}
{{ api_parent_option("failedUploadTextDisplay", "failedUploadTextDisplay", "",
(
("failedUploadTextDisplay.enableTooltip", "enableTooltip", "Enable or disable a tooltip that will display the full contents of the error message when the mouse pointer hovers over the failed item.", "Boolean", "true",),
("failedUploadTextDisplay.mode", "mode", "Set the message to display next to each failed file. One of: `'default'` which displays the `failedUploadText`, `'custom'` which displays the error response from the server, or `'none'` which displays no text.", "String", "default",),
("failedUploadTextDisplay.responseProperty", "responseProperty", "The property from the server response that contains the error text to display next to a failed item. Ignored unless `mode` is `'custom'`", "String", "error",),
)
)}}
{{ api_parent_option("messages", "messages", "",
(
("messages.tooManyFilesError", "tooManyFilesError", "Text sent to [`showMessage`](#showMessage) when `multiple` is `false` and more than one file is dropped at once.", "String", "You may only drop one file.",),
("messages.unsupportedBrowser", "unsupportedBrowser", "Text displayed to users who have ancient browsers.", "String", "Unrecoverable error - the browser does not permit uploading of any kind.",),
)
)}}
{{ alert(
"""`messages` is also in the Core mode options. This section defines UI specific
options for `messages`""", "info", "Note:") }}
{{ api_parent_option("retry", "retry", "This section defines UI specific options for [the core `retry` option](options.html#retry)",
(
("retry.autoRetryNote", "autoRetryNote", "The text of the note that will optionally appear next to the item during automatic retry attempts. Ignored if `showAutoRetryNote` is false.", "String", "Retrying {retryNum}/{maxAuto} ...",),
("retry.showButton", "showButton", "Enable or disable the showing of a button/link next to the failed item after all retry attempts have been exhausted. Clicking the button/link will force the uploader to make another attempt.", "Boolean", "false",),
("retry.showAutoRetryNote", "showAutoRetryNote", "Enable or disable a status message appearing next to the item during auto retry attempts.", "Boolean", "true",),
)
)}}
{{ api_parent_option("thumbnails", "thumbnails", "",
(
("thumbnails.customResizer", "customResizer", """Ignored if the current browser does not [support image previews](../browser-support.html). If you want to use an alternate library to resize the image, you must contribute a function for this option that returns a `Promise`. Once the resize is complete, your promise must be fulfilled. You may, of course, reject your returned `Promise` is the resize fails in some way.
A `resizeInfo` object, which will be passed to the supplied function, contains the following properties:
* `blob` - The original `File` or `Blob` object, if available.
* `height` - Desired height of the image after the resize operation.
* `image` - The original `HTMLImageElement` object, if available.
* `sourceCanvas` - `HTMLCanvasElement` element containing the original image data (not resized).
* `targetCanvas` - `HTMLCanvasElement` element containing the `HTMLCanvasElement` that should contain the resized image.
* `width` - Desired width of the image after the resize operation.
",
"Function", "undefined"),
("thumbnails.maxCount", "maxCount", "Maximum number of previews to render per Fine Uploader instance. A call to the reset method resets this value as well.", "Integer", "0",),
("thumbnails.timeBetweenThumbs", "timeBetweenThumbs", "The amount of time, in milliseconds, to pause between each preview generation process. This is in place to prevent the UI thread from locking up for a continuously long period of time, as preview generation can be a resource-intensive process.", "Integer", "750",),
)
)}}
{{ api_parent_option("thumbnails.placeholders", "thumbnails.placeholders", "",
(
("thumbnails.placeholders.notAvailablePath", "notAvailablePath", "Absolute URL or relative path to the image to display if the preview/thumbnail could not be generated/displayed.", "String", "null",),
("thumbnails.placeholders.waitingPath", "waitingPath", "Absolute URL or relative path to the image to display during preview generation (modern browsers) or until the server response has been parsed (older browsers).", "String", "null",),
("thumbnails.placeholders.waitUntilResponse", "waitUntilResponse", "Set this to `true` if you want the 'waiting' placeholder image to remain in place until the server response has been parsed. This is useful if you expect to return thumbnail URLs in your upload responses for files types that cannot be previewed. This option is ignored in older browsers where client-side previews cannot be generated.", "Boolean", "false",),
)
)}}
{{ api_parent_option("paste", "paste", "",
(
("paste.namePromptMessage", "namePromptMessage", "Text that will appear in [the `showPrompt` dialog](#showPrompt).", "String", "Please name this image",),
("paste.promptForName", "promptForName", "Enable or disable the usage of [`showPrompt`](#showPrompt) by Fine Uploader to prompt the user for a filename for a pasted file.", "Boolean", "false",),
)
)}}
{{ api_parent_option("scaling", "scaling", "See the [Upload Scaled Images feature page](../features/scaling.html) for more details.",
(
("scaling.failureText", "failureText", "Text that will appear next to a scaled image that could not be generated. This is in addition to the behavior associated with this property provided by Fine Uploader Core.", "String", "Failed to scale",),
("scaling.hideScaled", "hideScaled", "Set this to true if you do not want any scaled images to be displayed in the file list.", "Boolean", "false",),
)
)
}}
{{ api_parent_option("text", "text", "",
(
("text.failUpload", "failUpload", "Text that appears next to a failed item", "String", "Upload failed",),
("text.formatProgress", "formatProgress", "Appears next to a currently uploading item", "String", "{percent}% of {total_size}",),
("text.paused", "paused", "Appears next to a paused item", "String", "Paused",),
("text.waitingForResponse", "waitingForResponse", "Appears next to item once the last bytes have been sent (differs on the user-agent)", "String", "Processing...",),
)
)}}
{% endblock %}
================================================
FILE: docs/api/options.jmd
================================================
{% extends "_templates/base.html" %}
{% set page_title = "Core Options" %}
{% block sidebar %}
{% endblock %}
{% block js_head %}
{% endblock %}
{% block js_footer %}
{% endblock %}
{% block content %}
{% markdown %}
[forms]: ../features/forms.html
# Options Core {: .page-header }
Fine Uploader has a **plethora** of options. Many of these options change meaning
depending on what sort of uploader you are using. Pay close attention to the
mode you are in and keep that in mind when determining the meaning of a particular option.
## Core
{% endmarkdown %}
{{ api_option("autoUpload", "autoUpload", "Set to `false` if you want to be able to upload queued items later by calling the [`uploadStoredFiles()` method](methods.html#uploadStoredFiles).", "Boolean", "true") }}
{{ api_option("button", "button", "Specify an element to use as the 'select files' button. [Cannot be a `
{% endblock %}
================================================
FILE: docs/api/qq.jmd
================================================
{% extends "_templates/base.html" %}
{% set page_title = "qq API" %}
{% block content %}
{% markdown %}
# Utilities {: .page-header }
Fine Uploader contains a number of utility functions and shims to keep
it dependency free and lightweight. These functions are found in the same
namespace as Fine Uploader, `qq`.
## qQuery
The qQuery object is much like a poor man's jQuery. If you cannot or do not
want to import a 3rd-party library such as jQuery or Zepto to do cross-browser
DOM manipulation, then qQuery will be your friend.
{% endmarkdown %}
{{
api_method("qq", "qq (element)",
"""Selects an `HTMLElement` and returns a `qq` 'wrapped object.'
""",
[
{
"name": "element",
"type": "HTMLElement",
"description": "A HTML element."
},
],
[
{
"type": "qq instance",
"description": "A wrapped DOM object with a variety of cross-browser shims as methods."
},
])
}}
{% markdown %}
`qq` functions similar to the `jQuery` function in terms of the operations
it can perform. For now, though, `qq` only accepts `HTMLElements` as input.
To be able to use the `qq` methods, first one must wrap some `HTMLElement`
in the `qq` function as such:
For example, if you wanted to hide an element with the id of "myDiv":
```javascript
var myDiv, qqMyDiv;
myDiv = document.getElementById("myDiv");
qqMyDiv = qq(myDiv);
// Now we can call other qq methods:
qqMyDiv.hide();
var children = qqMyDiv.children();
// etc ...
```
Once you've wrapped an element, you have access to a wealth of cross-browser
shims that will let you manipulate the DOM and CSS as you please. Just make
sure to wrap any elements before calling these methods on them.
### DOM Selection and Traversal
{% endmarkdown %}
{{ api_method("qq.children", "children (element)", "Returns an array of all immediate children of this element.",
[
{
"name": "element",
"type": "HTMLElement",
"description": "An HTMLElement or an already wrapped `qq` object."
}
],
[
{
"type": "Array",
"description": "An array of HTMLElements who are children of the `element` parameter."
}
]) }}
{{ api_method("qq.contains", "contains (element)", "Returns `true` if the element contains the passed element.",
[
{
"name": "element",
"type": "HTMLElement",
"description": "An HTMLElement or an already wrapped `qq` object."
}
],
[
{
"type": "Boolean",
"description": "The result of the contains test."
}
]
) }}
{{ api_method("qq.hasAttribute", "hasAttribute (attributeName)", "Returns `true` if the attribute exists on the element and the value of the attribute is not 'false' case-insensitive.",
[
{
"name": "attributeName",
"type": "String",
"description": "An attribute to test for."
}
],
[
{
"type": "Boolean",
"description": "The result of the `hasAttribute` test."
}
]) }}
{% markdown %}
### DOM Manipulation
{% endmarkdown %}
{{ api_method("qq.clearText", "clearText ()", "Clears all text for this element") }}
{{ api_method("qq.insertBefore", "insertBefore (element)", "Inserts the element directly before the passed element in the DOM.",
[
{
"name": "element",
"type": "HTMLElement",
"description:": "The element that will be inserted."
}
]) }}
{{ api_method("qq.remove", "remove ()", "Removes the element from the DOM.") }}
{{ api_method("qq.setText", "setText (text)", "Sets the inner text for this element.",
[
{
"name": "text",
"type": "String",
"description": "The text to set."
}
]) }}
{% markdown %}
### CSS Operations
{% endmarkdown %}
{{ api_method("qq.addClass", "addClass (className)", "Add a class to this element.",
[
{
"name": "className",
"type": "String",
"description": "The name of the class to add to the element."
}
]) }}
{{ api_method("qq.css", "css (styles)", "Add CSS style(s) to this element.",
[
{
"name": "styles",
"type": "Object",
"description": "An object with styles to apply to this element."
}
],
[
{
"type": "Object",
"description": "Returns the current context to allow method chaining."
}
]
) }}
{{ api_method("qq.getByClass", "getByClass (className)", "Returns an array of all descendants of this element that contain a specific class name.",
[
{
"name": "className",
"type": "String",
"description": "The name of the class to look for in each element."
}
],
[
{
"type": "Array",
"description": "An array of `HTMLElements`"
}
]) }}
{{ api_method("qq.hasClass", "hasClass (className)", "Returns `true` if the element has the class name",
[
{
"name": "className",
"type": "String",
"description": "The name of the class to look for in each element."
}
],
[
{
"type": "Boolean",
"description": "Result of the `hasClass` test"
}
]) }}
{{ api_method("qq.hide", "hide ()", "Hide this element.",
[],
[
{
"type": "Object",
"description": "Returns the current context to allow method chaining."
}
]
) }}
{{ api_method("qq.removeClass", "removeClass (className)", "Remove the provided class from the element",
[
{
"name": "className",
"type": "String",
"description": "The name of the class to look for in each element."
}
],
[
{
"type": "Object",
"description": "Returns the current context to allow method chaining."
}
]
)
}}
{% markdown %}
### Event Attaching and Detaching
{% endmarkdown %}
{{ api_method("qq.attach", "attach (event, handler)", "Attach an event handler to this element for a specific DOM event.",
[
{
"name": "event",
"type": "String",
"description": "A valid `DOM Event`"
},
{
"name": "handler",
"type": "Function",
"description": "A function that will be invoked whenever the respective event occurs"
},
],
[
{
"type": "Function",
"description": "Call this function to detach the event."
}
])}}
{{ api_method("qq.detach", "detach (event, originalHandler)", "Detach an already attached event handler from this element for a specific DOM event.",
[
{
"name": "event",
"type": "String",
"description": "A valid `DOM Event`"
},
{
"name": "originalHandler",
"type": "Function",
"description": "A function that will be detached from this event."
},
],
[
{
"type": "Object",
"description": "Returns the current context to allow method chaining."
}
]
)}}
{% markdown %}
## Utility Functions
{% endmarkdown %}
{{ api_method("qq.bind", "bind (oldFunc, context)", "Shim for `Function.prototype.bind`. Creates a new function that, when called, has its `this` keyword set to the provided `context`. Pass comma-separated values after the `context parameter for all arguments to be passed into the new function (when invoked). you can still pass in additional arguments during invocation.",
[
{
"name": "oldFunc",
"type": "Function",
"description": "The function that will be bound to."
},
{
"name": "context",
"type": "Object",
"description": "The context the function will assume."
},
],
[
{
"type": "Function",
"description": "A new function, same as the old one, but bound to the passed in`context`."
}
]) }}
{{ api_method("qq.each", "each (iterable, callback)", "Iterates through a collection, passing the key and value into the provided callback. `return false;` to stop iteration.",
[
{
"name": "iterable",
"type": "Array or Object",
"description": "The array or object containing items/properties to loop through."
},
{
"name": "callback",
"type": "Function",
"description": "A function that will be called for each item returned by looping through the iterable. This function takes an index and an item."
}
]) }}
{{ api_method("qq.extend", "extend (firstObj, secondObj[, extendNested])", "Shallowly copies the parameters of `secondobj` to `firstobj`. if `extendnested` is true then a deep-copy is performed.",
[
{
"name": "firstObj",
"type": "Object",
"description": "The object to copy parameters to."
},
{
"name": "secondObj",
"type": "Object",
"description": "The object to copy parameters from."
},
{
"name": "extendNested",
"type": "Boolean",
"description": "If `true` then a deep-copy is performed, else a shallow copy."
},
],
[
{
"type": "Object",
"description": "The new object created by the extension."
}
]) }}
{{ api_method("qq.format", "format (message)", "Returns a string, swapping argument values with the associated occurrence of {} in the passed string.",
[
{
"name": "message",
"type": "String",
"description": ""
}
],
[
{
"type": "String",
"description": "The formatted string"
}
]) }}
{{ api_method("qq.getextension", "getExtension (filename)", "Return the extension for the filename, if any.", [ { "name": "filename", "type": "String", "description": "The file's name to rip the extension off of." } ],
[ { "type": "String", "description": "The new filename" }] )}}
{{ api_method("qq.getUniqueId ()", "getUniqueId", "Returns a version4 uuid", [],
[ { "type": "String", "description": "A version 4 unique identifier" } ]) }}
{{ api_method("qq.indexof", "indexOf (array, item[, startingIndex])", "Returns the index of `item` in the `Array` starting the search from `startingindex`.",
[
{
"name": "array",
"type": "Array",
"description": ""
},
{
"name": "item",
"type": "Object",
"description": ""
},
{
"name": "startingIndex",
"type": "Integer",
"description": ""
}
],
[
{
"type": "Integer",
"description": "The index of `item` in the array."
}
]) }}
{{ api_method("qq.isfunction", "isFunction (func)", "`true` if the parameter is a function.",
[ { "name": "func", "type": "Object", "description": "The Object to test." } ],
[ { "type": "Boolean", "description": "The result of the `isfunction` test." } ]) }}
{{ api_method("qq.isobject", "isObject (obj)", "`true` if the parameter is a 'simple' object.",
[ { "name": "obj", "type": "Object", "description": "The 'thing' to test."}],
[ { "type": "Boolean", "description": "Result of the `isobject` test" }]) }}
{{ api_method("qq.isstring", "isString (str)", "`true` if the parameter is a string.",
[ { "name": "str", "type": "Object", "description": "The Object to test" } ],
[ { "type": "Boolean", "description": "The result of the `isstring` test." } ]) }}
{{ api_method("qq.log", "log (logMessage[, logLevel])", "Log a message to the console. no-op if console logging is not supported. shim for `console.log`.",
[ { "name": "logmessage", "type": "String", "description": "The message to log." },
{ "name": "logLevel", "type": "String", "description": "The logging level, such as 'warn' and 'info'. If `null`, then 'info' is assumed." } ]) }}
{{ api_method("qq.preventdefault", "preventDefault (event)", "Prevent the browser's default action on an event.",
[
{
"name": "event",
"type": "String",
"description": "The name of the default event to prevent."
}
]) }}
{{ api_method("qq.toelement", "toElement (str)", "Creates and returns a new `
[](https://travis-ci.org/FineUploader/fine-uploader)
[](https://www.npmjs.com/package/fine-uploader)
[](https://cdnjs.com/libraries/file-uploader)
[](LICENSE)
[](https://twitter.com/fineuploader)
[**Documentation**](http://docs.fineuploader.com) |
[**Examples**](http://fineuploader.com/demos) |
[**Support**](../../issues) |
[**Blog**](http://blog.fineuploader.com/) |
[**Changelog**](../../releases)
---
Fine Uploader is:
- Cross-browser
- Dependency-free
- 100% JavaScript
- 100% Free Open Source Software
FineUploader is also simple to use. In the simplest case, you only need to include one JavaScript file.
There are absolutely no other required external dependencies. For more information, please see the [**documentation**](http://docs.fineuploader.com).
## Contributing
If you'd like to help and keep this project strong and relevant, you have several options.
### Help us pay the bills
Fine Uploader is currently looking for a sponsor to pay the AWS bills (which have recently lapsed).
These add up to about $40/month. Please open an issue if you are interesting in becoming a sponsor.
We will happily list you as sponsor on the site and README.
### File a bug report
If you see something that isn't quite right, whether it be in the code, or on the docs site, or even on FineUploader.com (which is hosted on GitHub), _please_ file a bug report. Be sure to make sure the [bug hasn't already been filed][issues] by someone else. If it has, feel free to upvote the issue and/or add your comments.
### Join the team
Are you interested in working on a very popular JavaScript-based file upload library with countless users? If you're strong in JavaScript, HTML, and CSS, and have a desire to help push the FOSS movement forward, let us know! The project can always use more experts.
### Help spread the word
Are you using Fine Uploader in your library or project? If so, let us know and we may add a link to your project or application _and_ your logo to FineUploader.com. If you care to write an article about Fine Uploader, we would be open to reading and publicizing it through our site, blog, or Twitter feed.
### Develop an integration library
Are you using Fine Uploader inside of a larger framework (such as React, Angular2, Ember.js, etc)? If so, perhaps you've already written a library that wraps Fine Uploader and makes it simple to use Fine Uploader in this context. Let us know and it may make sense to either link to your library, or even move it into the FineUploader GitHub organization (with your approval, of course). We'd also love to see libraries that make it simple to pair Fine Uploader with other useful libraries, such as image editors and rich text editors.
### Contribute code
The best way to contribute code is to open up a pull request that addresses one of the open [feature requests or bugs][issues]. In order to get started developing Fine Uploader, read this entire section to get the project up and running on your local development machine. This section describes how you can build and test Fine Uploader locally. You may use these instructions to build a copy for yourself, or to contribute changes back to the library.
#### Setup
You must have Node.js instaled locally (any version should be fine), _and_ you must have Unix-like environment to work with. Linux, FreeBSD/OS X, Cygwin, and Windows 10 bash all _should_ be acceptable environments. Please open up a new issue if you have trouble building. The build process is centered around a single Makefile, so GNU Make is required as well (though most if not all Unix-like OSes should already have this installed). Finally, you will need a git client.
To pull down the project & build dependencies:
1. Download the project repository: `git clone https://github.com/FineUploader/fine-uploader.git`.
2. Install all project development dependencies: `npm install`.
#### Generating build artifacts
- To build all build artifacts for all endpoint types: `make build`. You can speed this process up a bit by using the parallel recipes feature of Make: `make build -j`. If you would like to build only a specific endpoint type, see the Makefile for the appropriate recipe. The build output will be created in the `_build` directory.
- To build zip files for all endpoint types: `make zip`. To build a zip for only a specific endpoint type, see the Makefile for the appropriate recipe. The zip files will be included alongside the build output in the `_build` directory.
- To rev the version number: `make rev-version target=NEW_VERSION`, where `NEW_VERSION` is the semver-compatible target version identifier.
#### Running tests
To build, run the tests & linter: `npm test` (you'll need Firefox installed locally).
#### Commiting new code and changes
- Follow the [Angular.js commit guidelines][angular-commit].
- Follow the [Git Flow][git-flow] branching strategy.
[angular-commit]: https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#commit
[git-flow]: http://nvie.com/posts/a-successful-git-branching-model/
[issues]: https://github.com/FineUploader/fine-uploader/issues
================================================
FILE: client/README.md
================================================
Do not add files from this directory into your project. Please visit the
downloads page for zips that contain combined and version-stamped javascript
and css files, along with all required resources.
# Download
To download a pre-packaged version of Fine Uploader visit: http://fineuploader.com/downloads.html
# Build
For instructions on building your own packaged version of Fine Uploader visit: http://docs.fineuploader.com/contributing.htm
================================================
FILE: client/commonJs/all.js
================================================
"use strict";
module.exports = require("../all.fine-uploader/all.fine-uploader");
================================================
FILE: client/commonJs/azure.js
================================================
"use strict";
module.exports = require("../azure.fine-uploader/azure.fine-uploader");
================================================
FILE: client/commonJs/core/all.js
================================================
"use strict";
module.exports = require("../../all.fine-uploader/all.fine-uploader.core");
================================================
FILE: client/commonJs/core/azure.js
================================================
"use strict";
module.exports = require("../../azure.fine-uploader/azure.fine-uploader.core");
================================================
FILE: client/commonJs/core/index.js
================================================
"use strict";
module.exports = require("../../fine-uploader/fine-uploader.core");
================================================
FILE: client/commonJs/core/s3.js
================================================
"use strict";
module.exports = require("../../s3.fine-uploader/s3.fine-uploader.core");
================================================
FILE: client/commonJs/core/traditional.js
================================================
"use strict";
module.exports = require("../../fine-uploader/fine-uploader.core");
================================================
FILE: client/commonJs/dnd.js
================================================
"use strict";
module.exports = require("../dnd/dnd");
================================================
FILE: client/commonJs/jquery/azure.js
================================================
"use strict";
module.exports = require("../../azure.jquery.fine-uploader/azure.jquery.fine-uploader");
================================================
FILE: client/commonJs/jquery/s3.js
================================================
"use strict";
module.exports = require("../../s3.jquery.fine-uploader/s3.jquery.fine-uploader");
================================================
FILE: client/commonJs/jquery/traditional.js
================================================
"use strict";
module.exports = require("../../jquery.fine-uploader/jquery.fine-uploader");
================================================
FILE: client/commonJs/s3.js
================================================
"use strict";
module.exports = require("../s3.fine-uploader/s3.fine-uploader");
================================================
FILE: client/commonJs/traditional.js
================================================
"use strict";
module.exports = require("../fine-uploader/fine-uploader");
================================================
FILE: client/fine-uploader-gallery.css
================================================
/* ---------------------------------------
/* Fine Uploader Gallery View Styles
/* ---------------------------------------
/* Buttons
------------------------------------------ */
.qq-gallery .qq-btn
{
float: right;
border: none;
padding: 0;
margin: 0;
box-shadow: none;
}
/* Upload Button
------------------------------------------ */
.qq-gallery .qq-upload-button {
display: inline;
width: 105px;
padding: 7px 10px;
float: left;
text-align: center;
background: #00ABC7;
color: #FFFFFF;
border-radius: 2px;
border: 1px solid #37B7CC;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.37) inset,
1px 0 1px rgba(255, 255, 255, 0.07) inset,
0 1px 0 rgba(0, 0, 0, 0.36),
0 -2px 12px rgba(0, 0, 0, 0.08) inset
}
.qq-gallery .qq-upload-button-hover {
background: #33B6CC;
}
.qq-gallery .qq-upload-button-focus {
outline: 1px dotted #000000;
}
/* Drop Zone
------------------------------------------ */
.qq-gallery.qq-uploader {
position: relative;
min-height: 200px;
max-height: 490px;
overflow-y: hidden;
width: inherit;
border-radius: 6px;
border: 1px dashed #CCCCCC;
background-color: #FAFAFA;
padding: 20px;
}
.qq-gallery.qq-uploader:before {
content: attr(qq-drop-area-text) " ";
position: absolute;
font-size: 200%;
left: 0;
width: 100%;
text-align: center;
top: 45%;
opacity: 0.25;
filter: alpha(opacity=25);
}
.qq-gallery .qq-upload-drop-area, .qq-upload-extra-drop-area {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-height: 30px;
z-index: 2;
background: #F9F9F9;
border-radius: 4px;
text-align: center;
}
.qq-gallery .qq-upload-drop-area span {
display: block;
position: absolute;
top: 50%;
width: 100%;
margin-top: -8px;
font-size: 16px;
}
.qq-gallery .qq-upload-extra-drop-area {
position: relative;
margin-top: 50px;
font-size: 16px;
padding-top: 30px;
height: 20px;
min-height: 40px;
}
.qq-gallery .qq-upload-drop-area-active {
background: #FDFDFD;
border-radius: 4px;
}
.qq-gallery .qq-upload-list {
margin: 0;
padding: 10px 0 0;
list-style: none;
max-height: 450px;
overflow-y: auto;
clear: both;
box-shadow: none;
}
/* Uploaded Elements
------------------------------------------ */
.qq-gallery .qq-upload-list li {
display: inline-block;
position: relative;
max-width: 120px;
margin: 0 25px 25px 0;
padding: 0;
line-height: 16px;
font-size: 13px;
color: #424242;
background-color: #FFFFFF;
border-radius: 2px;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.22);
vertical-align: top;
/* to ensure consistent size of tiles - may need to change if qq-max-size attr on preview img changes */
height: 186px;
}
.qq-gallery .qq-upload-spinner,
.qq-gallery .qq-upload-size,
.qq-gallery .qq-upload-retry,
.qq-gallery .qq-upload-failed-text,
.qq-gallery .qq-upload-delete,
.qq-gallery .qq-upload-pause,
.qq-gallery .qq-upload-continue {
display: inline;
}
.qq-gallery .qq-upload-retry:hover,
.qq-gallery .qq-upload-delete:hover,
.qq-gallery .qq-upload-pause:hover,
.qq-gallery .qq-upload-continue:hover {
background-color: transparent;
}
.qq-gallery .qq-upload-delete,
.qq-gallery .qq-upload-pause,
.qq-gallery .qq-upload-continue,
.qq-gallery .qq-upload-cancel {
cursor: pointer;
}
.qq-gallery .qq-upload-delete,
.qq-gallery .qq-upload-pause,
.qq-gallery .qq-upload-continue {
border:none;
background: none;
color: #00A0BA;
font-size: 12px;
padding: 0;
}
/* to ensure consistent size of tiles - only display status text before auto-retry or after failure */
.qq-gallery .qq-upload-status-text {
color: #333333;
font-size: 12px;
padding-left: 3px;
padding-top: 2px;
width: inherit;
display: none;
width: 108px;
}
.qq-gallery .qq-upload-fail .qq-upload-status-text {
text-overflow: ellipsis;
white-space: nowrap;
overflow-x: hidden;
display: block;
}
.qq-gallery .qq-upload-retrying .qq-upload-status-text {
display: inline-block;
}
.qq-gallery .qq-upload-retrying .qq-progress-bar-container {
display: none;
}
.qq-gallery .qq-upload-cancel {
background-color: #525252;
color: #F7F7F7;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
border-radius: 12px;
border: none;
height: 22px;
width: 22px;
padding: 4px;
position: absolute;
right: -5px;
top: -6px;
margin: 0;
line-height: 17px;
}
.qq-gallery .qq-upload-cancel:hover {
background-color: #525252;
}
.qq-gallery .qq-upload-retry {
cursor: pointer;
position: absolute;
top: 30px;
left: 50%;
margin-left: -31px;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.37) inset,
1px 0 1px rgba(255, 255, 255, 0.07) inset,
0 4px 4px rgba(0, 0, 0, 0.5),
0 -2px 12px rgba(0, 0, 0, 0.08) inset;
padding: 3px 4px;
border: 1px solid #d2ddc7;
border-radius: 2px;
color: inherit;
background-color: #EBF6E0;
z-index: 1;
}
.qq-gallery .qq-upload-retry:hover {
background-color: #f7ffec;
}
.qq-gallery .qq-file-info {
padding: 10px 6px 4px;
margin-top: -3px;
border-radius: 0 0 2px 2px;
text-align: left;
overflow: hidden;
}
.qq-gallery .qq-file-info .qq-file-name {
position: relative;
}
.qq-gallery .qq-upload-file {
display: block;
margin-right: 0;
margin-bottom: 3px;
width: auto;
/* to ensure consistent size of tiles - constrain text to single line */
text-overflow: ellipsis;
white-space: nowrap;
overflow-x: hidden;
}
.qq-gallery .qq-upload-spinner {
display: inline-block;
background: url("loading.gif");
position: absolute;
left: 50%;
margin-left: -7px;
top: 53px;
width: 15px;
height: 15px;
vertical-align: text-bottom;
}
.qq-gallery .qq-drop-processing {
display: block;
}
.qq-gallery .qq-drop-processing-spinner {
display: inline-block;
background: url("processing.gif");
width: 24px;
height: 24px;
vertical-align: text-bottom;
}
.qq-gallery .qq-upload-failed-text {
display: none;
font-style: italic;
font-weight: bold;
}
.qq-gallery .qq-upload-failed-icon {
display:none;
width:15px;
height:15px;
vertical-align:text-bottom;
}
.qq-gallery .qq-upload-fail .qq-upload-failed-text {
display: inline;
}
.qq-gallery .qq-upload-retrying .qq-upload-failed-text {
display: inline;
}
.qq-gallery .qq-upload-list li.qq-upload-success {
background-color: #F2F7ED;
}
.qq-gallery .qq-upload-list li.qq-upload-fail {
background-color: #F5EDED;
box-shadow: 0 0 1px 0 red;
border: 0;
}
.qq-gallery .qq-progress-bar {
display: block;
background: #00abc7;
width: 0%;
height: 15px;
border-radius: 6px;
margin-bottom: 3px;
}
.qq-gallery .qq-total-progress-bar {
height: 25px;
border-radius: 9px;
}
.qq-gallery .qq-total-progress-bar-container {
margin-left: 9px;
display: inline;
float: right;
width: 500px;
}
.qq-gallery .qq-upload-size {
float: left;
font-size: 11px;
color: #929292;
margin-bottom: 3px;
margin-right: 0;
display: inline-block;
}
.qq-gallery INPUT.qq-edit-filename {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
z-index: -1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.qq-gallery .qq-upload-file.qq-editable {
cursor: pointer;
margin-right: 20px;
}
.qq-gallery .qq-edit-filename-icon.qq-editable {
display: inline-block;
cursor: pointer;
position: absolute;
right: 0;
top: 0;
}
.qq-gallery INPUT.qq-edit-filename.qq-editing {
position: static;
height: 28px;
width: 90px;
width: -moz-available;
padding: 0 8px;
margin-bottom: 3px;
border: 1px solid #ccc;
border-radius: 2px;
font-size: 13px;
opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.qq-gallery .qq-edit-filename-icon {
display: none;
background: url("edit.gif");
width: 15px;
height: 15px;
vertical-align: text-bottom;
}
.qq-gallery .qq-delete-icon {
background: url("trash.gif");
width: 15px;
height: 15px;
vertical-align: sub;
display: inline-block;
}
.qq-gallery .qq-retry-icon {
background: url("retry.gif");
width: 15px;
height: 15px;
vertical-align: sub;
display: inline-block;
float: none;
}
.qq-gallery .qq-continue-icon {
background: url("continue.gif");
width: 15px;
height: 15px;
vertical-align: sub;
display: inline-block;
}
.qq-gallery .qq-pause-icon {
background: url("pause.gif");
width: 15px;
height: 15px;
vertical-align: sub;
display: inline-block;
}
.qq-gallery .qq-hide {
display: none;
}
/* Thumbnail
------------------------------------------ */
.qq-gallery .qq-in-progress .qq-thumbnail-wrapper {
/* makes the spinner on top of the thumbnail more visible */
opacity: 0.5;
filter: alpha(opacity=50);
}
.qq-gallery .qq-thumbnail-wrapper {
overflow: hidden;
position: relative;
/* to ensure consistent size of tiles - should match qq-max-size attribute value on qq-thumbnail-selector IMG element */
height: 120px;
width: 120px;
}
.qq-gallery .qq-thumbnail-selector {
border-radius: 2px 2px 0 0;
bottom: 0;
/* we will override this in the :root thumbnail selector (to help center the preview) for everything other than IE8 */
top: 0;
/* center the thumb horizontally in the tile */
margin:auto;
display: block;
}
/* hack to ensure we don't try to center preview in IE8, since -ms-filter doesn't mimic translateY as expected in all cases */
:root *> .qq-gallery .qq-thumbnail-selector {
/* vertically center preview image on tile */
position: relative;
top: 50%;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
/*