I'm using jquery-file-upload with Rails 4, I started from https://github.com/tors/jquery-fileupload-rails-paperclip-example. So I'm using jquery-rails, jquery-fileupload-rails and paperclip gems.
As I am not a crack on jquery or javascript, I'm trying to simplify and understand everything, changing code to make remote calls to rails with js.erb.
So that, the file list is a rails partial (_videos.html_erb) and index action in uploads controller has a index.js.erb to respond with js.
And I have added $.get('/uploads');
in de fileupload done
event to refresh the partial.
everything works well, unless the cancel button and I don't understand what I have to do and where.
This is what docs tell me:
How to cancel an upload
Uploads can be canceled by invoking the abort method on a jqXHR object:
var jqXHR = $('#fileupload').fileupload('send', {files: filesList})
.error(function (jqXHR, textStatus, errorThrown) {
if (errorThrown === 'abort') {
alert('File Upload has been canceled');
}
});
$('button.cancel').click(function (e) {
jqXHR.abort();
});
And this is my index.html.erb:
Here, for progress bar and text indications, I put code extracted form file-upload-basic-plugin
<div class="container">
<h2 id="titol">Upload file</h2>
<%= form_for Upload.new, :html => { :multipart => true, :id => "fileupload" } do |f| %>
<div class="row fileupload-buttonbar">
<%= f.file_field :upload %>
<button class="cancel">Cancel upload</button>
</div>
<hr/>
<% end %>
<div id="videos">
<%= render partial: "videos" %>
</div>
<!--..........This is necessary even though I don't know why -->
<script id="template-upload" type="text/x-tmpl">
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
</script>
<!--............................................................... -->
<script type="text/javascript" charset="utf-8">
$('#fileupload').fileupload({
dataType: 'json',
add: function (e, data) {
data.context = $('<p/>').text('Uploading...').appendTo(document.body);
data.submit();
},
done: function (e, data) {
data.context.text('Upload finished.');
$.get('/uploads');
}
});
$('#fileupload').fileupload({
progressall: function (e, data) {
$("#titol").text(data.loaded);
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css(
'width', progress + '%');
}
});
</script>
I supose I have to put somthing like this "var xhr = "
$('#fileupload').fileupload({
dataType: 'json',
add: function (e, data) {
data.context = $('<p/>').text('Uploading...').appendTo(document.body);
var xhr = data.submit();
},
done: function (e, data) {
data.context.text('Upload finished.');
$.get('/uploads');
}
});
and then
$(function () {
$('button.cancel').click(function (e) {
jqXHR.abort();
});
})
but this doesn't work and the code from docs crash everywhere: filesList doesn't exist
...etc
Well, I guess I need some basic guidance on jquery or javascript
Thanks in advance
You can also call abort()
on data
to cancel individual in-progress uploads.
$( '#fileUpload' ).fileupload( {
dataType: 'json',
add: function( e, data ) {
var abortBtn = $( '<a/>' )
.attr( 'href', 'javascript:void(0)' )
.append( 'Abort' )
.click( function() {
data.abort();
data.context.remove();
} );
data.context = $( '<div/>' )
.appendTo( document.body );
data.context.append( $( '<p/>' ) )
.append( 'Uploading ' + data.files[0].name )
.append( abortBtn );
data.submit();
},
done: function( e, data ) {
/* ... */
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With