Issue trying to get same number of text inputs that my number of selected files

JavaScript
1

I want to select pdfs in my input and after I select pdfs I want to show text inputs.

For example: If I select 2 pdfs to upload I want to show 2 text inputs, because I want to change title of each pdf.

If I select all pdfs that I want at once it is working fine.

But If I select one pdf at a time, I getting always more text inputs that my number of selected pdfs.

Do you see why this can be happening?

You can see here my issue demonstration: www.jsfiddle.net/j5yeq/4

My html:

<div class="posts">
    <div class="content">
        <form name="editpost" class="formfull" action="" method="post" enctype="multipart/form-data">
            <div class="galerry">
                <div class="label">	<span class="field">PDFS:</span>
            
                    <input type="file" name="pdfs[]" class="j_galleryp" multiple="multiple" accept="application/pdf" />
                    <div class="j_gfalsep">Select 1 or many pdfs</div>
                    <img src="img/upload.png" class="j_gsendp" />
                    <div class="label" id="test"></div>
                </div>
            </div>
    	 </form>
    </div>
</div>

jQuery:

$('.j_gsendp').click(function(){
$('.j_galleryp').click().change(function () {
    var allFiles = this.files;
    var numFiles = this.files.length;
    alert(numFiles);
    $('.j_gfalsep').animate({
        width: '400'
    }, 500, function () {
        $(this).html('You select <strong>' + numFiles + '</strong>files.');
        for (var i = 0; i < numFiles; i++) {
            var file = allFiles[i],
                name = file.name;
            $('#test').append('<span class="field">Title of pdf ' + name + ':</span><input type="text" name="title[]" value="' + name + '"/><br><br>');
        }
    });
});
});
2

It works ok for me. The only thing that I would say, is that when you change the files - you need to wipe out the HTML in #test, otherwise its appending more files to it (even though only the new ones are attached);

$('#test').html('');

BTW, please learn to use the code tags on the forum… it makes reading your post really hard otherwise :frowning:

3

Thanks for your answer and your format tip ultranerds, Im new at forum and I really forgot to put my code format as code. I try now to edit my post but I think its not possible.
About you answer, do you test my jsfiddle? If you select for example 5 pdfs at once it works fine you get 5 text inputs after select 5 pdfs.
But if you select one pdf each time, at first you select one pdf and you have only one text input, but then you select other pdf and you get 2 text inputs and not one…
My code is only working fine if I select all pdfs that I want at same time, and Im not understanding why!

4

Hi,

So what are you expecting with your code? As I said, your current code is just doing “append”, but your code is doing a fresh overwrite every time. The way you have it, you can only do the one file upload at once. So you select the files, accept, then its done. You can’t select one, then go back and select another, then another… as that just overwrites the previous list. What you really want, is something like this:

$('.j_gsendp').click(function(){
	$('.j_galleryp').click().change(function () {
		var allFiles = this.files;
		var numFiles = this.files.length;
		alert(numFiles);
		$('.j_gfalsep').animate({
			width: '400'
		}, 500, function () {
			
			$(this).html('You select <strong>' + numFiles + '</strong>files.');
[COLOR="#FF0000"]			$('#test').html(""); // clean it out!![/COLOR]
			for (var i = 0; i < numFiles; i++) {
				var file = allFiles[i],
				name = file.name;
				$('#test').append('<span class="field">Title of pdf ' + name + '/span><input type="text" name="title[]" value="' + name + '"/><br><br>');
			}
		});
	});
});

Cheers

Andy

5

Thank you. Your solution works but what I really want maybe Im not explaining myself better. Imagine that I have to upload 2 pdfs, but for forgetfulness I only selected one, so then I need select pdf that I forget. With your solution if this situation occurs, when I select my first pdf I get my text input (its ok), but I forgot to select my other pdf, so I´ll select my second pdf, but with your solution I can´t, I need to select both pdfs at same time. And Im trying to have more flexibility.

6

Yeah, as I said - that won’t work with your current approach. You are using a FILE input - and to make use of that, you have to do the uploads at at once. Its not a case of “adding” the file paths into a hidden field, and doing the upload. You would really need an AJAX upload feature, such as:

This would upload them, and then you could hook in on the “completed” callback, to add the HTML in (so they can edit it).

What I do in this instance (on my own sites), is:

  1. Upload it via AJAX
  2. Get the values passed back as JSON, with a temp URL to the file uploaded - and assign the upload an ID
  3. Show the inputs for the given ID, so they can enter a title/desc
  4. Then when you submit the form, it would look at all the params being passed in, and grab the files.

Hope that helps :slight_smile:

7

Thank you very much for your help! Im trying now to put jQuery file upload working to see if I can do what Im looking for! Thanks!

8