Gallery View for Backbone

gallery_view.coffee

@GuestServices.module "Components.Gallery", (Gallery, App, Backbone, Marionette, $, _) ->

  class Gallery.GalleryView extends App.Views.CompositeView
    ui:
      dropZone: ".dropzone"

    initialize: ->
      @$el.on("dragover", _.bind(@_showDropzone, @))

    buildItemView: (item, itemViewType, itemViewOptions) ->
      options = _.extend({model: item}, itemViewOptions)

      el = item.get("element")
      if el?
        item.unset("element")
        options = _.extend({el: el}, options)

      view = new itemViewType(options)
      view

    appendHtml: (collectionView, itemView, index) ->
      itemView.$el.addClass('hidden')
      itemView.$el.insertBefore(@$(@addSelector))

    onRender: ->
      @$('#fileupload').fileupload
        dropZone: @$(@itemViewContainer)
        headers:
          token: App.Entities.Session.getCurrentSession().get("token")
        dataType: 'json',
        add: (e, data) =>
          data.context = new App.Entities.Image(loading: true)

          reader = new FileReader()

          reader.onload = (e) =>
            data.context.set("gallery_path", e.target.result)
            @collection.push(data.context)
            data.submit()

          reader.readAsDataURL data.files[0]

        done: (e, data) =>
          data.context.unset("loading")
          data.context.set(data.result)

    onRender: ->
      @$("#{@itemSelector} img").on('load', _.bind(@_imageLoaded, @))
      @$('#fileupload').fileupload
        dropZone: @$(@itemViewContainer)
        headers:
          token: App.Entities.Session.getCurrentSession().get("token")
        dataType: 'json',
        add: (e, data) =>
          data.context = new App.Entities.Image(loading: true)

          reader = new FileReader()