Add Input of Type File to a Form Dynamically

Question

I'm working on an drag n drop functionality. I have the code that I need to catch the file when it's dropped on my drop area, but I'm have some issues to send it for xmlhttprequest since I cant send through jQuery or ajax.

I'm now thinking about a hidden iFrame, but I don't really know how I can attach this file, that I already have, thanks to the user drop, to an existing form.

var droparea = $('#dropzone');
    var uploadButon = $('#upload');
    droparea.on('dragover',function(){
        $(this).addClass('dragover');
        return false;
    });
    droparea.on('dragleave',function(){
        $(this).removeClass('dragover');
        return false;
    });
    droparea.on('drop', function(e) {
       e.stopPropagation();
       e.preventDefault();
       $(this).removeClass('dragover');
       var files = e.originalEvent.dataTransfer.files;

       var formData = new FormData($("form")[0]);

            for( var i = 0; i < files.length; ++i ) {
                var file = files[i];
                formData.append("files[]", file);
            }

            return $.ajax({
                url: "upload.php",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function(text) {
                    alert(text);
                }

            });

    });

            //the php

           <?php
             echo count($_FILES["files"]);
                for($i = 0; $i < count($_FILES["files"]["name"]) ; $i++)
                {
              if(move_uploaded_file($_FILES["files"]["tmp_name"][$i],                               "upload/".$_FILES["files"]["name"][$i]))
                echo "ok";
                   else
                echo "no";
                 }
            ?>

That should work, assuming $('userDropedFile') is targeting a file input. However, if you're using drag-n-drop file upload, why not go a little further and also implement xhr file upload rather than using an iframe if it's available? — user400654
– user400654, Commented Mar 21, 2013 at 15:50
Why is the file input not inside the form in the first place? — Esailija
– Esailija, Commented Mar 21, 2013 at 15:53

Esailija · Accepted Answer · 2013-03-21 16:16:34Z

1

I think you mean that the element

$("#userDroppedFile")

Is your drop area.

That's not how you get the file though, you get it in the drop event:

$("#userDroppedFile").on("drag dragend dragenter dragleave dragover dragstart drop", function(e){
    var files;
    e.preventDefault();

    if( e.type === "drop" && e.originalEvent.dataTransfer ) {
        files = e.originalEvent.dataTransfer.files;
    }

    if( !files || !files.length ) {
        return;
    }

    doUpload(files);

});

In doUpload you take form data from your static html form, and add the files into it and upload:

function doUpload(files) {

    var formData = new FormData($("form")[0]);

    for( var i = 0; i < files.length; ++i ) {
        var file = files[i];
        formData.append("file" + (i+1), file);
    }

    return $.ajax({
        url: "xx",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function() {
        }

    });
}

edited Mar 21, 2013 at 16:16

answered Mar 21, 2013 at 16:00

Esailija

140k24 gold badges280 silver badges328 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Santiago Nicolas Roca Over a year ago

no, i tried to simply thins, thast my drop area, but im catching the file, if you want i cant post all the code, but assuming that i already have the file, how can i attach it to a form. thanks for the fast answer, ill try!

Esailija Over a year ago

@SantiagoNicolasRoca I am showing how to attach it to a form in the doUpload function.. you cannot attach a file to the normal form, you can only use ajax to upload it unfortunately.

Santiago Nicolas Roca Over a year ago

thats even better, ive already tried that and the php that upload the files its still receiving an empty $_FILES

Esailija Over a year ago

@SantiagoNicolasRoca there could be a problem using file.name as the file entry key. I will edit a possible fix, other than that I don't know without any debug information.

Esailija Over a year ago

@iPadDeveloper2011 use processData: false and contentType: false

|

Adam Jenkins · Accepted Answer · 2013-03-21 15:53:32Z

0

var myFile = $('userDropedFile');

Not a valid jQuery selector. Do you perhaps mean:

var myFile = $('#userDropedFile');

answered Mar 21, 2013 at 15:53

Adam Jenkins

56.3k13 gold badges85 silver badges113 bronze badges

Collectives™ on Stack Overflow

Add Input of Type File to a Form Dynamically

2 Answers 2

12 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related