how do you find the file type of what the mouse is dragging?

[Dorky]

just as the title says. i have been looking for days about how to find what the mouse is dragging to switch the ondragover event between true and preventDefault. i am on 5 forums and searching every second under different terms, does this mean i'm not socializing properly or does this answer just not exist! does anyone actually read these threads?

[DracoMerest]

Your question is something I have never had to answer myself. The logistics of
recreating what you have is beyond my care, bother and energy. You've expressed
yourself clearly enough but never supplied enough source for me to bother examining.

An online attempt would be helpful. If it is a complicated setup comprising more than 2
or 3 files, then I'd want to download the entire project as one ZIP file.

If you can supply a concise example featuring only an in-page object or two to drag and
a place to drag them, with a specifically acceptable external file to test, then I'd be
willing to investigate further.

Show me some effort and I'll return the favour.

[DracoMerest]

Ok, I did a big of digging into the contents of an onDragOver event using IE7 by
attempting to alert(event); which caused an instant hang. Debugging IE7 and
navigating my way up the return stack, I managed to locate a chained list of nodes.

There are a heap of values associated with an event: mouse x and y relative to the
page and screen, source element object, event type and so on. All the thing you
already know or don't care about. ALT/SHIFT/CTRL keys, button number and so on.
Even something caled 'wheelDelta' but I do not know if that has anything to do with
the mouse wheel.

Then I found an attribute of the event called dataTransfer:

event.dataTransfer.dropEffect
event.dataTransfer.effectAllowed

Tests show that dropping an image or page text gives a dropEffect of 'copy' and
dropping editable text gives a value of 'none'. effectAllowed always contains
'unitialized'.

I am still not sure how you managed to drag and drop a file object onto the browser
without having it evaluate the type automatically and either load the object into the
page or launch an associated application for the data type.

Here is an example of drag and drop from Microsoft:
http://samples.msdn.microsoft.com/wo...opEventsEX.htm

And here are al the attributes of the onDragOver event from MS:
http://msdn.microsoft.com/en-us/libr...=vs.85%29.aspx

[Dorky]

ok, i'm sure it's poorly constructed but like i have about one week with javascript but two years with php

<?php

$listen ="\n<script>
function prDe(){ event.preventDefault(); };
var holder = document.getElementById('article');
holder.ondragover = function () { prDe(); };
holder.ondrop = function (e) {
var file = e.dataTransfer.files[0],
reader = new FileReader();
reader.onload = function (event) {
var Img_Src =event.target.result;
document.execCommand('InsertImage',null,Img_Src); };
reader.readAsDataURL(file);
return false; };
</script>";

