File upload is an important feature in modern websites and apps. But it can also be risky for security. When users upload files, those files might contain viruses, malware, or harmful code. This can damage your system or put user data at risk.
If you are building a file upload feature and looking for how to scan files for viruses using JavaScript, you are thinking in the right direction. However, this cannot be done using only client-side JavaScript. You need a proper and secure solution.
In this guide, I’ll show you how to build a safe file upload form with virus scanning. We’ll use Filestack’s built-in security features so your app stays protected, without needing to manage complex scanning systems yourself.
Why Client-Side Virus Scanning Isn’t Enough
Before starting, it’s important to understand why virus scanning cannot be done only using JavaScript in the browser.
JavaScript runs on the user’s device. This means a bad user can easily bypass it. They can turn off JavaScript, change the code, or send files directly to your server without following your rules.
Proper virus scanning needs:
Updated virus and malware databases
A lot of system power to check files
Server-side checks that users cannot skip
Trusted antivirus tools like ClamAV
Because of this, virus scanning must happen on the server or through a trusted service. Tools like Filestack handle this for you by automatically scanning files during upload, so you don’t have to build or manage this system yourself.
Setting Up Filestack with Virus Scanning
Now, let’s build a secure file upload form step by step. We’ll use Filestack’s JavaScript CDN. It handles the file upload on the front end, while virus scanning happens securely on the server in the background.
Step 1: Get Your Filestack API Key
First, create a Filestack account and get your API key. Make sure virus scanning is enabled in your account before moving forward.
Step 2: Include the Filestack JavaScript CDN
Next, add the Filestack library to your HTML file. This allows your website to use Filestack’s file upload features.
Just include the Filestack script inside the <head> section, like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Secure File Upload with Virus Scanning</title>
<script src="<https://static.filestackapi.com/filestack-js/4.x.x/filestack.min.js>"></script>
</head>
<body>
<div id="upload-container">
<h1>Upload Your Files</h1>
<button id="upload-btn">Select Files to Upload</button>
<div id="upload-status"></div>
<div id="uploaded-files"></div>
</div>
<script src="script.js"></script>
</body>
</html>
This script loads Filestack on your page so users can select and upload files securely.
Now that Filestack is loaded on your page, the next step is to configure it and connect it to a virus scanning workflow.
Step 3: Initialise Filestack with Security Settings
Now open your script.js file and set up Filestack. This is where we enable virus scanning for uploaded files.
// Initialise the Filestack client
const API_KEY = "YOUR_API_KEY";
const WORKFLOW_ID = "YOUR_WORKFLOW_ID";
// Initialize Filestack
const client = filestack.init(API_KEY);
const uploadOptions = {
accept: ["image/*", ".pdf", ".doc", ".docx", ".xls", ".xlsx", ".txt"],
maxFiles: 5,
maxSize: 10 * 1024 * 1024,
onUploadDone: (res) => console.log("Upload complete:", res),
storeTo: {
workflows: [WORKFLOW_ID],
},
};
// Open file picker on button click
document.getElementById("upload-btn").addEventListener("click", () => {
console.log("Opening file picker...");
client.picker(uploadOptions).open();
});
What this code does:
Defines your Filestack API key, which connects your application to your Filestack account.
Defines a workflow ID, which tells Filestack to run a specific workflow (such as virus scanning) on every uploaded file.
Initialises the Filestack client using the API key so your app can upload files securely.
Configures upload rules using
uploadOptions.Restricts uploads to specific file types, including images, PDFs, Word, Excel, and text files.
Limits users to uploading a maximum of 5 files in a single upload session.
Enforces a maximum file size of 10 MB per file to prevent large or abusive uploads.
Runs a callback function when uploads finish successfully and logs the upload result.
Automatically sends uploaded files through the specified Filestack workflow, ensuring virus scanning happens server-side.
Attaches a click event to the upload button in your UI.
Opens the Filestack file picker when the button is clicked, allowing users to select files from their device.
This setup ensures files are validated on the client for usability, then securely scanned and processed on the server using Filestack workflows.
At this point, your upload flow is set up. The final step is to test it and confirm that virus scanning works as expected.
Testing Virus Scanning in Your File Upload Flow
Once you’ve set up virus scanning with Filestack, the next step is to make sure it actually works. Testing ensures your workflow runs correctly and that infected files are blocked as expected.
Step 1: Confirm Your Workflow Configuration
Before testing uploads, confirm these things in your Filestack dashboard:
Your workflow includes the Virus Detection step
The workflow is connected to uploads using the
workflowsoptionA webhook URL is added (for testing, tools like Beeceptor are useful)
The workflow is saved and active
If any of these are missing, virus scan results will not be generated.
For a visual walkthrough, you can also watch Filestack’s virus detection tutorial!
Step 2: Test with a Normal (Clean) File
Start by uploading a regular file, such as:
A JPG or PNG image
A PDF document
A simple text file
What should happen:
The file uploads successfully
The workflow runs without any errors
The virus scan result shows the file is not infected
This confirms that safe files are allowed.
Step 3: Test with the EICAR Virus Test File
To safely test virus detection, you can use the EICAR test file.
The EICAR file:
Is completely safe and harmless
Is commonly used to test antivirus systems
Is detected as a virus on purpose
You can download it by searching for “EICAR test file” and then upload it using your Filestack file picker.
What should happen:
The workflow marks the file as infected
Virus Detection reports a threat
- Any rules you added (such as blocking or deleting the file) are triggered
This confirms that virus scanning is working correctly.
What This Testing Proves
By completing these steps, you verify that:
Virus scanning runs on the server, not just in the browser
Clean files are accepted
Infected files are detected and blocked
Your file upload flow is secure and ready for production
This simple testing process ensures your users and application stay protected.
With virus scanning confirmed and working as expected, the next question is why using a managed solution makes sense in the first place.
Why Use Filestack for Virus Scanning?
Building your own virus scanning system means managing antivirus engines, keeping threat databases up to date, handling false positives, and scaling infrastructure as your app grows. All of this adds significant complexity and ongoing maintenance.
Filestack removes this burden by handling virus scanning as part of the upload workflow. Files are scanned automatically during upload, and infected files can be blocked or deleted before they ever reach your system. This lets you focus on building your application instead of maintaining security infrastructure.
Even with virus scanning in place, there are a few additional steps you should follow to make file uploads truly secure.
Best Practices for Secure File Uploads
Following these best practices helps protect your application from malicious files, misuse, and security vulnerabilities when allowing users to upload files.
Never rely only on client-side checks: Always validate file type, size, and content on the server. Client-side validation improves user experience, but attackers can easily bypass it.
Limit how often users can upload files: Use rate limiting to stop users or bots from uploading too many files in a short time, which helps prevent abuse and server overload.
Avoid storing files in public folders: Do not store uploaded files inside publicly accessible directories. Use secure storage or a CDN like Filestack to prevent files from being executed.
Use Content Security Policy (CSP) headers: CSP headers help block uploaded files from running scripts, adding an extra layer of protection against attacks.
Track and log upload activity: Keep logs of file uploads so you can monitor suspicious behavior and investigate security issues if they occur.
Conclusion
File uploads are useful, but they can also be risky if they are not handled properly. Relying only on client-side JavaScript is not enough to protect your application from malicious files. Real security requires server-side virus scanning that users cannot bypass.
In this guide, you learned why virus scanning must happen on the server and how to use Filestack to add virus detection to your file upload flow. You also saw how to test the setup using safe test files and how to follow best practices to keep uploads secure.
If you’re already using Filestack for uploads, enabling virus detection workflows is one of the easiest ways to improve your app’s security. With the right setup and testing, you can confidently allow file uploads while keeping your app and users safe.
This article was originally published on the Filestack blog.
Top comments (0)