D&D from OS?

[Guest tendon]

Does/will UniGui support Drag & Drop from the OS into the browser? e.g. dragging files from the desktop, mail program attachment, file managers, etc. into some drop area of a UniGui component?

[Guest tendon]

Does/will UniGui support Drag & Drop from the OS into the browser? e.g. dragging files from the desktop, mail program attachment, file managers, etc. into some drop area of a UniGui component?

 

Replying to myself here... I get to the conclusion that UniGui does not support this out of the box.

 

Inspired by this: http://www.thebuzzmedia.com/html5-drag-and-drop-and-file-api-tutorial/

 

I wonder how to add your own custom JavaScript event listeners.

 

Say I have a panel called DropTarget. Can I add events by doing this?...

 

  DropTarget.ClientEvents.ExtEvents.Add(
   'Ondragenter=function dragEnter(e){e.stopPropagation();e.preventDefault();}'
 );
 DropTarget.ClientEvents.ExtEvents.Add(
   'Ondragexit=function dragExit(e){e.stopPropagation();e.preventDefault();}'
 );
 DropTarget.ClientEvents.ExtEvents.Add(
   'Ondragover=function dragOver(e){e.stopPropagation();e.preventDefault();}'
 );
 DropTarget.ClientEvents.ExtEvents.Add(
   'Ondrop=function drop(e){e.stopPropagation();e.preventDefault();'#13#10+
   'var files=e.dataTransfer.files;'#13#10+
   'var count=files.length;'#13#10+
   'if(count>0) alert(''Dropped ''+count+'' files'');}'
 );

and will this produce code equivalent to this JavaScript?:

 

	dropTarget.addEventListener("dragenter", dragEnter, false);
dropTarget.addEventListener("dragexit", dragExit, false);
dropTarget.addEventListener("dragover", dragOver, false);
dropTarget.addEventListener("drop", drop, false);

Naturally I need to set the DOM Id accordingly, so on the Pascal side I do a

 

  DropTarget.ExtControls.Id := 'dropTarget';

 

Does this make sense? (I cannot get it to work, though! Farshad, please advise!)

 

The real question is: Is it possible to add custom client events, as shown above; i.e. eventes which are not listed in the original UniGui component?

[Guest tendon]

Is going through ExtControl.On(...) another option for this?

 

Farshad?

[Farshad Mohajeri]

What is the type of DragDrop object?

DropTarget.ClientEvents.ExtEvents.Add(
   'Ondragenter=function dragEnter(e){e.stopPropagation();e.preventDefault();}'
 );

 

Ondragenter?? Is this event supported by Ext JS?

 

Your above syntax only works for predefined events in Ext JS. Besides your referred article is about D6D in HTML5 not in Ext JS.

[Guest tendon]

What is the type of DragDrop object?

DropTarget.ClientEvents.ExtEvents.Add(
   'Ondragenter=function dragEnter(e){e.stopPropagation();e.preventDefault();}'
 );

 

Ondragenter?? Is this event supported by Ext JS?

 

Your above syntax only works for predefined events in Ext JS. Besides your referred article is about D6D in HTML5 not in Ext JS.

 

AFAIK ExtJS events are "normal" JavaScript events.

 

Then we have this:

 

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.dd.DragDrop-method-onDragEnter

 

(Of course, I know, it is for ExtJS 4...)

 

In general: if ClientEvents.ExtEvents does not list all possible events, is it possible to add new/missing ones simply by adding strings like I tried? (notwithstanding that I am still interested in knowing how to do DnD.)

[Farshad Mohajeri]

AFAIK ExtJS events are "normal" JavaScript events.

 

Not always. Please note that your article is for HTML5 not regular DOM.

 

Then we have this:

 

http://docs.sencha.c...hod-onDragEnter

 

it is for Ext.dd.DragDrop component which currently have no equivalent in uniGUI.

 

In general: if ClientEvents.ExtEvents does not list all possible events, is it possible to add new/missing ones simply by adding strings like I tried? (notwithstanding that I am still interested in knowing how to do DnD.)

 

Ext JS implements almost all major events. It is not easy to extend JS new events from Delphi code.

[Guest tendon]

Not always. Please note that your article is for HTML5 not regular DOM.

 

it is for Ext.dd.DragDrop component which currently have no equivalent in uniGUI.

 

Ext JS implements almost all major events. It is not easy to extend JS new events from Delphi code.

 

OK.

 

Let me split this in two questions then:

 

1) ExtJS 4 is generating HTML5. UniGui will be updated to ExtJS 4 before it is released, right? (Please confirm!). If this is indeed the case, how can one implement the DnD from the OS to the web browser, given that we have a UniGui generated page there. Is it possible? yes or no? If yes, how?

 

2) In general, you have a customCSS property somewhere... why not add a customJS property too, where you could hook in your own JS. Or is there any simpler way to "inject" a script tag referencing some .js file?

[Farshad Mohajeri]

OK.

 

Let me split this in two questions then:

 

1) ExtJS 4 is generating HTML5. UniGui will be updated to ExtJS 4 before it is released, right? (Please confirm!). If this is indeed the case, how can one implement the DnD from the OS to the web browser, given that we have a UniGui generated page there. Is it possible? yes or no? If yes, how?

 

2) In general, you have a customCSS property somewhere... why not add a customJS property too, where you could hook in your own JS. Or is there any simpler way to "inject" a script tag referencing some .js file?

 

1) No. Ext4 generates conventional DOM. Ext.dd.DragDrop is also available in Ext3. One may be able to implement it. I can't say yes or no at this stage because I can't dedicate much time to investigate possibility of D&D in Ext JS or uniGUI.

 

2) We have Script property in UniForm where you can put custom JS code.

[Oliver Morsch]

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>

[Guest tendon]

simply put this code in an UniHtmlFrame:

 

Morsch... that's brilliant. Thanks!

 

I didn't think about using the UniHtmlFrame for hosting a script; but in hindsight it is obvious!

[acbarbosa]

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>

 

Works perfect!

 

How could I send the image to server or a dataset (BLOB Field)?

[Oliver Morsch]

 

How could I send the image to server or a dataset (BLOB Field)?

 

see here:

 

http://forums.unigui.com/index.php?/topic/2490-multiple-file-upload/?p=11814

[acbarbosa]

see here:

 

http://forums.unigui.com/index.php?/topic/2490-multiple-file-upload/?p=11814

It works!

 

Thank you.