Drag Drop File with Javascript not working

Question

I am missing something but I'm not sure what it could be...

I'm trying to push the Base 64 code version of a drag-dropped file into a text area... but for some reason it's not working...

Anyone care to tell me where I'm going wrong with the code? This is new territory for me...

$(document).ready(function() {

    function processFile(file){
        var o = $("#fileInfo");
        var reader = new FileReader();
        reader.onload = function(e) {
        o.innerHTML = e.target.result.replace(/</g, "&lt;").replace(/>/g, "&gt;");
        }
        reader.readAsURL(file);
    }

    // Sets up dataTransfer event
    jQuery.event.props.push('dataTransfer');

    // Bind drop to drop zone
    $('#drop-files').bind('drop', function(e) {
        // Prevents element from default function
        e.preventDefault();
        // Grabs list of files
        var files = e.dataTransfer.files;
        // Loop through files...
        $.each(files, function(index, file) {
            processFile(files[index]);
        });
    });
});

I'm seriously not sure where I have screwed up... eventually I will be pushing this to an upload page of my own choosing... but for now I want to at least get the Base64 code of the very first file to show in that text area ("fileInfo").

Appreciate any thoughts here...

Adil · Accepted Answer · 2013-03-11 06:36:44Z

2

The o represents jQuery object and you can not access DOM object property innerHTML on it. Either call html() on o or make it DOM object using indexer.

Change

o.innerHTML = e.target.result.replace(/</g, "&lt;").replace(/>/g, "&gt;");

To

o.html(e.target.result.replace(/</g, "&lt;").replace(/>/g, "&gt;");)

or

o[0].innerHTML = e.target.result.replace(/</g, "&lt;").replace(/>/g, "&gt;");

answered Mar 11, 2013 at 6:36

Adil

148k25 gold badges217 silver badges207 bronze badges

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

1 Comment

Eliseo D'Annunzio Over a year ago

I should have noticed that earlier... but now that I've implemented that I'm getting the error: "reader.readAsURL" is not a function... I was under the assumption that readAsURL was an available function using Firefox?

Eliseo D'Annunzio · Accepted Answer · 2013-03-13 00:30:14Z

0

I just figured out what had happened...

The line:

reader.readAsURL(file);

should read:

reader.readAsURLData(file);

shaking my head

But I've now found another little issue which I will post later...

Thanks for your efforts...

answered Mar 13, 2013 at 0:30

Eliseo D'Annunzio

6141 gold badge10 silver badges27 bronze badges

Collectives™ on Stack Overflow

Drag Drop File with Javascript not working

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related