simply put this code in an UniHtmlFrame:
<script type="text/javascript">
function dragEnter(evt) {
evt.stopPropagation();
evt.preventDefault();
}
function dragExit(evt) {
evt.stopPropagation();
evt.preventDefault();
}
function dragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
}
function drop(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files;
var count = files.length;
// Only call the handler if 1 or more files was dropped.
if (count > 0)
handleFiles(files);
}
function handleFiles(files) {
var file = files[0];
document.getElementById("droplabel").innerHTML = "Processing " + file.name;
var reader = new FileReader();
// init the reader event handlers
reader.onload = handleReaderLoad;
// begin the read operation
reader.readAsDataURL(file);
}
function handleReaderLoad(evt) {
var img = document.getElementById("preview");
img.src = evt.target.result;
}
function initEventHandlers() {
var dropbox = document.getElementById("dropbox")
dropbox.addEventListener("dragenter", dragEnter, false);
dropbox.addEventListener("dragexit", dragExit, false);
dropbox.addEventListener("dragover", dragOver, false);
dropbox.addEventListener("drop", drop, false);
}
</script>
<div id="dropbox" style="background-color: #00AAFF; height: 40px">
<span id="droplabel">Drop file here...</span>
</div>
<br/>
<img id="preview" src="" alt="[ preview will display here ]" />
<script type="text/javascript">
initEventHandlers();
</script>