//  Backup send for image upload>>>>>>>>>>>>>>>>>>>>>>>>>
//  var xmlhttp;
//  xmlhttp=new XMLHttpRequest(); 
//  xmlhttp.onreadystatechange=function()
//  {
//  document.getElementById('condition_return').innerHTML=xmlhttp.responseText;}
//  xmlhttp.open(\"POST\",\"index_services/upload.php\",true);
//  xmlhttp.setRequestHeader(\"Content-Type\",\"application/x-www-form-urlencoded\");
//  xmlhttp.send(\"send=\" + Img_Src + \"&page_pointer=$page_pointer&key=$fetch_user_session_data[0]\"); 
//???????????????????????????????????????????????????????
if(isset($_GET[page])){ $page_pointer =$_GET[page]; }
else{ $page_pointer ="home"; }
$cms_html ="
<div id='cms_tools_upper'>
<button onclick=\"document.execCommand('justifyleft');\">Justify Left</button>
<button onclick=\"document.execCommand('justifycenter');\">Justify Center</button>
<button onclick=\"document.execCommand('justifyright');\">Justify Right</button>
<button onclick=\"mL();\">Margin Left</button>
<button onclick=\"mR();\">Margin Right</button>
<button onclick=\"document.execCommand('outdent');\">Outdent</button>
<button onclick=\"document.execCommand('indent');\">Indent</button>
<button onclick=\"document.execCommand('subscript');\"><sub style='color: inherit; font-family: inherit;'>Sub</sub>script</button>
<button onclick=\"document.execCommand('superscript');\"><sup style='color: inherit; font-family: inherit;'>Super</sup>script</button>
<button onclick=\"document.execCommand('strikethrough');\"><strike style='color: inherit; font-family: inherit;'>Strike</strike></button>
<button onclick=\"document.execCommand('underline');\"><u style='color: inherit; font-family: inherit;'>U</u></button>
<button onclick=\"document.execCommand('italic');\"><i style='color: inherit; font-family: inherit;'>i</i></button>
<button onclick=\"document.execCommand('bold');\"><b style='color: inherit; font-family: inherit;'>B</b></button>
<button onclick=\"document.execCommand('fontSize', false, '1');\">X1</button>
<button onclick=\"document.execCommand('fontSize', false, '2');\">X2</button>
<button onclick=\"document.execCommand('fontSize', false, '3');\">X3</button>
<button onclick=\"document.execCommand('fontSize', false, '4');\">X4</button>
<button onclick=\"document.execCommand('fontSize', false, '5');\">X5</button>
</div>
<div id='cms_tools_lower'>
<div id='condition_return'></div>
<button onclick=\"ADDsection();\">Section</button>
<button onclick=\"document.execCommand('formatblock',false,'p');\">P</button>
<button onclick=\"document.execCommand('formatblock',false,'H1');\">H1</button>
<button onclick=\"document.execCommand('formatblock',false,'H2');\">H2</button>
<button onclick=\"document.execCommand('formatblock',false,'H3');\">H3</button>
<button onclick=\"document.execCommand('formatblock',false,'H4');\">H4</button>
<button onclick=\"document.execCommand('formatblock',false,'H5');\">H5</button>
<button onclick=\"document.execCommand('formatblock',false,'H6');\">H6</button>
<button onclick=\"document.execCommand('InsertHorizontalRule');\">HR</button>
<button onclick=\"document.execCommand('InsertUnorderedList');\">UL</button>
<button onclick=\"document.execCommand('InsertOrderedList');\">OL</button>
<button onclick=\"document.execCommand('insertHTML', false, prompt('HTML', ''));\">HTML</button>
<a onclick=\"document.getElementById('slide').setAttribute('class','slide_open'); document.getElementById('ic').setAttribute('class','open');\">Image</a>
<button onclick=\"document.execCommand('createLink', false, prompt('Enter a URL:', 'http://'));\">Link</button>
<button onclick=\"document.execCommand('Undo');\">Undo</button>
<button onclick=\"document.execCommand('redo');\">Redo</button>
<a href='$site/dashboard'>Dashboard</a>
<button onclick=\"loadXMLDoc();\">Save</button>
<div id='ic' class='xclose'>
<button onclick=\"document.getElementById('slide').setAttribute('class','slide_close'); document.getElementById('ic').setAttribute('class','xclose');\">Close</button>
</div>
<div id='slide' class='slide_close'>
$img_lib_collapsed
</div>
</div>";
$cms_css ="\n<link rel=\"stylesheet\" type=\"text/css\" href=\"index_services/cms.css\" />";
$cms_js ="\n<script type=\"text/javascript\">
function ADDsection() {
var genId = \"\";
var possible = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz\";
for( var i=0; i < 27; i++ )
genId += possible.charAt(Math.floor(Math.random() * possible.length));
var pageHolder=document.getElementById('article').innerHTML;
modPage =pageHolder + \"<section id='\" + genId + \"' class='section' contenteditable='true'>New Section</section>\";
document.getElementById('article').innerHTML= modPage; }

function mL() {
var setMarginLeft=prompt('Left Margin', '') +'px';
pAry=document.getElementById('article').getElementsByTagName('section');
for(i=0;i<pAry.length;i++)
pAry[i].style.marginLeft=setMarginLeft; 
}


function mR() {
var setMarginRight=prompt('Right Margin', '') +'px';
pAry=document.getElementById('article').getElementsByTagName('section');
for(i=0;i<pAry.length;i++)
pAry[i].style.marginRight=setMarginRight; 
}


function loadXMLDoc()
{
var tmpDOC = document.getElementById('article');
tmpDOC.focus();
tmpDOC.setAttribute('class','blind');
document.execCommand('SelectAll', true);
var senDOC =encodeURIComponent(tmpDOC.innerHTML);
var xmlhttp;
if (window.XMLHttpRequest)
{ xmlhttp=new XMLHttpRequest(); }
else
{ xmlhttp=new ActiveXObject(\"Microsoft.XMLHTTP\"); }
xmlhttp.onreadystatechange=function()
{ 
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{ 
document.execCommand('Unselect', true);
tmpDOC.setAttribute('class','section');
document.getElementById('condition_return').innerHTML=xmlhttp.responseText; }}
xmlhttp.open(\"POST\",\"index_services/edit.php\",true);
xmlhttp.setRequestHeader(\"Content-Type\",\"application/x-www-form-urlencoded\");
xmlhttp.send(\"send=\" + senDOC + \"&page_pointer=$page_pointer&key=$fetch_user_session_data[0]\");} 
</script>";

?>

the variables are included as follows

<head>
$cms_css
$cms_js
</head>
<body>
$cms_html
<nav></nav>
<article contenteditable='true'>

</article>
$listen

[DracoMerest]

Sorry Dorky, I have zero knowledge of PHP - none nada zip! I know JavaScript.

Have you seen this page: https://www.ibm.com/developerworks/m...page28?lang=en

AJAX example that does not work for me: http://blog.justswell.org/drag-and-d...ng-javascript/

Read up on The File API

This seems to work for images: http://www.thecssninja.com/javascript/fileapi

Here is one which is more descriptive: http://www.ajaxline.com/drag-and-drop-files-in-browsers