I'm trying to implement my gallery upload using jQuery File Upload pugin but for some (driving me mad) reason I can't see anything on UI. I tried to setup all plugin like in Basic Plus UI example so here is my implementation:
First of all my HTML code + scripts I'm loading:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/bootstrap-theme.css" rel="stylesheet"/>
<link href="/Content/style.css" rel="stylesheet"/>
<link href="/Content/jQuery.FileUpload/css/jquery.fileupload.css" rel="stylesheet"/>
<link href="/Content/jQuery.FileUpload/css/jquery.fileupload-ui.css" rel="stylesheet"/>
<script src="/Scripts/jquery-2.1.1.js"></script>
<script src="/Scripts/jquery-ui-1.11.2.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/modernizr-2.8.3.js"></script>
<script src="/Scripts/jquery.eventCalendar.js"></script>
<!-- Bootstrap CSS fixes for IE6 -->
<!--[if lt IE 7]><link rel="stylesheet" href="/Content/FileUpload/css/bootstrap/bootstrap-ie6.debug.css"><![endif]-->
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
...
<body>
...
<div class="row fileupload-buttonbar">
<div class="col-lg-12">
<!-- 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>Choose files...</span>
<input type="file" name="files[]" id="fileupload" multiple="multiple" />
</span>
</div>
<!-- The global progress state -->
<div class="col-lg-12 fileupload-progress fade">
<!-- The global progress bar -->
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-success" style="width:0%;"></div>
</div>
<!-- The extended global progress state -->
<div class="progress-extended"> </div>
</div>
</div>
<!-- The table listing the files available for upload/download -->
<table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% alert('eho'); %}
<tr class="template-upload fade">
<td>
<p>template-upload</p>
</td>
</tr>
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% alert('eho2'); %}
<tr class="template-download fade">
<td>
<p>template-upload</p>
</td>
</tr>
</script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/jQuery.FileUpload/jquery.fileupload.js"></script>
<script src="/Scripts/jQuery.FileUpload/jquery.fileupload-ui.js"></script>
<script src="/Scripts/jQuery.FileUpload/jquery.iframe-transport.js"></script>
<script src="/Scripts/jQuery.FileUpload/jquery.fileupload-process.js"></script>
<script src="/Scripts/jQuery.FileUpload/jquery.fileupload-image.js"></script>
<script src="/Scripts/jQuery.FileUpload/jquery.fileupload-audio.js"></script>
<script src="/Scripts/jQuery.FileUpload/jquery.fileupload-video.js"></script>
<script src="/Scripts/jQuery.FileUpload/jquery.fileupload-validate.js"></script>
<script src="/Scripts/tmpl.js"></script>
<script src="/Scripts/JavaScript-Load-Image/load-image.all.min.js"></script>
<script src="/Scripts/JavaScript-Canvas-to-Blob/canvas-to-blob.min.js"></script>
<script src="/Scripts/SCPS/upload.js"></script>
</body>
My upload.js file looks like this:
$(document).ready(function() {
$('#fileupload').fileupload({
url: '/Upload/UploadContentImage',
autoUpload: true,
add: function (e, data) {
alert('sending');
data.submit();
}
});
});
When I choose files using Choose files... button the sending alert is shown. I'm also able to process images on server side and I'm returning little bit different structure of JSON which I want to pass to JS templates but it shouldn't make a difference. For now I just need to be able see at least something happening after response is returned from server. My response body looks like this:
{
"statusCode":200,
"status":"Image uploaded successfully.",
"file":{
"Id":1055,
"Name":"P1130142_ee0bbf3639aa4d06a7140839f33eb90d.JPG",
"DisplayName":"P1130142.JPG",
"Url":"D:\\....\\Files\\Content\\2014\\1024\\P1130142_ee0bbf3639aa4d06a7140839f33eb90d.JPG",
"ThumbnailUrl":"D:\\....\\Files\\Content\\2014\\150\\P1130142_ee0bbf3639aa4d06a7140839f33eb90d.JPG",
"OriginalUrl":"D:\\....\\Files\\Content\\2014\\P1130142_ee0bbf3639aa4d06a7140839f33eb90d.JPG",
"MimeType":"image/jpeg",
"Order":0,
"Size":3657508,
"Gallery":null,
"GalleryId":null
}
}
What I would like to achieve is immediately after picking the pictures up, add them to the upload table and show process of uploading and after the upload is done show the file info pretty much very similar to this demo with one exception of autoupload:
https://blueimp.github.io/jQuery-File-Upload/
I'm so thankful for any hint advice note remark or anything what can help me.
Marek
thanks for your answer and basically it can work your way.
Anyway I found issue in my implementation and only thing (maybe some other small change) was change applying plugin on input to applying plugin on form which has file input. This way it works for me but thanks a lot anyway. Maybe your solution will help to someone else.
Cheers!