html5 file upload from different folders

Question

I am trying make an html5 image uploader but html5 has problems with multiple upload.

This is the script I use:

function makeFileList() {
        var input = document.getElementById("filez");
        var ul = document.getElementById("file_wrap_list");
        while (ul.hasChildNodes()) {
            ul.removeChild(ul.firstChild);
        }
        for (var i = 0; i < input.files.length; i++) {
            var j = i+1;
            var li = document.createElement("li");
            li.innerHTML = j+'. '+input.files[i].name;
            ul.appendChild(li);
        }
        if(!ul.hasChildNodes()) {
            var li = document.createElement("li");
            li.innerHTML = 'No Files Selected';
            ul.appendChild(li);
        }
    }

the HTML tag:

<input type="file" name="photo[]" id="filez" multiple onchange="makeFileList();"/>

then on submit I upload and add the images in mysql table. I thought about chaning the js script so that every time iamges are selected they are going to create hidden inputs and normally show their names so that clients know what they have selected. and then after submiting the form the images are going to be uploaded, but I don't know if it is going to work in practice and my idea seems a bit odd. I would like to know if anyone has any suggestion on how to alter the js script so that everytime a user clicks and selectes images the script to register the images in array. Or any other idea is welcome.

Answer 1

I believe this question is similar to another I recently attempted to answer. The link for my solution is here: HTML multiple file upload from different folders.

Using HTML and jQuery, I was able to create a form where you could add multiple "browser" buttons dynamically. I also provided a PHP solution for handling the data server-side!

Answer 2

Your idea about the array is a good one. The problems then are making sure the user hasn't already selected a file, and allowing them to remove files they've previously selected. The difficult part is in reliably comparing files.

I tweaked your code and managed to get it working here.

// An array to store file references in
var files = [];

// Look in files to see if it's already in there
function alreadySelected( newFile ){
    var match = false;

    // We can't just use files.indexOf( newFile ), since JS can't test file equality
    files.forEach( function compareProperties( oldFile ){
        var key;
        var oldProp;
        var newProp;

        for ( key in newFile ){
            if( newFile.hasOwnProperty( key ) ){
                oldProp = oldFile[ key ];
                newProp = newFile[ key ];

                if( newProp !== oldProp ){
                    // The root of the problem: the same date will be a different date object.
                    if( newProp instanceof Date ){
                        if( newProp.getTime() !== oldProp.getTime() ){
                            return;
                        }
                    }
                    else {
                        return;
                    }
                }
            }
        }

        match = true;
    } );

    return match;
}

window.makeFileList = function makeFileList() {
    var input = document.getElementById("filez");
    var ol    = document.getElementById("file_wrap_list");

    Array.prototype.forEach.call( input.files, function processFile( file ){
        // If the user's already added this file to the list, move on to the next.
        if( alreadySelected( file ) ){
            return;
        }

        var li = document.createElement("li");
        // We'll also create an 'X' link for users to remove files from the list
        var a  = document.createElement("a");

        li.innerHTML = file.name;
        a.innerHTML  = "X";

        a.addEventListener( "click", function removeFile( clickEvent ){
            clickEvent.preventDefault();

            // Find the file in the array and remove it
            files.splice( files.indexOf( file ), 1  );
            ol.removeChild( li );
        }, false ) ;

        files.push( file );

        li.appendChild( a );
        ol.appendChild( li );
    } );

    // Reset the value. Normal file inputs won't trigger the change event if the value is the same,
    // but a user might add a file, delete it, then try to add it again.
    input.value = '';
};