I am trying to use jquery file upload plugin with ruby on rails to upload files. The below things are my objectives.
Able to drag and drop multiple files
I can send only single file at a time. I am having 10 files means the plugin should send one by one with the file name filedata.
After selecting files, it can be removed before sending to server.
And it should show the file upload progress
But using the sample code, when i try drag and drop files, it is sending only one file to server and does not showing the file name in filePreview. If the autoupload is enabled, it is sending all the selected file. But still it is not showing filename in filePreview. To remove selected file i got suggestion from here. But after clicking start upload button i am getting javascript error. it says "ncaught TypeError: Cannot read property 'size' of undefined". Please help on this issue. Thanks in advance.
sample code is here.
<%= javascript_include_tag 'application/jquery.ui.widget' %>
<%= javascript_include_tag 'application/jquery.iframe-transport' %>
<%= javascript_include_tag 'application/jquery.fileupload' %>
<script type="text/javascript">
$('#filedata').fileupload({
options: {
singleFileUploads: false,
sequentialUploads: true,
autoUpload: false,
dropZone: $('#file-form')
},
change: function (ev, data) {
$.each(data.files, function (index, file) {
alert('Selected file: ' + file.name);
alert('Selected file size: ' + file.size);
$("#filePreview").append(
$('<span>').text(file.name)
.append('<a class="removeButton" href="#"> <img src="/oldimages/note_deletebut.png"/> </a>')
.attr('id', 'fileSpan')
.append($('<br>'))
);
});
},
add: function (e, data) {
$(".removeButton").click(function() {
$(this).parent().remove();
data.files.splice(0,1); //To test
});
$("#triggerUpload").off('click').on('click',function () {
data.submit();
});
},
formData: {
},
url: "URL",
done: function (e, data) {
console.log("success")
console.log(data.result)
}
});
</script>
<form id="file-form" enctype="multipart/form-data" method="post" name="fileinfo">
<div class="upload-droparea fnt6c"> Drop files here<br>or <br>
<span class="btn btn-default orngbtn lesbtn filesbg uplod-btn">
<span>Select Files</span>
<input type="file" id="filedata" name="filedata" multiple>
</span>
</div>
<div id="filePreview"></div>
<button id="triggerUpload" value="Start Upload" class="btn btn-default orngbtn lesbtn filesbg" type="button">Start Upload
</button>
<button data-dismiss="modal" id="cancelUpload" value="Cancel" class="btn btn-default orngbtn lesbtn filesbg" type="button">Cancel</button>
</form>
