Drag and Drop Upload

by rajeshpillai

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.4.0/ember.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.0.0-beta.6/ember-data.min.js"></script>
<script type="text/x-handlebars">
    <body>
    <div class='shadowBox'>{{view App.NewImagesContainer}}</div>
        {{view App.DropBoxView}}
    </body>       
</script>

<script type="text/x-handlebars" data-template-name="dropbox">
      <div class='dropBox'>Drop Here</div>
</script>

<script type="text/x-handlebars" data-template-name="newImageDetails">
        <div class='newImageDetails'>
            <img class='newImage' {{bind-attr src='view.src'}} /><br />
            {{view Ember.TextField value=view.title}}
            <button type='button' {{action 'cancel' target='view'}}>Cancel</button>
            <button type='button' {{action 'submit' target='view'}}>Submit</button>       
        </div>
</script>

CSS

.shadowBox {
    display: none;
    position: fixed;
    top: 0; left: 0;
    background-color: rgba( 0, 0, 0, .8);
    overflow: scroll;
    z-index: 500;
}

.dropBox {
  height: 150px;
  width: 200px;
  text-align: center;
  font-size: 2em;
  background-color: #333;
  margin-top: 50px;
}

.newImageDetails {
    margin: 0 auto;
    padding: 5%;
    width: 90%;
    text-align: center;
    z-index: 200;
}

JavaScript

window.App = Ember.Application.create();

 var container = Ember.ContainerView.extend({
   observeLength: function(){
     if (this.get('length') > 0){
       $('.shadowBox').width($(window).width());
       $('.shadowBox').height($(window).height());
       $('.shadowBox').fadeIn();
     } else {
       $('.shadowBox').fadeOut();
     }
   }.observes('length')
 });

App.NewImagesContainer = container.create();

App.DropBoxView = Ember.View.extend({
    templateName: 'dropbox',
    
        /* drag enter/over need to be set to prevent exploding
         * will add css effects here in future */
        dragEnter: function(event) {
            event.preventDefault();
        },

        dragOver: function(event) {
            event.preventDefault();
        },

        drop: function(event) {
            event.preventDefault();
            /* Loop through each dropped photo, create new view for the images */
            var files = event.dataTransfer.files;
            for (var i = 0; i < files.length; i++){
                //console.log(files[i]);
                if (files[i].type.match("image.*")) {
                  /* Push a new view representing our photo to the container within the shadowbox */
                  App.NewImagesContainer.pushObject(App.NewImagesView.create({
                    file: files[i],
                  }));
                }
            }
      },
});

App.NewImagesView = Ember.View.extend({
    templateName: 'newImageDetails',
    title: 'Untitled', /* Default title */
    src: '', /* Image preview */
    /* file: is set upon create during drop event */
    /* For file preview, get the image data */
    setsrc: function(){
      var that = this;
      var reader = new FileReader();
      reader.readAsDataURL(this.get('file'));
      reader.onload = function(imgsrc){
        that.set('src', imgsrc.target.result);
      }
    }.observes('file').on('init'),

    actions: {

        /* fade out / remove photo, if lightbox is empty, fade it...