Creating an ADD MORE button to upload multiple images

Hello there!

I found a fine, working script here but the image upload function in it is limited to one image / post (user profile in this case).

My queston is that how could I modify this script to upload multiple images at once with JS? (with a Choose file and Add more button). If it could create thumbnails the moment the users chooses it from their computer would be even better.

I’m a beginner in JS, I hope some of you can help me out :slight_smile:

As @Gandalf already noted in the other thread… table layouts should by all means be avoided, so I won’t help you with that. :-P Anyway, here’s the basic approach: suppose you have some markup like the following in your form:

<input type="file" name="images[]" class="file-input">
<button class="add-more">Add more...</button>

Not the brackets in name="images[]" – this will submit all values of input elements with that name as an array (edit: see the other thread for more details… ^^). Now you can add more inputs with JS like

// Get references to the "add more" button and the file input
var addMore = document.querySelector('.add-more')
var fileInput = document.querySelector('.file-input')

// When the button got clicked...
addMore.addEventListener('click', function (event) {
	
  // Prevent the default action, which would be
  // the form submission for a button
  event.preventDefault()
  
  // Create a clone of the file input (you could also
  // create a new one from scrath, but then you'd
  // have to manually add the attributes and all...)
  var newFileInput = fileInput.cloneNode()
  
  // Insert the clone right after the original (this
  // can only be done inderectly)
  fileInput.parentNode.insertBefore(
  	newFileInput,
    fileInput.nextSibling
  )
  
  // Set the file input reference to the clone, so 
  // that the next input will be added after the
  // new input
  fileInput = newFileInput
})

Thanks to aforementioned name notation, the $_FILES in your PHP script will now look like e.g.

array(1) {
  ["file"]=>
  array(5) {
    ["name"]=>
    array(2) {
      [0]=>
      string(19) "foo.jpg"
      [1]=>
      string(24) "bar.jpg"
    }
    ["type"]=>
    array(2) {
      [0]=>
      string(10) "image/jpeg"
      [1]=>
      string(10) "image/jpeg"
    }
    ["tmp_name"]=>
    array(2) {
      [0]=>
      string(14) "/tmp/phpwMSORk"
      [1]=>
      string(14) "/tmp/phpY2nZsO"
    }
    ["error"]=>
    array(2) {
      [0]=>
      int(0)
      [1]=>
      int(0)
    }
    ["size"]=>
    array(2) {
      [0]=>
      int(89307)
      [1]=>
      int(187957)
    }
  }
}

Hope that helps you get things going. :-)

3 Likes

Just for context, here is a link to the other topic in PHP about handling the form processing.

1 Like

Guys, I appreciate your help, I really do but can you show me these modifications inside the script I posted? Maybe it’s because I’m tired but I just don’t get it :confused: I mean I understand what you talking about and it makes sense, I just can’t update that code like you did.

Which part are you having trouble with? I just tried to copy/paste the code by @m3g4p0p into a form, with the inputs within the form tags and the script within script tags at the end of the body and it works just fine to add more inputs to the form.
Case solved in that respect.
Though as I mentioned in the other topic, it would probably benefit from a max limit, enforced by both js and php.

If it’s the php part that’s confusing you, that can be discussed in the php topic. Note the php above is an example of a var_dump() from the $_FILES resulting from the form. It’s not something to add you your code.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.