How to use fineuploader

I am looking to integrate fineuploader into my JQuery Mobile app. As a starting point I am trying to use the default template provided on fineuploader.com to familiarise myself.

I downloaded the latest copy of fineuploader from github. I've given the sources for .js files by kinda guessing, as I could not find clear documentation on which files to reference in order to use fineuploader jquery plugin.

The default template does not work, I believe I am not referencing the appropriate files ? Can someone please advise what I could be doing wrong ?

Below is the default template I am using from fineuploader.com.

<!DOCTYPE html>

<html>
  <head>

      <link href="fine-uploader-master/client/fineuploader.css" rel="stylesheet"/>

  </head>
  <body>

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

    <!-- jQuery version 1.10.x (if you are using the jQuery plugin -->
    <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>

    <!-- Fine Uploader-jQuery -->
    <script src="fine-uploader-master/client/js/jquery-plugin.js" type="text/javascript"></script>
    <script src="fine-uploader-master/client/js/uploader.js" type="text/javascript"></script>
    <script>
    // Wait until the DOM is 'ready'
    $(document).ready(function () {
        $("#fine-uploader").fineUploader({
            debug: true,
            request: {
                endpoint: '/uploads'
            },
            deleteFile: {
                enabled: true,
                endpoint: '/uploads'
            },
            retry: {
               enableAuto: true
            }
        });
    });
    </script>

    <script type="text/template" id="qq-template">
        <div class="qq-uploader-selector qq-uploader">
            <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
                <span>Drop files here to upload</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">
                <li>
                  <div class="qq-progress-bar-container-selector">
                      <div class="qq-progress-bar-selector qq-progress-bar"></div>
                  </div>
                  <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
                  <span class="qq-edit-filename-icon-selector qq-edit-filename-icon"></span>
                  <span class="qq-upload-file-selector qq-upload-file"></span>
                  <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
                  <span class="qq-upload-size-selector qq-upload-size"></span>
                  <a class="qq-upload-cancel-selector qq-upload-cancel" href="#">Cancel</a>
                  <a class="qq-upload-retry-selector qq-upload-retry" href="#">Retry</a>
                  <a class="qq-upload-delete-selector qq-upload-delete" href="#">Delete</a>
                  <span class="qq-upload-status-text-selector qq-upload-status-text"></span>
                </li>
            </ul>
        </div>
    </script>

  </body>
</html>

I agree with Ray's comment above that you should NOT reference individual files.

You could just buy a license and download their packaged versions.. http://fineuploader.com/purchase_form.html

Or, here are the commands I used to build FineUploader from the git repository on a Windows system. This is a more detailed explanation of what you find at the "build your own" link that Ray supplied above. I believe this will pull the latest code from the repository, if you want an older version you'll have to do some investigating into the git clone call as I'm not very familiar with it.

Install nodejs: http://nodejs.org/download/
Install git: http://git-scm.com/download/win (make sure to select "Run Git from the Command Prompt" during the install so it adds it into the environment path.
Open the NodeJs command prompt
Install Grunt-cli globally (-g):
- npm install –g grunt-cli
Use Git to pull the latest source into a directory
- CD into your source directory where you want the respository to be pulled into (e.g. cd c:\source)
- Run git clone git://github.com/Widen/fine-uploader
- This creates a “fine-uploader” directory with the latest source files in it
CD into the fine-uploader directory
~~Run the following commands to install required packages (copy these into a batch file to make it easier...). NOTE: As the project grows in the future there may be other packages that are needed.~~ Run the following command to install required packages.
- npm install
Run grunt package to build the packaged js and css files.

The last command combines the necessary files together and put them into a "_dist" directory. The "_dist" directory contains folders and zip files for each flavor of the program (all, jquery, s3, etc.). A more detailed package (i.e. jquery vs core) will be larger files so only use what you need.

Recommended topics

Hot tags