Cannot make the blueimp JQuery File Upload basic plus ui work on my machine

3,380 views
Skip to first unread message

yan zhang

unread,
Jul 24, 2013, 3:19:24 PM7/24/13
to jquery-f...@googlegroups.com
All,

I am a new web developer and trying to use this blueimp JQuery File Upload. I have spent  many days in making the basic plus UI example code work but even the selected files are not showing in the fileContainer template at all. I've been stuck on this for 4 weeks.   Can anybody please to help me out?

Thanks in adavance!

Yan

Rishi Jain

unread,
Jul 25, 2013, 2:36:25 AM7/25/13
to jquery-f...@googlegroups.com
It would help If you could paste some code or may be a link to github repo from where I could see what exactly you are doing.

yan zhang

unread,
Jul 25, 2013, 1:23:15 PM7/25/13
to jquery-f...@googlegroups.com

Rishi,

Thanks. I did not do anything special and just want to see if the JQueryFileUpload basic plus UI demo work on my environment or not. I am working on a project which is using Spring MVC( java) and tomcat server.  I put the blue impl demo index.html  ( I renamed this to tryFileUpload_blueimp.jsp ) as a link in my main page. When I clicked the link and get to the demo page, select a couple of files but these files are not displayed in the file container as the blueimp demo website does. It seems that the first big problem for me is: the template stuff in the browser seems not working at all. Do you have any suggestion how can I make this work?  Right now I do not worry the server side yet. I think firstly I need to see the client side work as it suppose to.

the following is my   tryFileUpload_blueimp.jsp ( copied from the index.html and just changed some path for the local reference js files )
<!DOCTYPE HTML>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!--
/*
 * jQuery File Upload Plugin Demo 6.14
 * https://github.com/blueimp/jQuery-File-Upload
 *
 * Copyright 2010, Sebastian Tschan
 * https://blueimp.net
 *
 * Licensed under the MIT license:
 * http://www.opensource.org/licenses/MIT
 */
