Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Adding images to the page as they are uploaded #2

Open
wants to merge 1 commit into from

2 participants

@felipecsl

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 :)

@ncri
Owner

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?

@felipecsl

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?

@ncri
Owner

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

@felipecsl

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.
View
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.
View
15 app/assets/javascripts/uploads.js.coffee.erb
@@ -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' />")
+ remove_btn.click () ->
+ $(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'
View
24 app/assets/stylesheets/uploads.css.scss
@@ -59,4 +59,28 @@ progress{
.remove_link{
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;
+ }
+ }
}
View
2  app/controllers/uploads_controller.rb
@@ -6,7 +6,7 @@ def index
def create
@upload = Upload.new(params[:upload] || params.delete_if{ |p| !Upload.attribute_names.include?(p) })
- render nothing: true if @upload.save
+ @upload.save ? render(json: @upload.id) : render(nothing: true)
end
end
Something went wrong with that request. Please try again.