How to leave input file button usefull for drag and drop from desktop, but avoiding local redirection

Question

I've been reading a lot about drag and drop and I have some issues using the html input File element. What I'm trying to do is a form with 9 fields of type="file" and use them to attach files from desktop using drag and drop. The code for this is already done (since a lot of browsers support this way of attaching), but I've tried to avoid local redirecting and failed on the way. With local redirecting I mean that, for example, if a picture from desktop is dropped anywhere in the browser (except in the inputFile field), the browser will show the image located in my computer.

I saw a similar question here: Prevent browser from loading a drag-and-dropped file , but I think is different since my "drop area" is an inputFile field. Probably his drop area is a <div> field, in which case I know how to do it.

The code I already have, avoid local redirecting in the browser and recognise an inputFile field as a droppable area. The problem is, when I drop an image from desktop to the inputFile field, this field doesn't receive the file (I noticed this since the name of the file is shown when it works).

Can somebody help me, please? Sorry if this question was answered and I didn't find the answer. Thanks in advance!

Sebastian.

    <script type="text/javascript" >
    $(document).ready(function(){
    var obj = $("#inputFileField");
    obj.on('dragenter', function (e){
        e.stopPropagation();
        e.preventDefault();
        $(this).css('border', '2px solid #0B85A1');
    });
    obj.on('dragover', function (e){
         e.stopPropagation();
         e.preventDefault();
    });
    obj.on('drop', function (e){
         $(this).css('border', '2px dotted #0B85A1');
         e.preventDefault();
         var files = e.originalEvent.dataTransfer.files;
         //We need to send dropped files to Server
         //handleFileUpload(files,obj);
    });
    $(document).on('dragenter', function (e){
        e.stopPropagation();
        e.preventDefault();
    });
    $(document).on('dragover', function (e){
      e.stopPropagation();
      e.preventDefault();
      obj.css('border', '2px dotted #0B85A1');
    });
    $(document).on('drop', function (e){
        e.stopPropagation();
        e.preventDefault();
    });
    });
    </script>

In the HTML file:

    @inputFile(contenedorForm("inputFileField"), '_display -> "Attachment", '_label -> Messages("input File Field"))

Ps. The @inputFile notation is because I'm using Play Framework, but it's just the same than an html input file:

    <input type="file" name="input File Field" id="inputFileField">.

In the CSS file:

    .inputFileField{
    border:2px dotted #0B85A1;
    width:400px;
    color:#92AAB0;
    text-align:left;vertical-align:middle;
    padding:10px 10px 10 10px;
    margin-bottom:10px;
    font-size:200%;
    }

Thanks again!

*"my "drop area" is an inputFile field. Probably his drop area is a field, in which case I know how to do it."* typo? yours is a field and his is a field and you know how to handle a field? I imagine all you have to do is catch the drop event for all elements and prevent it, other than for the file input which that answer you linked to almost does(you just need to not prevent it if event.target is a file input.) — Kevin B, Mar 25 '14 at 14:20
Sorry! I missed the right notation to show a `<`div`>` field in the post. — Sebastián Vásquez, Mar 25 '14 at 14:34
"catch the drop event for all elements and prevent it, other than for the file input which that answer you linked to almost does(you just need to not prevent it if event.target is a file input.)" This is what I really don't know how to do it :/ — Sebastián Vásquez, Mar 25 '14 at 14:36
It seems my post is a duplicate of http://stackoverflow.com/questions/8006715/drag-drop-files-into-standard-html-file-input , but the problem still has no solution :( — Sebastián Vásquez, Mar 25 '14 at 20:10

Sebastián Vásquez · Accepted Answer · 2014-03-26T14:31:35.067

I've found a solution, but it works in Firefox (25.0.1 for mac) only. Safari 7.0.2 (9537.74.9) and Chrome Version 33.0.1750.152 make the local redirection when i drop the file on an inputFile field.

Here's the code:

    <script type="text/javascript" >
    flag=false;
    $(document).ready(function(){
       $("#one,#two,#three,#four,#five,
         #six,#seven,#eight,#nine").each(function(){
            $(this).on('dragenter', function (e){
                flag=true;
                e.stopPropagation();
                e.preventDefault();
            });
            $(this).on('dragover', function (e){
                e.stopPropagation();
                e.preventDefault();
            });
            $(this).on('drop', function (e){
                return true;
            });
        });
        $(document).on('dragenter', function (e){
            flag=false;
            e.stopPropagation();
            e.preventDefault();
        });
        $(document).on('dragover', function (e){
            e.stopPropagation();
            e.preventDefault();
        });
        $(document).on('drop', function(e){
            if(flag == true){
                flag=false;
            }
            else{
                e.stopPropagation();
                e.preventDefault();
            }
        });
    });
    </script>

And the HTML code:

    @form(action = routes.controller.upload(), 'id -> "formulario",
       'class -> "form-horizontal",'enctype -> "multipart/form-data"){
       @inputFile(contenedorForm("one"), '_display -> "Attachment",
     '_label ->Messages("1"))
       @inputFile(contenedorForm("two"), '_display -> "Attachment",
     '_label -> Messages("2"))
       @inputFile(contenedorForm("three"), '_display -> "Attachment",
     '_label -> Messages("3"))
       @inputFile(contenedorForm("four"), '_display -> "Attachment",
     '_label -> Messages("4"))
       @inputFile(contenedorForm("five"), '_display -> "Attachment",
     '_label -> Messages("5"))
       @inputFile(contenedorForm("six"), '_display -> "Attachment",
     '_label -> Messages("6"))
       @inputFile(contenedorForm("seven"), '_display -> "Attachment",
     '_label -> Messages("7"))
       @inputFile(contenedorForm("eight"), '_display -> "Attachment",
     '_label -> Messages("8"))
       @inputFile(contenedorForm("nine"), '_display -> "Attachment",
     '_label -> Messages("9"))
         <input type="submit" name="Subir" id="Subir" value="Subir">  
    }

Ps. The above notation is because I'm using Play Framework, but it's just the same that a normal form with 9 inputFile fields of this way:

    <input type="file" name="input File Field" id="inputFileField">

I hope this could be useful for somebody out there.

Sebastian.

How to leave input file button usefull for drag and drop from desktop, but avoiding local redirection

1 Answers1