-->
<html lang="en">
<head>
<!-- Force latest IE rendering engine or ChromeFrame if installed -->
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
<meta charset="utf-8">
<title>jQuery File Upload Demo</title>
<meta name="description" content="File Upload widget with multiple file selection, drag&amp;drop support, progress bar and preview images for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.">
<meta name="viewport" content="width=device-width">
<!-- jQuery UI styles -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" id="theme">
<!-- jQuery Image Gallery styles -->
<link rel="stylesheet" href="http://blueimp.github.com/jQuery-Image-Gallery/css/jquery.image-gallery.min.css">
<!-- CSS to style the file input field as button and adjust the jQuery UI progress bars -->
<link rel="stylesheet" href="<c:url value="/resources/css/jquery.fileupload-ui.css" />" />
<!-- CSS adjustments for browsers with JavaScript disabled -->
<noscript><link rel="stylesheet" href="<c:url value="/resources/css/jquery.fileupload-ui-noscript.css" />" ></noscript>
<!-- Generic page styles -->
<link rel="stylesheet" href="<c:url value="/resources/css/style.css" />" />
<!-- Shim to make HTML5 elements usable in older Internet Explorer versions -->
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <a class="brand" href="https://github.com/blueimp/jQuery-File-Upload">jQuery File Upload</a>
            <div class="nav-collapse">
                <ul class="nav">
                    <li class="active"><a href="http://blueimp.github.com/jQuery-File-Upload/">Demo</a></li>
                    <li><a href="https://github.com/blueimp/jQuery-File-Upload#download">Download</a></li>
                    <li><a href="https://github.com/blueimp/jQuery-File-Upload">Source Code</a></li>
                    <li><a href="https://github.com/blueimp/jQuery-File-Upload/wiki">Documentation</a></li>
                    <li><a href="https://github.com/blueimp/jQuery-File-Upload#support">Support</a></li>
                    <li><a href="https://blueimp.net">&copy; Sebastian Tschan</a></li>
                </ul>
                <select id="theme-switcher" class="pull-right">
                    <option value="base" selected>Base</option>
                    <option value="black-tie">Black Tie</option>
                    <option value="blitzer">Blitzer</option>
                    <option value="cupertino">Cupertino</option>
                    <option value="dark-hive">Dark Hive</option>
                    <option value="dot-luv">Dot Luv</option>
                    <option value="eggplant">Eggplant</option>
                    <option value="excite-bike">Excite Bike</option>
                    <option value="flick">Flick</option>
                    <option value="hot-sneaks">Hot sneaks</option>
                    <option value="humanity">Humanity</option>
                    <option value="le-frog">Le Frog</option>
                    <option value="mint-choc">Mint Choc</option>
                    <option value="overcast">Overcast</option>
                    <option value="pepper-grinder">Pepper Grinder</option>
                    <option value="redmond">Redmond</option>
                    <option value="smoothness">Smoothness</option>
                    <option value="south-street">South Street</option>
                    <option value="start">Start</option>
                    <option value="sunny">Sunny</option>
                    <option value="swanky-purse">Swanky Purse</option>
                    <option value="trontastic">Trontastic</option>
                    <option value="ui-darkness">UI Darkness</option>
                    <option value="ui-lightness">UI Lightness</option>
                    <option value="vader">Vader</option>
                </select>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="page-header">
        <h1>jQuery File Upload Demo</h1>
    </div>
    <blockquote>
        <p>File Upload widget with multiple file selection, drag&amp;drop support, progress bars and preview images for jQuery.<br>
        Supports cross-domain, chunked and resumable file uploads and client-side image resizing.<br>
        Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.</p>
    </blockquote>
    <br>
    <!-- The file upload form used as target for the file upload widget -->
    <form id="fileupload" action="<c:url value="/fileProc/uploadPicVideoFile" />" method="POST" enctype="multipart/form-data">
        <!-- Redirect browsers with JavaScript disabled to the origin page -->
        <noscript><input type="hidden" name="redirect" value="http://blueimp.github.com/jQuery-File-Upload/"></noscript>
        <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
        <div class="row fileupload-buttonbar">
            <div class="span7">
                <!-- The fileinput-button span is used to style the file input field as button -->
                <span class="btn btn-success fileinput-button">
                    <i class="icon-plus icon-white"></i>
                    <span>Add files...</span>
                    <input type="file" name="files[]" multiple>
                </span>
                <button type="submit" class="btn btn-primary start">
                    <i class="icon-upload icon-white"></i>
                    <span>Start upload</span>
                </button>
                <button type="reset" class="btn btn-warning cancel">
                    <i class="icon-ban-circle icon-white"></i>
                    <span>Cancel upload</span>
                </button>
                <button type="button" class="btn btn-danger delete">
                    <i class="icon-trash icon-white"></i>
                    <span>Delete</span>
                </button>
                <input type="checkbox" class="toggle">
            </div>
            <!-- The global progress information -->
            <div class="span5 fileupload-progress fade">
                <!-- The global progress bar -->
                <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                    <div class="bar" style="width:0%;"></div>
                </div>
                <!-- The extended global progress information -->
                <div class="progress-extended">&nbsp;</div>
            </div>
        </div>
        <!-- The loading indicator is shown during file processing -->
        <div class="fileupload-loading"></div>
        <br>
        <!-- The table listing the files available for upload/download -->
        <table role="presentation" class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
    </form>
    <br>
    <div class="well">
        <h3>Demo Notes</h3>
        <ul>
            <li>The maximum file size for uploads in this demo is <strong>5 MB</strong> (default file size is unlimited).</li>
            <li>Only image files (<strong>JPG, GIF, PNG</strong>) are allowed in this demo (by default there is no file type restriction).</li>
            <li>Uploaded files will be deleted automatically after <strong>5 minutes</strong> (demo setting).</li>
            <li>You can <strong>drag &amp; drop</strong> files from your desktop on this webpage with Google Chrome, Mozilla Firefox and Apple Safari.</li>
            <li>Please refer to the <a href="https://github.com/blueimp/jQuery-File-Upload">project website</a> and <a href="https://github.com/blueimp/jQuery-File-Upload/wiki">documentation</a> for more information.</li>
        </ul>
    </div>
