Uploading File to Dropbox from LWC without Apex

Today, We are going to see how we can make callouts to private endpoints directly from LWC. In our previous blog, I explained how to make callouts to public API in LWC and How to connect dropbox with Salesforce using Apex. 

When we are authorized to dropbox using Apex, you will get an access token which you need to store somewhere in Salesforce. So, we can use it at the time of uploading a file from JS. 

For uploading a file, we are going to use this https://content.dropboxapi.com/2/files/upload endpoint. For more details on this endpoint, you can go through the Dropbox Developers Documentation. Don't waste time and let's go in deep:

Step 1: Log in to Salesforce. Go to Setup and search for CSP Trusted Sites and click on it.

Step 2: Click on the New Trusted Sites button and Fill in all the related details and Click Save.

Step 3: In the quick find box, Search for Auth. Providers and click on it.

Step 4: Click on the New button and select provider type as Open Id Connect and Fill in all the related details as shown below and Click Save. If you didn't know how to get Consumer Key and Consumer Secret, Please read this blog How to connect dropbox with Salesforce using Apex. 

Step 5: Again in the quick find box, Search for Named Credentials and click on it.

Step 6: Click on the dropdown in Right Side and Click on New Legacy.

Step 7: Select Identity Type as Named Principal and Authentication Protocol as OAuth 2.0 and then choose Auth Provider which you just created in previous step.

Step 8: Below are the related details you need to put in the Named Credentials.

Step 9: When clicking on the Save button. You will redirect to the dropbox login and give all the permissions to connect.

Step 10: Once all is completed, then going back to Named Credentials. It should be Authenticated in Authentication Status Field.

Now, Here all the setup is completed which needs to make callouts from LWC. If you are getting the error as shown in the below image:

Then put the callback URL from Auth Provider in Redirect URIs in the dropbox app. 

Auth Provider:

Dropbox App:

Now, Let's start creating a new LWC Component.
fileUploader.html

fileUploader.js

fileUploader.js-meta.xml

Now, Deploy this component and render it on Home Page and try to upload a file. I tried a file named dropbox.png and clicked on the submit button. 

Now, go to inspect and then Console and check the response. I go the success message as shown below:

Also, go the dropbox and check if that file is uploaded or not. 

Summary:
I created this component only for demo purposes. You can do styling and other changes as per your requirements. Also, I put the static Access Token to make the callouts but you need to fetch the access token from Apex because Access Token is expired in 4 hours. So, You need to refresh it in every 4 hours using Refresh Token. 

Thanks for reading.  Still, if you have any further suggestions, thoughts, and questions, then just make sure to comment down.