file api with jquery

I have been working on a pure html website last year called iscriptdesign. It focuses on parameterized design with svg. Templates with svg and javascript code are processed, so that the user input gets evaluated by embedded javascript producing the svg. The svg can be exported, and you can use the output for a laser cutter or water cutter. Check it out ! One of the major shortcomings is the fact that it is not easy to display templates yourself. I was not able to load the template contents by a file uri, and so I had to rely on the templates on the same server as the html/javascript code for iscriptdesign resided. In the back of my mind I was looking for a more cms like approach to allow for personal uploads from third parties.

Until recently I started to realize the possibilities of the html5 file api. How sweet would it be if people could just drag n drop a template from their local filesystem on a drop spot of iscriptesign? Yesterday I started working on the project and now it's finished.

One of the real challenges was to incorporate it in jquery. Okay not really necessary of course but having the greater part of my website in jquery does make it somewhat desirable and you overtyping an example is not challenging is it?
help from stackoverflow and javaranch gave me head start (now that is challenging).

code

jQuery.fn.initDrop = function() {
  return this.each(function () {
    $(this).bind("dragover", function () {$(this).addClass('focus');$(".drop_container").addClass('focus'); return false;});
    $(this).bind("dragleave",function () {  $(this).removeClass('focus');$(".drop_container").removeClass('focus'); return false;}); 
    $(this).bind("drop",function(e) {
      $(".focus").removeClass("focus");
      $(".drop_container").addClass('focus');
      e.preventDefault();  
      var file = e.originalEvent.dataTransfer.files[0];  
      var reader = new FileReader();  
      reader.onload = function (evt) {
        digestRaw(evt.target.result, true);
      }; 
      reader.readAsText(file);  
    });
    $(this).prepend('
');
  });
};

The div label dropspot is a simple div tag.

  <div class="dropspot" id="dropspot">Drop Spot</div>

Which gets its drop behavior by:

        $("#dropspot").initDrop();

Lessons

• Unfortunately I only found this working for Firefox (Mac and Windows) and Chrome (Mac, Windows not tested). Safari is not supporting this yet.


• dropevent needs to be unwrapped by retrieving e.orginalevent.


• dragend is not working should be dragleave.


• In my case i need to remove linefeed/carriage return characters for windows(msdos) files I need to do a text.replace("result.replace(/\r\n?|\n/g, "");