Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP


Adding images to the page as they are uploaded #2

wants to merge 1 commit into from

2 participants


When you're uploading images, it is very likely that you wanna display them to the user right away.
I just realized as I am typing this, that the uploader can be used for other types of files as well, but if you are uploading images, this is very convenient and will put image tags in the page with thumbnails of the images you just uploaded. Since not necessarily the files will be images, we might need to think whether or not it is desirable to have this feature. Anyway, I had to write it, so if you think it can be useful, let me know :)


Hi, this looks good! However, maybe we better keep it as a separate fork, to keep the example basic? You could add a link to your fork to the readme though. It would also be good to support non image files, as you suggest. Maybe you could display an icon (or just the filename) for non image files. What do you think?


I like the idea of displaying an icon + filename for non images
We could have a basic set of icon for, let's say, pdf, doc, txt, zip, etc. and a generic one for all other types, like a gear, for example. Below we could show the filename as well.

This should be easy to do, I can include in the pull request, but I think the question is, do you think it makes sense to include it in the project or you rather keep it separated?


Sounds good. Well, I think we could include it. But can you add some comments to document the js in the success callback? Thanks!


Sure, will do. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Apr 6, 2012
  1. @felipecsl
This page is out of date. Refresh to see the latest.
BIN  app/assets/images/delete.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 app/assets/javascripts/
@@ -37,7 +37,20 @@ jQuery ->
$.ajax $('#uploader iframe').data('create-resource-url'),
type: 'POST',
- data: data
+ data: data,
+ dataType: 'text',
+ success: (upload_id) ->
+ wrapper = $('<div class="wrapper"></div>')
+ img = $('<img class="thumb">')
+ remove_btn = $("<img src='<%= asset_path('delete.png') %>' class='delete' />")
+ () ->
+ $(this).parent().fadeOut(() -> $(this).remove())
+ img_id = $('<input type="hidden" name="uploads[]" />')
+ img.attr('src', "#{uploaderHost}/#{data.s3_key}/#{data.file_name}")
+ img.attr('data-img-id', upload_id)
+ img_id.val(upload_id)
+ wrapper.append(img).append(img_id).append(remove_btn)
+ $('#uploader').append(wrapper)
when 'add upload'
24 app/assets/stylesheets/uploads.css.scss
@@ -59,4 +59,28 @@ progress{
color: red;
text-decoration: none;
+#uploader {
+ .wrapper {
+ position: relative;
+ display: inline-block;
+ &:hover {
+ .delete {
+ display: block;
+ }
+ }
+ .thumb {
+ height: 100px;
+ margin-right: 5px;
+ }
+ .delete {
+ display:none;
+ position: absolute;
+ top: 2px;
+ right: 7px;
+ background: white;
+ cursor: pointer;
+ }
+ }
2  app/controllers/uploads_controller.rb
@@ -6,7 +6,7 @@ def index
def create
@upload =[:upload] || params.delete_if{ |p| !Upload.attribute_names.include?(p) })
- render nothing: true if
+ ? render(json: : render(nothing: true)
Something went wrong with that request. Please try again.