Salesforce Mobile App Improvement for Uploading Files

by Matt Koehler, Trail Two

When trying to upload a file using the Salesforce Mobile App on an iPhone, out of the box Salesforce Mobile functionality does not allow access to files. The only options are Use Latest Photo, Take Photo, or Pick from Camera Roll. This may work if you need to upload a picture, but what about other files on your iPhone?

Here is Salesforce’s official response (TLDR; NOT easy to link the file to a record on iPhone).

1. Open up the File on the device, choose the share feature and the "Copy to Salesforce" button. See Apple Documentation: Use the Files app on your iPhone, iPad, or iPod touch.

2. After sharing into Salesforce App, the newly created Salesforce File will now show up in the "Owned By Me" Files list.

3. You can then associate it to the Salesforce record using the Post or File action and choose the File from within Salesforce.

As developers, we know we can provide a better experience for our customers.

To make this process easier, a Lightning Web Component (LWC) was created using the lightning-file-upload tag. The LWC was added to the Lightning Record Page as new tab.

force-app/main/default/lwc/myComponent/myComponent.html

  <template>
 <lightning-card>
    <lightning-file-upload
      label="Attach File"
      name="fileUploader"
      record-id={recordId}
      multiple>
    </lightning-file-upload>
  </lightning-card>
</template>

force-app/main/default/lwc/myComponent/myComponent.js

  import { LightningElement, api } from 'lwc';

export default class VendorBid extends LightningElement {
  @api recordId;
}

One of the keys needed to make the LWC available on mobile is by updating the XML file to add the supported Form Factors.

In our situation, the goal was to only show this tab in the mobile app and not in the browser on the user’s computer.

If you want it show in Large form factors, you would just another supported form factor for Large.

force-app/main/default/lwc/myComponent/myComponent.js-meta.xml

  <?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>55.0</apiVersion>
  <isExposed>true</isExposed>
  <masterLabel>File Upload for Mobile</masterLabel>
  <description>File upload for mobile</description>
  <targets>
    <target>lightning__RecordPage</target>
  </targets>
  <targetConfigs>
    <targetConfig targets="lightning__RecordPage">
      <supportedFormFactors>
        <supportedFormFactor type="Small"/>
      </supportedFormFactors>
    </targetConfig>
  </targetConfigs>
</LightningComponentBundle>

Here it shows that the File Upload tab is not visible in the Large Form Factor.

Note: No Upload Image Tab for Desktop

Here is the File Upload tab on the bottom of the screenshot showing in the Mobile App below.

Note: Upload Image Tab Visible for Mobile

As seen below, the options now are Photo Library, Take Photo or Video, or Choose Files. Also the new tab reduced the number of steps to upload on Android devices as well. By adding the multiple option on the lightning-file-upload, the users were able to upload multiple files/photos.

Note: You can now upload from Photo Gallery, Take a Phone AND from Files. You can also upload multiple at once!

We deployed the functionality and our users love it. They even commented that the Android experience now has one less click for File Upload. Win-win!