Input for Uploading Files in Web Component

To upload files through lightning web component, we can use one of two options:

1. A dedicated component for files - lightning-file-upload.
2. A lightning input with type: file.

The primary distinction is that the first is simpler to use and saves lines of code. Because the component already manages the uploading, error handling, and linking to the record.

However, the second option provides the developer with significantly more flexibility and is valuable in situations where the first option is insufficient. For example, if we want to do something else with the file, such as sending it by email or extracting data from it, or if we want to change the styling of the component.

In fact, it's the same trade-off as in many cases: use something that was already built but has limitation, or to invest more and develop something unique.

Another important consideration is the limitation related to file size and number of files that can be used. The maximum file size for the lightning-file-uploader is 2GB, which is sufficient for most cases. The lightning-input has no size limitation, but there are other considerations that might require attention (like payload size and heap size) depending on what we are doing with the file. Eventually with this option when we will need to process large files we need to use special logic in the code. For example, split the file to chunks.

Examples

We can use the following code to upload files in the first option. There is no need for Javascript code to process anything because the component already handles everything!

<template>

    <lightning-file-upload

        label="Attach File"

        name="fileUploader"

        record-id={recordId}

        multiple>

    </lightning-file-upload>    

</template>

As previously said, the component simplifies the procedure while allowing for some flexibility. Yes, we can limit the file types that can be used and provide a function that will be invoked after the component has finished uploading the file, however in many circumstances, this is insufficient.

In such cases, we should choose the second choice.

We can change our html code to the following. 

<template>

    <lightning-input

        label="Attach File"

        type="file"

        onchange={importFileChange}>

    </lightning-input>

</template>

Initially the UI for choose (or dragging) files will look exactly the same, however here we need to handle the processing ourself using the method onchange that calling javascript method. 

The example below demonstrates how to extract the file name and data, which is similar code for most use cases, then there should be unique code that process the file per the requirements. 

import { LightningElement, track, api } from 'lwc';

export default class FileUploaderDemo extends LightningElement {

    @api recordId;

    @track importFileName;

    @track importFile;

    importFileChange(event){

        const file = event.target.files[0];

       

        var reader = new FileReader()

        reader.onload = () => {

            this.importFile = reader.result.split(',')[1];

            this.importFileName = file.name;

            //Process the file data as needed

        }

        reader.readAsDataURL(file);

    }

}

We can send the file data to a server method for further processing, add custom validation for it and much more, we can also change its styling.

<template>

    <lightning-input

        label="Attach File"

        type="file"

        onchange={importFileChange}

        style="background-color:green;">

       

    </lightning-input>

</template>

Summary

The obvious choice is to use less code that should be as simple as possible, thus we'll want to utilize lighting-file-uploader as often as feasible, but the second option will be handy in the other circumstances. The idea is to use it only when truly unique functionality is required, rather than for easy applications such as improving the UI. 

Finally, keep in mind that writing code for uploading files can be  complex task that requires costly maintenance. As a result, it is advised to think carefully before choosing this way.