</div>
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
        <td class="preview"><span class="fade"></span></td>
        <td class="name"><span>{%=file.name%}</span></td>
        <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
        {% if (file.error) { %}
            <td class="error" colspan="2"><span class="label label-important">Error</span> {%=file.error%}</td>
        {% } else if (o.files.valid && !i) { %}
            <td>
                <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div>
            </td>
            <td class="start">{% if (!o.options.autoUpload) { %}
                <button class="btn btn-primary">
                    <i class="icon-upload icon-white"></i>
                    <span>Start</span>
                </button>
            {% } %}</td>
        {% } else { %}
            <td colspan="2"></td>
        {% } %}
        <td class="cancel">{% if (!i) { %}
            <button class="btn btn-warning">
                <i class="icon-ban-circle icon-white"></i>
                <span>Cancel</span>
            </button>
        {% } %}</td>
    </tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">
        {% if (file.error) { %}
            <td></td>
            <td class="name"><span>{%=file.name%}</span></td>
            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
            <td class="error" colspan="2"><span class="label label-important">Error</span> {%=file.error%}</td>
        {% } else { %}
            <td class="preview">{% if (file.thumbnail_url) { %}
                <a href="{%=file.url%}" title="{%=file.name%}" data-gallery="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
            {% } %}</td>
            <td class="name">
                <a href="{%=file.url%}" title="{%=file.name%}" data-gallery="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a>
            </td>
            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
            <td colspan="2"></td>
        {% } %}
        <td class="delete">
            <button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}"{% if (file.delete_with_credentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
                <i class="icon-trash icon-white"></i>
                <span>Delete</span>
            </button>
            <input type="checkbox" name="delete" value="1">
        </td>
    </tr>
{% } %}
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<!-- The Templates plugin is included to render the upload/download listings -->
<script src="<c:url value="/resources/js/tmpl.min.js" />"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="<c:url value="/resources/js/blueImpFileLoad/load-image.min.js" />"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="<c:url value="/resources/js/blueImpFileLoad/canvas-to-blob.min.js" />"></script>
<!-- jQuery Image Gallery -->
<script src="<c:url value="/resources/js/blueImpFileLoad/jquery.image-gallery.min.js" />"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="<c:url value="/resources/js/blueImpFileLoad/jquery.fileupload-fp.js" />"></script>
<!-- The basic File Upload plugin -->
<script src="<c:url value="/resources/js/blueImpFileLoad/jquery.fileupload.js" />"></script>
<!-- The File Upload file processing plugin -->
<script src="<c:url value="/resources/js/blueImpFileLoad/jquery.fileupload-fp.js" />"></script>
<!-- The File Upload user interface plugin -->
<script src="<c:url value="/resources/js/blueImpFileLoad/jquery.fileupload-ui.js" />"></script>
<!-- The File Upload jQuery UI plugin -->
<script src="<c:url value="/resources/js/blueImpFileLoad/jquery.fileupload-jui.js" />"></script>
<!-- The main application script -->
<script src="<c:url value="/resources/js/blueImpFileLoad/main.js" />"></script>
<!-- The XDomainRequest Transport is included for cross-domain file deletion for IE8+ -->
<!--[if gte IE 8]><script src="<c:url value="/resources/js/blueImpFileLoad/cors/jquery.xdr-transport.js" />" ></script><![endif]-->
</body>
</html>

yan zhang

unread,
Jul 25, 2013, 1:25:38 PM7/25/13
to jquery-f...@googlegroups.com

yan zhang

unread,
Jul 25, 2013, 1:36:14 PM7/25/13
to jquery-f...@googlegroups.com

I forgot to mention that I have copied the main.js to my local resource directory and only changed one line code:
line 22:  url: 'fileProc/uploadPicVideoFile'  // this is my spring mvc web handler path

I am running in Firefox. also my dev machine is a bit old, windows XP and have not got time to migrate to my new Win7 box yet.

Yan


On Thursday, July 25, 2013 1:36:25 AM UTC-5, Rishi Jain wrote:

some....@gmail.com

unread,
Jul 17, 2014, 8:42:51 PM7/17/14
to jquery-f...@googlegroups.com
Hi Yan,

Did you ever get this working?

I have a similar problem where I got the 'Basic Plus' working out of the box (using Php) without changing any configurations at all but the file display (list) won't work with the Basic Plus UI.

Cheers,

James 

Richard Polderman

unread,
Aug 4, 2014, 3:23:45 AM8/4/14
to jquery-f...@googlegroups.com
I also bump into this problem. 
Any solutions?

Regards,
Richard

Op woensdag 24 juli 2013 21:19:24 UTC+2 schreef yan zhang:
Reply all
Reply to author
Forward
0 new messages