5.15.0

Setting Fine Uploader Options Azure Blob Storage

At this point in the tutorial you should have an very simple HTML page with a Fine Uploader Azure instance. This section will get you started with setting some of the more common options of Fine Uploader. To see all supported options, open the "API" menu at the top of this page.

Note

If you are using Fine Uploader UI, you MUST include a template in your document/markup. You can use the default.html file in the templates directory bundled with the library and customize it as desired. See the styling documentation page for more details.

Basic Options

Fine Uploader comes with a wealth of options. Most importantly, Fine Uploader requires you to specify the URL where it should send uploads and server requests to. This endpoint can be an absolute path or a relative path. The meaning of this endpoint varies depending on the endpoint handler. If you are using Fine Uploader Azure, the endpoint should point to your Azure Blob Storage container.

More information on the request option here.

Note

Fine Uploader Azure does not support IE9 and older. This is due to the fact that Azure's API does not allow files to be uploaded via multipart encoded POST requests, which is critical for IE9 and older support. If you need to support IE9 and older, you will need to load/use Fine Uploader with its traditional endpoint handler if the value of qq.supportedFeatures.ajaxUploading is false.

if (qq.supportedFeatures.ajaxUploading) {
    var uploader = new qq.azure.FineUploader
        request: {
            endpoint: 'https://{ YOUR_STORAGE_ACCOUNT_NAME }.blob.core.windows.net/{ YOUR_CONTAINER_NAME }'
        },
        signature: {
            endpoint: '/signature'
        },
        uploadSuccess: {
            endpoint: '/success'
        }
    });
}

Debug mode

Debug mode is used to begin diagnosing any application errors. Debug mode can be enabled in the options of Fine Uploader:

var uploader = new qq.azure.FineUploader
    debug: true,
    /* ...other options... */
});

With debug mode on, Fine Uploader will spit out log messages to the console. This allows you to diagnose any application errors and it is recommended to have this mode on during development.

More information on debugging errors here.

Retrying Uploads

Networks can be unreliable, and if your upload fails, Fine Uploader offers the ability to retry. The retry option can be set to enable this:

var uploader = new qq.azure.FineUploader
    /* ...other options... */
    retry: {
       enableAuto: true // defaults to false
    }
});

More information on retrying uploads here.

Deleting Files

If a user has uploaded a file, but realized it was a mistake before aborting, then Fine Uploader can also help them delete files.

A file is eligible for deletion only after it has been successfully uploaded. In Fine Uploader UI mode, if this feature is enabled, a customizable delete link will appear next to the file after it has successfully uploaded. File deletion can be enabled in the Fine Uploader options. You can also send a delete request via the deleteFile API method.

Note that Fine Uploader Azure will send delete file requests directly to Azure via the REST API. This means that the endpoint property of the deleteFile feature is irrelevant.

var uploader = new qq.azure.FineUploader
    /* ...other options... */
    deleteFile: {
        enabled: true // default is false
    }
});

More information on deleting files here.

Putting it together

Now our Fine Uploader page should look something like this:

Note

There are many ways to load Fine Uploader into your project. The code below creates a global qq variable, but there are other, better options. Please see modules feature page for more details.

<html>
  <head>
      <link href="fine-uploader-5.15.0-new.css" rel="stylesheet" type="text/css"/>
  </head>
  <body>

    <!-- The element where Fine Uploader will exist. -->
    <div id="fine-uploader">
    </div>

    <!-- Fine Uploader -->
    <script src="azure.fine-uploader.min.js" type="text/javascript"></script>

    <script type="text/template" id="qq-template">
        <div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here">
            <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
                <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
            </div>
            <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
                <span class="qq-upload-drop-area-text-selector"></span>
            </div>
            <div class="qq-upload-button-selector qq-upload-button">
                <div>Upload a file</div>
            </div>
            <span class="qq-drop-processing-selector qq-drop-processing">
                <span>Processing dropped files...</span>
                <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
            </span>
            <ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">
                <li>
                    <div class="qq-progress-bar-container-selector">
                        <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
                    </div>
                    <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
                    <img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>
                    <span class="qq-upload-file-selector qq-upload-file"></span>
                    <span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
                    <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
                    <span class="qq-upload-size-selector qq-upload-size"></span>
                    <button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button>
                    <button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>
                    <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button>
                    <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
                </li>
            </ul>

            <dialog class="qq-alert-dialog-selector">
                <div class="qq-dialog-message-selector"></div>
                <div class="qq-dialog-buttons">
                    <button type="button" class="qq-cancel-button-selector">Close</button>
                </div>
            </dialog>

            <dialog class="qq-confirm-dialog-selector">
                <div class="qq-dialog-message-selector"></div>
                <div class="qq-dialog-buttons">
                    <button type="button" class="qq-cancel-button-selector">No</button>
                    <button type="button" class="qq-ok-button-selector">Yes</button>
                </div>
            </dialog>

            <dialog class="qq-prompt-dialog-selector">
                <div class="qq-dialog-message-selector"></div>
                <input type="text">
                <div class="qq-dialog-buttons">
                    <button type="button" class="qq-cancel-button-selector">Cancel</button>
                    <button type="button" class="qq-ok-button-selector">Ok</button>
                </div>
            </dialog>
        </div>
    </script>

    <script>
        var uploader = new qq.azure.FineUploader
            element: document.getElementById('fine-uploader'),
            request: {
                endpoint: 'https://{ YOUR_STORAGE_ACCOUNT_NAME }.blob.core.windows.net/{ YOUR_CONTAINER_NAME }'
            },
            signature: {
                endpoint: '/signature'
            },
            uploadSuccess: {
                endpoint: '/success'
            },
            retry: {
               enableAuto: true
            },
            deleteFile: {
                enabled: true
            }
        });
    </script>
  </body>
</html>

Next, you'll learn to use Fine Uploader Azure to handle uploads.