RichPicker input with removable content ?

[jerefrer]

How to allow the user to remove a file added with RichPicker ?

Why not have a little cross over the image that resets the form field value, just like it's done in the picker itself ?
Or add a "no image" choice in the picker ?

I know one can hack his own solution but why not embed this since it's I think a pretty common need ?

[bastiaanterhorst]

Good idea!

[jerefrer]

Since I need it for my app I made a working implementation of the first idea: show the same image/filename/delete link combo below the preview image as there is in the picker itself.

The thing is I did it for the SimpleForm branch mentionned in a pull request, as I don't use Formtastic. But most of the logic is not related to the inputs anyway. You can check it out here : Projets2Coeur@4673cdc

Also, to have the same styles as in the editor I had to use this bit of sass:

// Mixins
@mixin rounded($radius: 4px)
  -webkit-border-radius: $radius
  -moz-border-radius: $radius
  border-radius: $radius

@mixin box-shadow($x: 2px, $y: 2px, $blur: 4px, $color: blue)
  box-shadow: $x $y $blur $color
  -moz-box-shadow: set $x $y $blur $color
  -webkit-box-shadow: $x $y $blur $color

// Preview image
.rich-image-preview
  @include rounded
  @include box-shadow(0, 0, 4px, lighten(#686868, 40%))

.rich-image-preview-details
  position: relative
  .rich-image-preview-filename
    font-size: 10px
    margin: 0
    line-height: 17px
    height: 20px
    overflow: hidden
    text-overflow: ellipsis
    color: #888888
    width: 80px
  .rich-image-preview-delete
    position: absolute
    text-indent: -9999px
    margin-left: 80px
    margin-top: -20px
    width: 20px
    height: 20px
    background: url(/assets/rich/x-red.png) no-repeat right 5px
    opacity: 0.5
    &:hover
      opacity: 1