💡 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, the default style may not always fit your UI. In this tutorial, we’ll learn how to use a Static Resource to style the File Upload component for a clean and professional look.

🎯 Goal

• Increase the width of the file upload area
• Center the upload body text
• Improve the visual appearance of the drop zone

We’ll achieve this by uploading a custom CSS file as a Static Resource and loading it dynamically using loadStyle.

⚙️ 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: 2% 0;
}

.fileClass .slds-file-selector__body {
  margin-left: 41% !important;
}

This CSS ensures the file upload area spans the full width with better spacing and alignment.

🧩 Step 2: Upload as Static Resource

1. Go to Setup → Static Resources
2. Click New
3. Name it customStyleCSS
4. Upload the CSS file
5. Set Cache Control to Public
6. Save

🧱 Step 3: 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 the component and add it to a Lightning App Page or Record Page. You’ll see a wider, cleaner file upload UI.

💬 Bonus Tips

• Add drag-and-drop hints
• Use SLDS utility classes
• Highlight the drop area using borders or shadows

📺 Watch the Video

🧾 Conclusion

Static Resources provide a scalable and clean way to customize LWC styling without embedding CSS directly inside components.