CODEWITHSUNDEEP
javascriptjqueryhtml
AWE
AWE

Reputation: 223

How to add/upload/choose multiple files from one input tag?

I am here to know that How to add/upload/choose multiple files from one input tag that is multiple but after selecting again all previous selection were removed or override. what I want is.

  1. selection of multiple files. (will make preview, ok this is done).
  2. user can remove from selection from preview.
  3. add more files/image to current selection

Upvotes: 4

Views: 13263

Answers (1)

andreim
andreim

Reputation: 3503

You can hide the input[type=file] and provide an UI that interacts with the input in order to select new files and manage separately a list of files.

So you can:

  1. add a hidden input <input id="myInput" type="file" multiple style="display:none" />

  2. Provide a good looking UI with a button that calls the myInput.click() in order to open the prompt

  3. subscribe to input change event and get the myInput.files and store them in an array or collection

  4. to upload all files via AJAX just create a FormData and append all the files then pass FormData instance to the ajax call (eg: $ajax({...data: formData...})).

EDITED:

Plnkr link

Sample Behavior:

  • Pressing "+ Add Files" button will add new files to the list.
  • Clicking a file in the list will remove the file
  • Pressing "Send Files" button will send the files to the corresponding URL

Sample HTML:

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <input id="myInput" type="file" multiple style="display:none" />
    
    <button id="myButton" type="button" style="border-radius: 5px; background-color: #fff; color: green;">+ Add Files</button>
    <button id="mySubmitButton" type="button" style="border-radius: 5px; background-color: #fff; color: green;">Send Files</button>
    
    <div id="myFiles"></div>
  </body>

</html>

Sample Script:

$(function(){
  let inputFile = $('#myInput');
  let button = $('#myButton');
  let buttonSubmit = $('#mySubmitButton');
  let filesContainer = $('#myFiles');
  let files = [];
  
  inputFile.change(function() {
    let newFiles = []; 
    for(let index = 0; index < inputFile[0].files.length; index++) {
      let file = inputFile[0].files[index];
      newFiles.push(file);
      files.push(file);
    }
    
    newFiles.forEach(file => {
      let fileElement = $(`<p>${file.name}</p>`);
      fileElement.data('fileData', file);
      filesContainer.append(fileElement);
      
      fileElement.click(function(event) {
        let fileElement = $(event.target);
        let indexToRemove = files.indexOf(fileElement.data('fileData'));
        fileElement.remove();
        files.splice(indexToRemove, 1);
      });
    });
  });
  
  button.click(function() {
    inputFile.click();
  });
  
  buttonSubmit.click(function() {
    let formData = new FormData();
    
    files.forEach(file => {
      /* here I just put file as file[] so now in submitting it will send all 
      files */
      formData.append('file[]', file);
    });
    
    console.log('Sending...');
    
    $.ajax({
      url: 'https://this_is_the_url_to_upload_to',
      data: formData,
      type: 'POST',
      success: function(data) { console.log('SUCCESS !!!'); },
      error: function(data) { console.log('ERROR !!!'); },
      cache: false,
      processData: false,
      contentType: false
    });
  });
});

Upvotes: 15

Related Questions