5.16.2

Importing Fine Uploader

You have the following options when pulling Fine Uploader into your project:

  1. CommonJS (require).
  2. ES6 Modules (import).
  3. Globally scoped (<script src="...">)

The first two options assume you are downloading Fine Uploader via npm. However, all three options are available should you choose the download the library with npm. The preferred way to download Fine Uploader is in fact through npm.

A new "lib" directory is available in the npm package. Among the JavaScript and placeholder image files, the three CSS files are available as well, but with different names. The legacy css file is named "legacy.css". Generally speaking, you should avoid using this stylesheet unless you have old code that depends on these styles. The "fine-uploader-new.css" stylsheet that contains a more modern set of styles for a row-based uploader has been appropriately named "rows.css". Finally, the "fine-uploader-gallery.css" stylesheet which supports a gallery view of submitted files is named "gallery.css". For more information about styling your uploader, please see the styling feature page.

The following sections cover, in detail, the three options you have for importing Fine Uploader, once you have downloaded the library. They are ordered by preference.

ES6 Modules

At the writing of this feature page, the JavaScript modules specification is completed and part of the ECMAScript-262 6th edition standard. However, at this time, no browser implements this specification. But there are still many options available to you should you choose to make use of ES6 modules when loading Fine Uploader into your project. Without native browser support, you must make use of a tool that compiles ES6 module syntax into a format that is parsable by all browsers. There are many such tools, but the more popular options are:

Importing your desired Fine Uploader resources is as simple as using import statements. For example:

// use Fine Uploader core (non-ui) for traditional endpoints
import qq from 'fine-uploader/lib/core'

const uploader = new qq.FineUploaderBasic({...})

You will find core builds for S3, Azure, and "all" in lib/core/s3.js, lib/core/azure.js, and lib/core/all.js (respectively)

// use Fine Uploader UI for traditional endpoints
import qq from 'fine-uploader'

// You may replace "rows" w/ "legacy" or "gallery" depending on your needs
// This assumes you have a loader to handle importing css files, such as Webpack css-loader
import 'fine-uploader/lib/rows.css'

const uploader = new qq.FineUploader({...})
// use Fine Uploader S3
import qq from 'fine-uploader/lib/s3'

// You may replace "rows" w/ "legacy" or "gallery" depending on your needs
// This assumes you have a loader to handle importing css files, such as Webpack css-loader
import 'fine-uploader/lib/rows.css'

const uploader = new qq.s3.FineUploader({...})
// use Fine Uploader Azure
import qq from 'fine-uploader/lib/azure'

// You may replace "rows" w/ "legacy" or "gallery" depending on your needs
// This assumes you have a loader to handle importing css files, such as Webpack css-loader
import 'fine-uploader/lib/rows.css'

const uploader = new qq.azure.FineUploader({...})
// allow use of Fine Uploader S3, Azure, and/or traditional endpoint code
import qq from 'fine-uploader/lib/all'

// You may replace "rows" w/ "legacy" or "gallery" depending on your needs
// This assumes you have a loader to handle importing css files, such as Webpack css-loader
import 'fine-uploader/lib/rows.css'

const traditionalUploader = new qq.FineUploader({...})
const s3Uploader = new qq.s3.FineUploader({...})
const azureUploader = new qq.azure.FineUploader({...})

TypeScript + Angular version 2 and higher

Importing Fine Uploader in TypeScript is very similar to ES6 import. The only difference being the global namespace qq is not available for TypeScript users. So the ES6 import syntax changes for TypeScript users as following:

// use Fine Uploader core (non-ui) for traditional endpoints
import { FineUploaderBasic } from 'fine-uploader/lib/core';

let uploader = new FineUploaderBasic({...})
// use Fine Uploader UI for traditional endpoints
import { FineUploader } from 'fine-uploader';

let uploader = new FineUploader({...});
// use Fine Uploader S3
import { s3 } from 'fine-uploader/lib/s3';

let uploader = new s3.FineUploader({...});
// use Fine Uploader Azure
import { azure } from 'fine-uploader/lib/azure';

let uploader = new azure.FineUploader({...});

