-
-
Save excid3/01a0649f84cfc65124dc45ba131032e8 to your computer and use it in GitHub Desktop.
JQuery File Upload, Amazon S3 and Shrine - rendering with a partial
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- app/views/attachments/_attachment.html.erb --> | |
<div class="attachment-image col-xs-6 col-sm-4 col-md-3" id="attachment_<%= @report.slug %><%= attachment.id %>elv1"> | |
<div class="row"> | |
<div class="attached-image-wrapper col-xs-12"> | |
<a class="attached-image" data-lightbox="report-attachment" style="background-image:url('<%= attachment.image_url(:preview) %>');" href="<%= attachment.image_url(:original) %>"></a> | |
</div> | |
</div> | |
<div class="attachment-options-wrapper"> | |
<%= link_to '<i class="fa fa-download"></i> Download'.html_safe, attachment.image_url(:original), class: 'attachment-options' %> | |
<%= link_to '<i class="fa fa-trash-o"></i> Delete'.html_safe, [attachment.report, attachment], class: 'attachment-options', method: :delete, remote: true %> | |
</div> | |
</div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# app/views/reports/_attachment.json.jbuilder | |
json.extract! attachment, :id, :report_id, :created_at, :updated_at | |
json.preview_image_url attachment.image_url(:preview) | |
json.original_image_url attachment.image_url(:original) | |
json.url report_attachment_url(@report, attachment, format: :json) | |
json.report_id attachment.report_id | |
json.template render(partial: "attachments/attachment", locals: { attachment: attachment }, formats: [:html]) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- app/views/reports/show.html.erb --> | |
... | |
<div class="row" id="img-attachments"> | |
<div class="col-xs-12"> | |
<h3>Attachments</h3> | |
</div> | |
<div id="all-attachment-images"> | |
<%= render @report.attachments %> | |
</div> | |
</div> | |
<div class="row"> | |
<%= render "attachments/form" %> | |
</div> | |
... |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# app/views/reports/show.json.jbuilder | |
json.partial! "attachments/attachment", attachment: @attachment |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// app/assets/javascripts/uploads.js | |
$(document).on("turbolinks:load", function() { | |
$("[type=file]").fileupload({ | |
add: function(e, data) { | |
data.progressBar = $('<div class="progress" style="width: 300px"><div class="progress-bar"></div></div>').insertBefore(".new_attachment"); | |
var options = { | |
extension: data.files[0].name.match(/(\.\w+)?$/)[0], // set the file extension | |
_: Date.now() // prevent caching | |
}; | |
$.getJSON("/images/upload/cache/presign", options, function(result) { | |
data.formData = result.fields; | |
data.url = result.url; | |
data.paramName = "file"; | |
data.submit(); | |
}); | |
}, | |
progress: function(e, data) { | |
var progress = parseInt(data.loaded / data.total * 100, 10); | |
var percentage = progress.toString() + '%'; | |
data.progressBar.find(".progress-bar").css("width", percentage).html(percentage); | |
}, | |
done: function(e, data) { | |
data.progressBar.remove(); | |
console.log("done", data); | |
var image = { | |
id: data.formData.key.match(/cache\/(.+)/)[1], // we have to remove the prefix part | |
storage: 'cache', | |
metadata: { | |
size: data.files[0].size, | |
filename: data.files[0].name.match(/[^\/\\]+$/)[0], // IE return full path | |
mime_type: data.files[0].type | |
} | |
}; | |
var form = $(this).closest("form"); | |
var form_data = new FormData(form[0]); | |
form_data.append($(this).attr("name"), JSON.stringify(image)); | |
console.log(image); | |
$.ajax(form.attr("action"), { | |
contentType: false, | |
processData: false, | |
data: form_data, | |
method: form.attr("method"), | |
dataType: "json", | |
success: function(response) { | |
console.log("this is the response", response ); | |
// This renders the attachment image in the same style as the _attachment.html.erb partial - missing download an delete links tho | |
$("#img-attachments").append(response.template); | |
} | |
}); | |
} | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment