How to get input file using js

How to get input file using JS#

Getting input files using JS is a common requirement in web development. There are multiple ways of achieving this. Here are some of the most popular methods:

1. Using the input element with type=file#

This method involves creating an input element with the type attribute set to "file".

    <input type="file" id="input-file">
  

Once the input element is created, we can use JavaScript to get the file that was selected by the user. Here's an example:

    let inputFile = document.querySelector('#input-file');
    let selectedFile = inputFile.files[0];
  

The querySelector method is used to select the input element, and the files property is used to get the selected file. The files property returns a FileList object, which is an array-like object that contains one or more File objects.

2. Using the FileReader object#

The FileReader object can be used to read the contents of a file that was selected by the user.

    let inputFile = document.querySelector('#input-file');
    let selectedFile = inputFile.files[0];

    let reader = new FileReader();

    reader.onload = function() {
      console.log(reader.result);
    }

    reader.readAsText(selectedFile);
  

In this example, we first retrieve the selected file using the same method as in example 1. We then create a new instance of the FileReader object, and use its onload event to handle the file contents once they are loaded. Finally, we use the readAsText method to read the contents of the file as a string.

3. Using AJAX#

AJAX can also be used to get the contents of a file. Here's an example:

    let xhr = new XMLHttpRequest();
    xhr.open('GET', 'path/to/file.txt', true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          console.log(xhr.responseText);
        } else {
          console.error(xhr.statusText);
        }
      }
    };
    xhr.send();
  

In this example, we create a new instance of the XMLHttpRequest object, and use its open method to specify the file path and request method. We then use the onreadystatechange event to handle the response once it is received. Finally, we use the send method to initiate the request.

These are just a few of the methods that can be used to get input files using JS. Choose the one that best fits your needs and requirements.