Account Options

...

Code

Code

Sample Code

Using BrowserPlus™ is simpler than you might think. We've created some samples to demonstrate how simple. If BrowserPlus is installed, you'll be also be able to run the samples on this page.

Introduction

Check for and initialize BrowserPlus.

Detecting BrowserPlus

How to detect if BrowserPlus is installed.

Using Services

How to specify in your webpage what BrowserPlus services you require.

Errors & Return Values

How results are asynchronously returned.

Drag and Drop

Hooking up a drop target in a webpage.

Accessing Files

Previewing and getting contents of files that users select.

Uploading Modified Images

A demo showing how to use ImageAlter and Upload in a chain to upload images altered on the client.

File Zipper

A demo showing how to use Zipper and Upload in a chain to compress all files into one *.zip file before uploading.

All About Uploading

A demonstration of the various features of the uploader service.

Image Twiddler

A complete web application that demonstrates client side image manipulation, tying together the concepts thus far.

Publish Subscribe

Shows how two different browser windows (even from different browsers) can send messages back and forth.

Drag and Drop

<html>
  <head><title>Your first drop target</title>
  <style type="text/css" media="screen">
    #myTarget { width: 200px; height:200px; border: 1px solid #999; }
  </style>
</head>

<body>
<div id="myTarget"> loading... </div>
<p>
<div id="lastDropDetails"></div>

function hovering(hoverOn) {
  if (hoverOn) {setDropAreaText("drop it!");}
  else {setDropAreaText("drag something to me.");}
}

function dropped(arg) {
  var div = document.getElementById("lastDropDetails");
  while (div.firstChild) {div.removeChild(div.firstChild);}

var title = document.createElement("b");
  title.innerHTML = "Last drop details:";
  div.appendChild(title);                
  div.appendChild(document.createTextNode(arg.length +
    " files dropped"));
  div.appendChild(document.createElement("p"));
  var lst = document.createElement("ul");

for (var i = 0; i < arg.length; i++) {
    var item = document.createElement("li");
    var e = document.createTextNode(arg[i].BrowserPlusHandleName);
    item.appendChild(e);
    lst.appendChild(item);
  }
  div.appendChild(lst);
}

BrowserPlus.init(function(res) {
  if (res.success) {
   BrowserPlus.require({
      services: [{service: 'DragAndDrop'}]},
      function(res) {
        if (res.success) {
          var dnd = BrowserPlus.DragAndDrop;
          dnd.AddDropTarget(
            {id: "myTarget"},
            function(res) {
              dnd.AttachCallbacks({
                id: "myTarget",
                hover: hovering,
                drop: dropped
              },
              function(){});  
            setDropAreaText("drag something to me.");
          });
        } else {
          alert("Error Loading DragAndDrop: " + res.error);
        }
      });
  } else {
    alert("Failed to initialize BrowserPlus: " + res.error);
  }
}); 
</script> 
</body>
</html>

Run this Code

Description

The BrowserPlus DragAndDrop service allows a web developer to make any HTML node a target for native drops of files. The general usage of DragAndDrop is thus:

Developer requires() the DragAndDrop built-in service
DragAndDrop.AddDropTarget() is used to make a HTML entity an active dropzone.
DragAndDrop.AttachCallbacks() indicates which functions should be called when the user hovers over the drop area, and what should be called when the user drops on the zone.
When the end user hovers or drops, the callbacks set are invoked.

DragAndDrop gives javascript a means of attaining opaque FileHandles, which can then be passed to other services, such as ImageAlter. A "FileHandle" is simply a javascript object which contains an opaque numeric identifier of the selected file, and a "display name" in the BrowserPlusHandleName property. The latter is simply the filename with path information removed, which makes it meaningful for display to the end user.