FileUploader doesn't support drag & drop in IE and Edge if uploadMode is useForm

I don't get it. Drag & drop works fine in Edge when 'instantly' or 'useButtons' modes are using .
Just don't hide 'or Drop file here' area when 'useForm' is selected, that's will be enough.

Denis,

dxFileUploader is a wrapper of the standard <input type="file">. When using the "useForm" uploadMode, dxFileUploader uses the file's features for uploading and so has the same limitations. You can see the same behavior with the standard file element:

https://jsfiddle.net/wwxnfh34/

So, we do not hide anything manually, everything is done at the file element level. The  'instantly' and 'useButtons' modes are related to the DevExtreme uploading mechanism, where this limitation was overcome. As we cannot influence the standard load mechanism (when the "useForm" uploadMode is used), we cannot fix the problem with this approach. Hence, I suggest you use the "DevExtreme file loading" mechanism that is enabled when the  'instantly' or 'useButtons' mode is used.

>>The  'instantly' and 'useButtons' modes are related to the DevExtreme uploading mechanism, where this limitation was overcome
So why can't you use such a mechanism when 'useForm' mode is selected? It should be the same as in 'instantly' and 'useButtons' modes.
Also there are a lot of workarounds for IE/Edge to make drag&drop works: https://stackoverflow.com/questions/8006715/drag-drop-files-into-standard-html-file-input

Denis,
Most workarounds are related to external drop zones. You can use these workarounds with dxFileUploader as well. Here is an online example:
https://jsfiddle.net/5ub6feza/

JavaScript
function dropHandler(event) {  
  doNothing(event);  
  var filelist =  event.dataTransfer.files;  
  if (!filelist) return;  // if null, exit now  
  var filecount = filelist.length;  // get number of dropped files  

  if (filecount > 0) {  
    var fileInput = $("#file").dxFileUploader("instance");  
    fileInput.option("value", [event.dataTransfer.files[0]]);  

    var dropText = document.getElementById("dropText");  
    dropText.style.display = "none";  
  }  
}  
function doNothing(event) {  
  event.stopPropagation();  
  event.preventDefault();  
}  

$("#file").dxFileUploader({  
 uploadMode: 'useForm',  
  onContentReady: function() {  
    var dropArea = document.getElementById("dropContainer");  
   dropArea.addEventListener("drop", dropHandler, false);  
   dropArea.addEventListener("dragover", doNothing, false);  
  }  
})  

CSS
.dx-fileuploader-input-label {  
  visibility: hidden  
}  
.dx-fileuploader{  
  width: 120px;  
  float: left;  
}  
#dropText{  
  padding-top: 23px;  
}  

#dropContainer{  
  border:1px solid black;  
  height:170px;  
}  

You're already use external drop zone workaround in 'instantly' and 'useButtons' modes, aren't you? So why can't you do the same in 'useForm' mode?

Denis,
At present, we do not have plans to complicate dxFileUploader as this will likely impact the widget performance and the script weight and there is a simple workaround. Having weighed all pros and cons, we concluded that complicating dxFileUploader rendering to resolve one issue for a specific browser (for which there is an easy workaround) is not the best way to make dxFileUploader better. Nevertheless, we may change our decision in the future.

Please let me know if you encounter any difficulties in implementing the suggested approach. I will happy be to help you.

>>So, we do not hide anything manually, everything is done at the file element level
That's not. You manually hide dx-fileuploader-input-container block in IE/Edge. Also you are turn off javascript logic about this block. Is this a big problem to not do this?

Denis,

Please accept my apologies for misunderstanding. I supposed you meant the <input type="file"> element's "No file chosen" text.

I have discussed the reason of hiding the dx-fileuploader-input-container with our developers and have the following results. As IE does not support dragging for a file, a dragged image is opened in a browser. When using the "instantly" and "useButtons" uploadMode, we prevent this action and use our own input element for this. The same mechanism cannot be used with the "useForm" mode because there is no way to add the uploaded file into form data and so even if we show the uploaded file, it will be not sent to the server. The dx-fileuploader-input-container element is used for catching a file and thus showing it does not make sense as the "useForm" mode means sending the file via form data.

When using the "instantly" and "useButtons" uploadMode, we prevent this action and use our own input element for this. The same mechanism cannot be used with the "useForm" mode because there is no way to add the uploaded file into form data
Such mechanism can  be used. I had to spend my time and did it by myself. Please follow this example DevExtreme FileUploader drag&drop Edge support . Now drag&drop use your workaround and works fine in Edge/IE as well as in Chrome. I can't imaging why can't you do this in your component

Denis,

The main point is that it is not possible to add the uploaded file into a form. As the "useForm" upload mode means that data should be sent to the server via the form, the "useForm" mode does not make any sense without this functionality. In your example, I did not find how you add data into FormData either. If I am wrong, please point me to the line code.

As you probably know, there is the FormData.append() method, which however is not supported by IE9. SinceDevExtreme supports IE9, we cannot use this method. The solution for IE9 provided in the Internet is to use AJAX: Uploading files using AJAX without FormData (IE9). So, we have implemented the AJAX technique for "instantly" and "useButtons" modes. If you have an idea on how to add the upload data into formData in IE9, please share it with us. I will be happy to discuss the possibility to integrate it into dxFileUploader with our R&D team again.