Generating production bundles using Rollup? In your rollup-config.js (or whatever name your are using for rollup's config file) file, add the following under plugins property

commonjs({
    include: [
        'node_modules/rxjs/**',
        'node_modules/fine-uploader/**'
    ],
    namedExports: {
        'node_modules/fine-uploader/lib/traditional.js': ['FineUploader']
    }
})

If you are not using traditional Fine Uploader flavour, remember to change node_modules/fine-uploader/lib/traditional.js accordingly. For example: for s3 Fine Uploader this should be node_modules/fine-uploader/lib/s3.js

CommonJS

If you would like to use RequireJS or Babel + Webpack v1, or even Bublé, you will want to import Fine Uploader using the require function. Importing your desired Fine Uploader resources is as simple as using require statements. For example:

// use Fine Uploader core (non-ui) for traditional endpoints
var qq = require('fine-uploader/lib/core')

var uploader = new qq.FineUploaderBasic({...})

You will find core builds for S3, Azure, and "all" in lib/core/s3.js, lib/core/azure.js, and lib/core/all.js (respectively)

// use Fine Uploader UI for traditional endpoints
var qq = require('fine-uploader'_

// You may replace "rows" w/ "legacy" or "gallery" depending on your needs
// This assumes you have a loader to handle importing css files, such as Webpack css-loader
require('fine-uploader/lib/rows.css')

var uploader = new qq.FineUploader({...})
// use Fine Uploader S3
var qq = require('fine-uploader/lib/s3')

// You may replace "rows" w/ "legacy" or "gallery" depending on your needs
// This assumes you have a loader to handle importing css files, such as Webpack css-loader
require('fine-uploader/lib/rows.css')

var uploader = new qq.s3.FineUploader({...})
// use Fine Uploader Azure
var qq = require('fine-uploader/lib/azure')

// You may replace "rows" w/ "legacy" or "gallery" depending on your needs
// This assumes you have a loader to handle importing css files, such as Webpack css-loader
require('fine-uploader/lib/rows.css')

var uploader = new qq.azure.FineUploader({...})
// allow use of Fine Uploader S3, Azure, and/or traditional endpoint code
var qq = require('fine-uploader/lib/all')

// You may replace "rows" w/ "legacy" or "gallery" depending on your needs
// This assumes you have a loader to handle importing css files, such as Webpack css-loader
require('fine-uploader/lib/rows.css')

var traditionalUploader = new qq.FineUploader({...})
var s3Uploader = new qq.s3.FineUploader({...})
var azureUploader = new qq.azure.FineUploader({...})

Globally Scoped

The traditional way to pull Fine Uploader onto a page is to do so using <script> and <link> tags. Before version 5.8.0, this was the only way to properly import Fine Uploader. The downside of this approach is that you are left with a global variable attached to window - qq. Importing Fine Uploader as a globally scoped object can be accomplished as follows:

<!-- use Fine Uploader core (non-ui) for traditional endpoints -->
<script src="node_modules/fine-uploader/fine-uploader/fine-uploader.core.js" type="text/javascript"></script>

<script>
    (function() {
        var uploader = new qq.FineUploaderBasic({...})
    }())
</script>

You will find similarly named core builds for S3, Azure, and "all" inside of each respective endpoint folder as well.

<!-- use Fine Uploader UI for traditional endpoints -->
<script src="node_modules/fine-uploader/fine-uploader/fine-uploader.js" type="text/javascript"></script>

<link href="node_modules/fine-uploader/fine-uploader/fine-uploader-new.css" rel="stylesheet" type="text/css"/>

<script>
    (function() {
        var uploader = new qq.FineUploader({...})
    }())
</script>
<!-- use Fine Uploader S3 -->
<script src="node_modules/fine-uploader/s3.fine-uploader/s3.fine-uploader.js" type="text/javascript"></script>

<link href="node_modules/fine-uploader/s3.fine-uploader/fine-uploader-new.css" rel="stylesheet" type="text/css"/>

<script>
    (function() {
        var uploader = new qq.s3.FineUploader({...})
    }())
</script>
<!-- use Fine Uploader Azure -->
<script src="node_modules/fine-uploader/azure.fine-uploader/azure.fine-uploader.js" type="text/javascript"></script>

<link href="node_modules/fine-uploader/azure.fine-uploader/fine-uploader-new.css" rel="stylesheet" type="text/css"/>

<script>
    (function() {
        var uploader = new qq.azure.FineUploader({...})
    }())
</script>
<!-- use Fine Uploader S3, Azure, or traditional -->
<script src="node_modules/fine-uploader/all.fine-uploader/all.fine-uploader.js" type="text/javascript"></script>

<link href="node_modules/fine-uploader/all.fine-uploader/fine-uploader-new.css" rel="stylesheet" type="text/css"/>

<script>
    (function() {
        var traditionalUploader = new qq.FineUploader({...})
        var s3Uploader = new qq.s3.FineUploader({...})
        var azureUploader = new qq.azure.FineUploader({...})
    }())
</script>

AMD

Support for loading Fine Uploader via the Asynchronous Module Definition API is technically possible, and the code should be in place to support this, but it is not officially supported at this time. Demand for this type of loading is small, and we don't have a use for this in any of our projects. If you do find any issues with AMD support, please file an issue. We would also love to have this section of the documentation expanded to cover AMD support.