How to Add a Warning When Uploading a File Larger Than the Limit Size in JavaScript and Laravel

Uploading files is a common feature in web development, but sometimes users may attempt to upload files that exceed the predefined size limit. This can lead to issues such as server overload or performance degradation. To mitigate this, it’s essential to incorporate a warning system that notifies users when they try to upload files larger than the allowed limit. In this guide, we’ll explore how to implement such a warning using JavaScript and Laravel.

Understanding the Problem

Before diving into the solution, let’s understand why it’s crucial to handle file size limits gracefully. When users upload large files without any restrictions, it can strain the server resources and affect the overall performance of the application. Additionally, large files may take longer to upload, leading to a poor user experience.

Setting Up Form Upload

First, let’s create a form page with a file input field to upload the desired file. Then, adjust the id name accordingly, as shown in the example below.

<div class="col-lg-12">
    <label for="simpleinput" class="form-label">Attachment</label>
    <input type="file" class="form-control" id="attachment" onchange="checkSize(attachment)" name="attachment" placeholder="Attachment">
</div>

Handling File Uploads in JavaScript

Next, we’ll implement the client-side functionality using JavaScript to alert users when they exceed the file size limit before submitting the form. Start by selecting the file input element in your HTML form.

function checkSize($id){
    var inputElement = document.getElementById($id);

    var fileLimit = 25000; // limit the file size goes here
    var files = inputElement.files; //this is an array
    var fileSize = files[0].size; 
    var fileSizeInKB = (fileSize/1024); // this would be converted byte into kilobyte
    
    console.log(fileSizeInKB);
    if(fileSizeInKB < fileLimit){
        // code success should be here
    } else {
        alert('file size is too large');
        inputElement.value = ""; // input form set to be empty
    }
}

Adding SweetAlert To Warning Dialog

You can also add a warning dialog to enhance the page using SweetAlert. However, before you can add it with SweetAlert, you need to import the SweetAlert JS plugin first. You can read how to add SweetAlert here.

function checkSize($id){
      var inputElement = document.getElementById($id);

      var fileLimit = 25000; // limit the file size goes here
      var files = inputElement.files; //this is an array
      var fileSize = files[0].size; 
      var fileSizeInKB = (fileSize/1024); // this would be converted byte into kilobyte
      
      console.log(fileSizeInKB);
      if(fileSizeInKB < fileLimit){
          // code success should be here
      } else {
          // sweetalert in here
          swal("Warning!",
                  "File size is too large!",
                  "warning");
          inputElement.value = "";
      }
}

Sweetalert warning when file exceed the limit

Testing the Implementation

Once you’ve implemented the warning system, it’s essential to thoroughly test it to ensure it functions as expected. Try uploading files of various sizes to verify that the warning is displayed when the file size exceeds the limit.

Conclusion

In conclusion, adding a warning when uploading files larger than the limit size in JavaScript and Laravel is essential for maintaining the performance and usability of your web application. By implementing a robust warning system, you can effectively communicate file size restrictions to users and prevent issues related to oversized file uploads. Remember to regularly monitor and adjust the file size limits as needed to accommodate changing requirements and ensure a seamless user experience.