Skip to content

Instantly share code, notes, and snippets.

@glideranderson

glideranderson/pet_form.html.haml

Created August 22, 2012 17:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save glideranderson/3427820 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save glideranderson/3427820 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. glideranderson created this gist Aug 22, 2012.
    25 changes: 25 additions & 0 deletions pet_form.html.haml
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    .control-group.required.upload-photos
    = f.label 'Upload files', required: false
    .controls
    .file-upload-wrapper
    = link_to '#', class: 'file-upload red-btn' do
    %i.icons.upload
    Upload
    = f.input :attachment,
    as: :file,
    wrapper_html: { class: 'hidden-upload' },
    input_html: { multiple: 'multiple' }
    .file-text
    .file
    = link_to 'Delete', '#', class: 'red delete-upload-file'
    .file-upload-wrapper.frame-to-copy.hidden
    = link_to '#', class: 'file-upload red-btn' do
    %i.icons.upload
    Upload
    = f.input :attachment,
    as: :file,
    wrapper_html: { class: 'hidden-upload' },
    input_html: { multiple: 'multiple' }
    .file-text
    .file
    = link_to 'Delete', '#', class: 'red delete-upload-file'
    48 changes: 48 additions & 0 deletions ppm.js.coffee
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,48 @@
    # pet creation photo uploader
    $('.add-a-pet .upload-photos a.file-upload').on('click', (e)->
    e.preventDefault()
    clicked = $(this)
    parent_wrapper = clicked.closest('.file-upload-wrapper')
    hidden_upload = parent_wrapper.find('.hidden-upload').find('input')
    file_text = parent_wrapper.find('.file-text')
    delete_file = parent_wrapper.find('.delete-upload-file')

    hidden_upload.trigger('click')

    hidden_upload.change ->
    if Modernizr.input.multiple
    $uploads = this.files
    file_val = '<p>You uploaded ' + this.files.length + ' files: <br/><br/>'
    # loop thru multiple files
    for f in $uploads
    file_val = file_val + f.name + ',<br/> '
    if this.files.length > 6
    file_val = file_val + '<br/> Only the first 6 will be uploaded'
    else
    parent = parent_wrapper.closest('.controls')
    cloned = parent.find('.frame-to-copy').clone()
    parent_wrapper.after(cloned.removeClass('frame-to-copy').removeClass('hidden'))
    file_val = file_val + '</p>'
    else
    file_val = $(this).val()
    file_val = if file_val.length then file_val.split('\\').pop() else ''
    file_text.find('.file').html(file_val)
    file_text.show()
    clicked.hide()

    # if html5 multiple attribute not supported
    if not Modernizr.input.multiple
    # count num of uploaders, max = 6, add new upload button
    parent = parent_wrapper.closest('.controls')
    uploader_count = parent.find('.file-upload-wrapper').not('.frame-to-copy').length
    if uploader_count < 6
    cloned = parent.find('.frame-to-copy').clone()
    parent_wrapper.after(cloned.removeClass('frame-to-copy').removeClass('hidden'))

    delete_file.on('click', (e) ->
    e.preventDefault()
    file_text.hide()
    clicked.show()
    alert('This will remove said uploaded file')
    )
    )