💡 How to Use Static Resource in Salesforce to Style the File Upload Component (LWC)

🔹 Introduction

When working with Lightning Web Components (LWC), the <lightning-file-upload> component is a convenient way to let users upload files to Salesforce records. However, sometimes the default style doesn’t fit your UI — the drop area might be too narrow, or you may want to make it full-width for a better user experience.

In this tutorial, we’ll see how to use a Static Resource to style your File Upload component, so it looks clean, responsive, and professional.

🎯 Goal

• Increase the width of the file upload area.
• Center the upload body text.
• Make the overall drop zone look more appealing.

We’ll achieve this using a custom CSS file uploaded as a Static Resource, and then load it dynamically in the LWC using the loadStyle function.

⚙️ Step 1: Create a CSS File

Create a file named customStyleCSS.css with the following content:

.fileClass {
  width: 100% !important;
}
.fileClass .slds-file-selector {
  width: 100% !important;
}
.fileClass .slds-file-selector__dropzone {
  width: 100% !important;
}
.fileClass .slds-file-selector__dropzone slot {
  display: inline-block;
  width: 100% !important;
  padding-top: 2%;
  padding-bottom: 2%;
}
.fileClass .slds-file-selector__dropzone slot .slds-file-selector__body {
  margin-left: 41% !important;
}

This CSS ensures the entire file upload area spans the full width and has proper padding for better usability.

🧩 Step 2: Upload It as a Static Resource

1. Go to Setup → Static Resources in Salesforce.
2. Click New.
3. Enter a Name (e.g., customStyleCSS).
4. Upload your customStyleCSS.css file.
5. Set Cache Control to Public.
6. Click Save.

Your CSS file is now reusable across multiple components via Static Resources.

🧱 Step 3: Create Your LWC Component

🧾 HTML (customFileUpload.html)

<template>
  <lightning-file-upload
    label="Upload files"
    name="fileUploader"
    accept={acceptedFormats}
    record-id={myRecordId}
    onuploadfinished={handleUploadFinished}
    class="fileClass"
  ></lightning-file-upload>
</template>

⚙️ JavaScript (customFileUpload.js)

import { LightningElement, api } from "lwc";
import { loadStyle } from "lightning/platformResourceLoader";
import customStyle from "@salesforce/resourceUrl/customStyleCSS";

export default class CustomFileUpload extends LightningElement {
  @api myRecordId;

  connectedCallback() {
    loadStyle(this, customStyle);
  }

  get acceptedFormats() {
    return [".pdf", ".png"];
  }

  handleUploadFinished(event) {
    const uploadedFiles = event.detail.files;
    alert("No. of files uploaded : " + uploadedFiles.length);
  }
}

🧠 Step 4: Deploy and Test

Deploy your component and use it in a Lightning App Page or Record Page. You’ll now see that the file upload drop zone spans the entire width and looks clean and professional.

💬 Bonus Tip

• Add icons or “Drag & Drop” text for visual clarity.
• Use SLDS utility classes for a consistent Salesforce look.
• Experiment with border colors or shadows to highlight the drop area.

📺 Watch the Video Tutorial

For a complete visual walkthrough, check out my YouTube video:
👉 Watch: How to Increase Drop Area of File Upload Using Static Resource

🧾 Conclusion

Using Static Resources in Salesforce is a powerful way to add custom styling to your LWC components — without hardcoding CSS inside your component.