0

After uploading files to a drop zone I need to have a form input field appear next to the list of uploaded files allowing the input of tag names to be added to the images.

$(function(){

    var ul = $('#upload ul'); 

    $('#drop a').click(function(){
        // Simulate a click on the file input button
        // to show the file browser dialog
        $(this).parent().find('input').click();
    });

    // Initialize the jQuery File Upload plugin
    $('#upload').fileupload({

        // This element will accept file drag/drop uploading
        dropZone: $('#drop'),

        // This function is called when a file is added to the queue;
        // either via the browse button, or via drag/drop:
        add: function (e, data) {

            var tpl = $('<li class="working uploaded"><input type="text" value="0" data-width="48" data-height="48"'+
                ' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>');

            var f = document.createElement("form");
            f.setAttribute('method',"post");
            f.setAttribute('action',"addTags();return false;");

            var i = document.createElement("input"); //input element, text
            i.setAttribute('type',"hidden");
            i.setAttribute('value',"fileName");
            i.setAttribute('name',"username");

            var t = document.createElement("input"); //input element, text
            t.setAttribute('type',"text");
            t.setAttribute('name',"tags");

            var s = document.createElement("submit"); //input element, Submit button
            s.setAttribute('type',"submit"););
            s.setAttribute('name',"login");
            s.setAttribute('value',"Add Tags");

            f.appendChild(i);
            f.appendChild(t);
            f.appendChild(s);


            document.getElementsById('filesUploaded')[0].appendChild(f);

            var imgNameInput = document.createElement("input");
            imgNameInput.setAttribute("name","tags");
            document.getElementById("imgList").appendChild(imgNameInput);

        // Append the file name and file size      
            tpl.find('p').text(data.files[0].name)
                         .append('<i>' + formatFileSize(data.files[0].size) + '</i>');

            // Add the HTML to the UL element
            data.context = tpl.appendTo(ul);

            // Initialize the knob plugin
            tpl.find('input').knob();

            // Listen for clicks on the cancel icon
            tpl.find('span').click(function(){

                if(tpl.hasClass('working')){
                    jqXHR.abort();
                }

                tpl.fadeOut(function(){
                    tpl.remove();
                });

            });

            // Automatically upload the file once it is added to the queue
            var jqXHR = data.submit();
        },

        progress: function(e, data){

            // Calculate the completion percentage of the upload
            var progress = parseInt(data.loaded / data.total * 100, 10);

            // Update the hidden input field and trigger a change
            // so that the jQuery knob plugin knows to update the dial
            data.context.find('input').val(progress).change();

            if(progress == 100){
                data.context.removeClass('working');
            }
        },

        fail:function(e, data){
            // Something has gone wrong!
            data.context.addClass('error');
        }

    });


    // Prevent the default action when a file is dropped on the window
    $(document).on('drop dragover', function (e) {
        e.preventDefault();
    });

    // Helper function that formats the file sizes
    function formatFileSize(bytes) {
        if (typeof bytes !== 'number') {
            return '';
        }

        if (bytes >= 1000000000) {
            return (bytes / 1000000000).toFixed(2) + ' GB';
        }

        if (bytes >= 1000000) {
            return (bytes / 1000000).toFixed(2) + ' MB';
        }

        return (bytes / 1000).toFixed(2) + ' KB';
    }

});

HTML is done like this,

 <form id="upload" method="post" action="actions/upload.php" enctype="multipart/form-data">
                    <input type="hidden" name="username" value="<?php echo $username; ?>" id="username">
                    <div id="drop">
                    Drop Here
                    <a>Browse</a>
                    <input type="file" name="upl" multiple />
                    </div>

                    <ul id="filesUploaded">

                    <!-- The file uploads will be shown here -->
                    </ul>
                    </form>
wuno
  • 8,388
  • 15
  • 72
  • 163
  • seems like you are trying to reach an element in the DOM but it's not there/haven't loaded yet. is your script in the head section? if so either wait for content to load `$(function(){})` or put your script in the end of the body tag. – Saar Sep 26 '15 at 12:33
  • You seem to be using jQuery. If that's the case, please a) tag your question accordingly, and b) stop using inline event handlers (like `"onsubmit"`) immediately. You might also want to drop the direct DOM manipulation in favor of [the functions that jQuery has to offer](https://api.jquery.com/category/manipulation/). There is little point in including jQuery and then not really using it. (In fact, your code samples very much look like you copy-pasted them from different sources without understanding what they mean. Don't do that.) – Tomalak Sep 26 '15 at 12:34
  • possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) – Sebastian Simon Sep 26 '15 at 12:36
  • I understand that sometimes its annoying helping people who do not have a great understanding, but I am going to ask you to please answer my question out of kindness. – wuno Sep 26 '15 at 12:38
  • You should replace the js code to document ready hander. [Example on vanilla js][1] [1]: http://stackoverflow.com/a/21814964/2652540 – viktarpunko Sep 26 '15 at 12:41
  • Your code doesn't find the imgList element. You have put the imgList form in an `ul` tag, but not inside an `li` element. You should either have the form outside the list, or inside an item in the list. Fix that to see if that is the problem. – Guffa Sep 26 '15 at 12:43
  • Ok I edited my code, I showed you all my JS, and the form in the php file. I think this is closer to being what I need. Please take a look. And thank you so so so much for helping me. I really appreciate you. – wuno Sep 26 '15 at 12:47
  • The li is created by the js. when each img is uploaded to the server it creates an li for each img uploaded. – wuno Sep 26 '15 at 12:50

0 Answers0