Class Pot.Signal.DropFile

Defined in: <potlite.js>.

Class Summary
Constructor Attributes	Constructor Name and Description
	Pot.Signal.DropFile(target, (options)) Drop file constructor.

Method Summary
Method Attributes	Method Name and Description
	clearDropEvents() Clear drop events.
	upload(url, (options)) Upload the dropped files with specified options.

Class Detail

Pot.Signal.DropFile(target, (options))

Drop file constructor.

  // This example using jQuery.
  var panel = $('<div/>')
    .css({
      position   : 'fixed',
      left       : '10%',
      top        : '10%',
      width      : '80%',
      height     : '80%',
      minHeight  : 200,
      background : '#ccc',
      border     : '2px solid #999',
      zIndex     : 9999999
    })
    .hide()
    .text('Drop here')
    .appendTo('body');
  var dropFile = new Pot.DropFile(panel, {
    onShow : function() { panel.show() },
    onHide : function() { panel.hide() },
    onDrop : function(files) {
      panel.text('dropped');
    },
    onLoadImage : function(data, name, size) {
      $('<img/>').attr('src', data).appendTo('body');
    },
    onLoadText : function(data, name, size) {
      $('<textarea/>').val(data).appendTo('body');
    },
    onLoadUnknown : function(data, name, size) {
      $('<textarea/>').val(data).appendTo('body');
    },
    onLoadEnd : function(files) {
      this.upload(
        'http://www.example.com/',
        'dropfiles'
      ).then(function() {
        alert('finish upload.');
      });
    }
  });
  alert("Let's try drag and drop any file from your desktop.");

Parameters:
{Element|String} target: Target element or id.
{Object|String} (options): Options for drop file: ------------------------------------- - onShow : {Function} Should display a message that is able to dropped. - onHide : {Function} Should hide a message that is not able to dropped. - onDrop : {Function} Called when a file is dropped. - onLoadImage : {Function} Called when a file is loaded as image. - onLoadText : {Function} Called when a file is loaded as text. - onLoadUnknown : {Function} Called when a file is loaded as unknown type. - onLoadEnd : {Function} Called when a file is loaded. (i.e. enable to upload). -------------------------------------

Returns:: {DropFile} Return an instance of Pot.DropFile.

Method Detail

clearDropEvents()

Clear drop events.

{Function} upload(url, (options))

Upload the dropped files with specified options.

  // This example using jQuery.
  var panel = $('<div/>')
    .css({
      position   : 'fixed',
      left       : '10%',
      top        : '10%',
      width      : '80%',
      height     : '80%',
      minHeight  : 200,
      background : '#ccc',
      border     : '2px solid #999',
      zIndex     : 9999999
    })
    .hide()
    .text('Drop here')
    .appendTo('body');
  var dropFile = new Pot.DropFile(panel, {
    onShow : function() { panel.show() },
    onHide : function() { panel.hide() },
    onDrop : function(files) {
      panel.text('dropped');
    },
    onLoadImage : function(data, name, size) {
      $('<img/>').attr('src', data).appendTo('body');
    },
    onLoadText : function(data, name, size) {
      $('<textarea/>').val(data).appendTo('body');
    },
    onLoadUnknown : function(data, name, size) {
      $('<textarea/>').val(data).appendTo('body');
    },
    onLoadEnd : function(files) {
      this.upload(
        'http://www.example.com/',
        'dropfiles'
      ).then(function() {
        alert('finish upload.');
      });
    }
  });
  alert("Let's try drag and drop any file from your desktop.");

Parameters:
{String} url: Target url to upload.
{Object|String|*} (options): Upload options. Available parameters: ----------------------------------- - key : {String} The file data key name in query string if specify. (default = 'file'). - sendContent : {Object|Array} Other parameters if you need. -----------------------------------

Returns:: {Deferred} Return the Pot.Deferred instance.

Classes

Class Pot.Signal.DropFile