StikJS refactoring example

edit_profile.coffee

$("#user_picture").change ->
  userPictureFileName = $(this).val().split('\\').pop();
  $("#user_picture_text").html(userPictureFileName)
  files = this.files
  reader = new FileReader()
  reader.readAsDataURL(files[0])
  reader.onloadend = ->
    $("#profile_pic").css("background-image", "url(" + this.result + ")")

$("#user_cover_photo").change ->
  userCoverFileName = $(this).val().split('\\').pop();
  $("#user_cover_text").html(userCoverFileName)
  files = this.files
  reader = new FileReader()
  reader.readAsDataURL(files[0])
  reader.onloadend = ->
    $("#blog_cover").css("background-image", "url(" + this.result + ")")

edit_profile.slim

#blog_cover style="background-image:url(#{@user.cover_photo_url})"
#profile_pic style="background-image:url(#{@user.thumb_picture_url})"

.form-group
  label for="user_picture" Profile picture
  input accept="image/jpeg, image/png, image/jpg" id="user_picture" name="user[picture]" type="file"
  label.replace" for="picture" id="user_picture_text" Upload a profile picture

.form-group
  label for="user_cover_photo" Cover photo
  input accept="image/jpeg, image/png, image/jpg" id="user_cover_photo" name="user[cover_photo]" type="file"
  label.replace" for="cover_photo" id="user_cover_text" Upload a cover picture

new_edit_profile.coffee

stik.behavior 'url-updatable-recipient', ($template, $courier, $data) ->
  $courier.$receive "picture-changed:#{$data.channel}", (url) ->
    $template.style.backgroundImage = "url(" + url + ")"

stik.behavior 'url-updatable', ($template, $courier, $data) ->
  inputFile = $template.querySelector("input[type=file]")
  textContainer = $template.querySelector(".replace")

  $template.onchange = ->
    textContainer.innerHTML = inputFile.value.split('\\').pop()
    reader = new FileReader()
    reader.onloadend = (event) ->
      $courier.$send "picture-changed:#{$data.channel}", event.target.result
    reader.readAsDataURL inputFile.files[0]

new_edit_profile.slim

#blog_cover.url-updatable-recipient data-channel="cover-pic" style="background-image:url(#{@user.cover_photo_url})"
#profile_pic.url-updatable-recipient data-channel="profile-pic" style="background-image:url(#{@user.thumb_picture_url})"

.form-group.url-updatable data-channel="profile-pic"
  label for="user_picture" Profile picture
  input accept="image/jpeg, image/png, image/jpg" id="user_picture" name="user[picture]" type="file"
  label.replace" for="picture" id="user_picture_text" Upload a profile picture

.form-group.url-updatable data-channel="cover-pic"
  label for="user_cover_photo" Cover photo
  input accept="image/jpeg, image/png, image/jpg" id="user_cover_photo" name="user[cover_photo]" type="file"
  label.replace" for="cover_photo" id="user_cover_text" Upload a cover picture