How to upload file without form using JavaScript?

Javascript Web Development Front End Technology

Sometimes, developers may require to upload a file without using the form in JavaScript. Generally, we create a form to get the data and files from the users, but in this tutorial, we will learn to get the file from users without a form and send it to the backend.

Use the FormData() object and Ajax Request

The FormData object allows us to store the form data in the key value pair. We need to initialize the variable with a constructor. We can allow users to upload files using HTML input and store that file in form data. After that, we can send the form data to the backend.

Syntax

Users can follow the syntax below to use the FormData() object and ajax request to upload files without using the form.

form_data.append("file", uploadedFile);
$.ajax({
   url: "URL",
   method: "POST",
   data: form_data,
});

In the above syntax, we have used the append() method to add a file in the form data object. Also, we used ajax() to send data to API.

Example

In the example below, we have created the file input in the HTML using the <input> tag. In JavaScript, whenever the user uploads the file, we access it and add it to the form_data object.

After that, we use ajax to send the file to API using the POST request.

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
   <h3>Using the <i>FormData object and ajax request</i> to upload a file without using the form data in JavaScript</h3>
   <input type = "file" name = "file" id = "file_input" />
   <div id = "content"> </div>
   <script>
      $(document).on('change', '#file_input', function () {
         let uploadedFile = document.getElementById('file_input').files[0];
         var form_data = new FormData();
         form_data.append("file", uploadedFile);
         $.ajax({
            url: "URL",
            method: "POST",
            data: form_data,
         });
      });
   </script>
</body>
</html>

Use the jQuery simple upload plugin

jQuery contains the simple upload plugin, which we can use to send files to API. We need to add the CDN of the simple upload plugin to the <head> section to use it. If developers are working with the application, they can use the NPM command to install the package.

Syntax

Users should follow the syntax below to use the jQuery simple upload plugin to upload the file without form using JavaScript.

$(this).simpleUpload("URL", {
   start: function (file) {
      
      //upload started
   },
});

In the above syntax, we have invoked the simpleUpload() function of the simple upload plugin to upload the file.

Example

In the example below, we have added the path of the simpleUpload.min.js file in the <head> section. We have added the ‘change’ event on the file input. In the callback function, we have invoked the simpleUpload() function by taking the file input as a reference. We have passed the object as a second parameter of the simpleUpload() function with the key and callback functions as values.

<html>
<head> 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
   <script src= "https://cdn.jsdelivr.net/npm/jquery-simpleupload@1.1.0/simpleUpload.min.js"> </script>
</head>
<body>
   <h3>Using the <i>jQuery simple upload</i> plugin to upload the file without using the form</h3>
   <input type = "file" name = "file" id = "file_input">
   <div id = "content"> </div>
   <script>
      $('#file_input').change(function () {
         $(this).simpleUpload("abcd.php", {
            start: function (file) {
               
               //upload started
               content.innerHTML = "upload started";
            },
         });
      });
   </script>
</body>
</html>

Users learned two different ways to upload a file without using the form in JavaScript. We have used the FormData object and ajax() method in the first approach. In the second approach, we have used the simple upload plugin of Jquery.