How to Resize the Drop Zone in lightning-file-upload?

Question

I am trying to customize the size of the file drop zone in the lightning-file-upload component but have not achieved the desired result. I attempted to modify the width and appearance using CSS, but the drop zone size remains unchanged.

Here is my current implementation:
HTML

<lightning-card title="Upload CSV File and Update Record">
    <div class="file-upload-container">
        <lightning-file-upload
            label="Upload CSV File"
            accept=".csv"
            record-id={recordId}
            onuploadfinished={handleUploadFinished}
            class="custom-drop-zone"
        ></lightning-file-upload>
    </div>
    <lightning-button label="Update Loan" onclick={createRecords}></lightning-button>
</lightning-card>

CSS

.file-upload-container {
    max-width: 600px; /* Set the maximum width as needed */
    width: 100%; /* Responsive width */
    margin: 0 auto; /* Center the component */
}

lightning-file-upload {
    width: 100%; /* Ensure the component fills the container */
}

.custom-drop-zone {
    width: 100%; /* Ensure the drop zone spans the container */
    border: 2px dashed #0070d2; /* Customize the border of the drop zone */
    border-radius: 10px; /* Rounded corners */
    padding: 20px; /* Add padding */
    background-color: #f4f6f9; /* Light background color */
}

Despite applying these styles, the drop zone does not resize as expected. How can I properly modify the size of the lightning-file-upload drop zone?

Answer:

The lightning-file-upload component is built using Salesforce Lightning Design System (SLDS), which means that its internal structure is already styled using predefined CSS classes. As a result, modifying the component’s appearance using only the outer class (custom-drop-zone) does not fully control the file drop zone’s actual size.

The drop zone consists of an internal structure that includes a div element with the SLDS class .slds-file-selector__body. This class is responsible for rendering the upload area, including the “Upload Files” button. To properly adjust the size, you need to override this SLDS class using custom CSS.

Here is the corrected and improved approach to modifying the drop zone size:

Updated CSS to Resize the Drop Zone

.file-upload-container {
    max-width: 600px; /* Set the maximum width as needed */
    width: 100%; /* Responsive width */
    margin: 0 auto; /* Center the component */
}

lightning-file-upload {
    width: 100%; /* Ensure the component fills the container */
}

.custom-drop-zone {
    width: 100%; /* Ensure the drop zone spans the container */
    border: 2px dashed #0070d2; /* Customize the border of the drop zone */
    border-radius: 10px; /* Rounded corners */
    padding: 20px; /* Add padding */
    background-color: #f4f6f9; /* Light background color */
}

/* Modify the inner file selector body to control the size */
.slds-file-selector_files .slds-file-selector__body,
.slds-file-selector--files .slds-file-selector__body {
    display: flex;
    align-items: center;
    width: 20%; /* Adjust this value to control the drop zone width */
    justify-content: center;
    padding: 30px; /* Increase padding for a larger drop zone */
    min-height: 100px; /* Set a minimum height */
}

Explanation of the Fix

1. Why the Original Code Didn’t Work:
   The .custom-drop-zone class modified the outer lightning-file-upload container, but it did not target the inner SLDS file selector body, which determines the actual drop zone size.
   lightning-file-upload renders an inner structure that includes .slds-file-selector__body, which needs direct modification.
2. What the Fix Does:
   The added CSS directly targets the SLDS class .slds-file-selector__body inside lightning-file-upload.
   width: 20% controls the drop zone width. You can increase this value to expand the upload area.
   padding: 30px increases the clickable area inside the drop zone.
   min-height: 100px ensures that the drop zone is tall enough to be visually noticeable.
   justify-content: center centers the “Upload Files” button within the drop zone.
   

Alternative Approach: Using JavaScript (If Necessary)

If modifying the CSS alone does not fully meet your requirements, you can use JavaScript in LWC’s renderedCallback() to dynamically adjust the size of the drop zone after the component loads.

JavaScript (Optional Enhancement)

import { LightningElement } from 'lwc';

export default class FileUploadComponent extends LightningElement {
    renderedCallback() {
        const fileUpload = this.template.querySelector('lightning-file-upload');
        if (fileUpload) {
            let dropZone = fileUpload.shadowRoot.querySelector('.slds-file-selector__body');
            if (dropZone) {
                dropZone.style.width = '50%'; // Change width dynamically
                dropZone.style.minHeight = '120px'; // Adjust height dynamically
                dropZone.style.padding = '40px'; // Add more padding dynamically
            }
        }
    }
}

What this JavaScript does:

• It selects the inner drop zone (.slds-file-selector__body) inside the lightning-file-upload component.
• It applies dynamic styling to adjust the width, height, and padding after the component renders.
• If CSS alone does not work as expected due to SLDS restrictions, this method ensures the styling changes take effect.

The most effective way to resize the drop zone in lightning-file-upload is by overriding the SLDS class .slds-file-selector__body in CSS. If further customization is needed, JavaScript can be used to manipulate the DOM dynamically.

Job-Oriented Salesforce Course with Real-Time Projects and Money Back Guarantee

Our Salesforce Course is designed to provide a comprehensive understanding of the Salesforce platform, equipping you with the essential skills to excel in the CRM industry. The program covers key modules such as Salesforce Admin, Developer, and AI, combining theoretical learning with hands-on practice. Through real-world projects and practical exercises, you will develop the expertise needed to tackle complex business challenges using Salesforce solutions. Our expert trainers ensure you gain both technical proficiency and industry knowledge to thrive in the Salesforce ecosystem.

Beyond technical training, our Salesforce Training in Philadelphia offers personalized mentorship, certification preparation, and interview coaching to enhance your career opportunities. You will have access to in-depth study materials, live project exposure, and continuous support throughout your learning journey. By the end of the course, you will be fully prepared for certification exams and equipped with the practical problem-solving skills that employers seek. Kick-start your Salesforce career with us and unlock limitless opportunities. Sign up for a Free Demo today!