Nothing shows up on my page after i apply all the code

Question

I have just purchased Fine Uploader license for WindowsAzure.

I have tried to apply all the suggested code from: http://docs.fineuploader.com/quickstart/02-setting_options-azure.html

or from the default.html file from the downloaded Fine Uploader package.

Nothing shows up on my page after I published it to Windows Azure website and run it.

I use MVC 5 and Microsoft Visual Studio 2013 for the Development.

What is the most possible mistake on my code ?

Thank you very much.

Regards, JRW.

Copy of my code:

on the head section:

  <link rel="stylesheet" type="text/css" href="http://www.tipao.net/css/custom.fineuploader-5.0.3.min.css" />

on the body section:

<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="http://www.tipao.net/Scripts/custom.fineuploader-5.0.3.min.js" type="text/javascript"></script>

<div id="upload_window" class="white_content" style="height:auto; top:20%; left:30%; width:40%;">
<script type="text/template" id="qq-template">
    <div class="qq-uploader-selector qq-uploader">
        <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
            <div 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>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>

<button id="close_upload_window" style="width:100px; height:30px;" onclick="close_upload_window()">Close</button>

This is my code after I initialize Fine Uploader:

<div id="upload_window" class="white_content" style="height:auto; top:20%; left:30%; width:40%;">

<link rel="stylesheet" type="text/css" href="http://www.tipao.net/css/custom.fineuploader-5.0.3.min.css" />

<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="http://www.tipao.net/scripts/custom.fineuploader-5.0.3.min.js" type="text/javascript"></script>

<script>
// Wait until the DOM is 'ready'
$(document).ready(function () {
    $("#fine-uploader").fineUploaderAzure({
        request: {
            endpoint: 'https://XXXXXX.blob.core.windows.net/XXXX'
        },
        signature: {
            endpoint: '/signature'
        },
        uploadSuccess: {
            endpoint: '/success'
        },
        retry: {
            enableAuto: true
        },
        deleteFile: {
            enabled: 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>

<button id="close_upload_window" style="width:100px; height:30px;" onclick="close_upload_window()">Close</button>

I have just added copy of my code below the question. Thank you. — Joo Roby Widjaja, Jul 12 '14 at 13:31
Close-voters and down-voters: please stop. The question is quite clear, and all code has been provided. — Ray Nicholus, Jul 13 '14 at 03:36

score 0 · Answer 1 · answered Jul 13 '14 at 02:26

0

Simple: you aren't initializing a Fine Uploader instance. At the very least, you need to construct a Fine Uploader instance and pass some basic configuration options. This is covered in the exact link you referenced in your question.

To quote from the docs link you referenced in your question, here is one way you can initialize Fine Uploader in this case:

if (qq.supportedFeatures.ajaxUploading) {
    $("#fine-uploader").fineUploaderAzure({
        request: {
            endpoint: 'https://{ YOUR_STORAGE_ACCOUNT_NAME }.blob.core.windows.net/{ YOUR_CONTAINER_NAME }'
        },
        signature: {
            endpoint: '/signature'
        },
        uploadSuccess: {
            endpoint: '/success'
        }
    });
}

You will also need to include an element in your markup with a fine-uploader ID.

answered Jul 13 '14 at 02:26

Ray Nicholus

19,538
14
59
82

I have initialized Fine Uploader too as you suggested, but nothing show up on the web page. – Joo Roby Widjaja Jul 13 '14 at 03:25
What messages do you see in your javascript console? I suggest setting the `debug` option to `true` as well. – Ray Nicholus Jul 13 '14 at 03:34
I see nothing on the JavaScript console. If I copy the code on a separate HTML file and run it, it works well. – Joo Roby Widjaja Jul 13 '14 at 03:59
is it because of how I call the upload_window ? The fine-uploader is in upload_window. This is how I call the upload_window : function open_upload_window() { document.getElementById('fade_background').style.display = 'block'; document.getElementById('upload_window').style.display = 'block'; } – Joo Roby Widjaja Jul 13 '14 at 04:01
Sorry, I'm not sure what you mean when you refer to an upload window. It sounds like your issue is unrelated to Fine Uploader, and you have isolated the issue. – Ray Nicholus Jul 13 '14 at 04:57

Nothing shows up on my page after i apply all the code

1 Answers1