ABSYZ ABSYZ

  • Home

    Welcome to ABSYZ

  • About us

    Who We Are

  • Our Expertise

    What We Do

  • Our Approach

    How We Do It

  • Products

    What We Made

  • Industries

    Who We Do It For

  • Clients

    Whom We Did It For.

  • Article & Blogs

    What Experts Think

  • Careers

    Join The Team

  • Get In Touch

    Let’s Get Started

ABSYZ

Winter ’18: Uploading Files in lightning Component

Home / Article & Blogs / Salesforce / Lightning / Winter ’18: Uploading Files in lightning Component

Winter ’18: Uploading Files in lightning Component

By Arya Ramani inLightning, Salesforce

Consider a situation wherein you have to upload a file using lightning component. In normal scenario, you have to write code to input a file and insert it as an attachment to the parent record using apex but this does have some limitations:

  • Extensive coding.
  • Cannot exceed file size limit of 6MB.

Salesforce has come up with a new tag that provides an easy way to upload your files as attachment. You can also drag and drop files that need to be uploaded.

The recordId is a required attribute as it associates the file to the parent record. Maximum you can upload upto 10 files simultaneously. The maximum file size that you can upload is 2GB. In communities, the file type and size is determined by the community file moderation. In this case we have considered the parent Id as  account Id since the component is added on the account record detail page.

The component tag cannot be used in lightning out or standalone apps. Files with following extension cannot be used: .htm, .html, .htt, .htx, .mhtm, .mhtml, .shtm, .shtml, .acgi, .svg

Let us assume a scenario where we want to upload an attachment for account. We have added the component on the account record detail page. Label and recordId are required attributes. If recordId is not specified, the component is visible in disabled state.

Lightning Component .cmp

[sourcecode language=”java”]
<aura:component implements=”force:appHostable, flexipage:availableForAllPageTypes, flexipage:availableForRecordHome, force:hasRecordId, forceCommunity:availableForAllPageTypes, force:lightningQuickAction” access=”global” >

<aura:attribute name=”recordId” type=”Id” description=”Record to which the files should be attached” />
<lightning:fileUpload label=”Add attachment” multiple=”true” accept=”.pdf, .png, .docx, .xlsx” recordId=”{!v.recordId}” onuploadfinished=”{!c.handleUploadFinished}” />

</aura:component>
[/sourcecode]

 

Controller.js

[sourcecode language=”java”]
({
handleUploadFinished : function(component, event, helper) {

// Get the list of uploaded files
var uploadedFiles = event.getParam(“files”);

var toastEvent = $A.get(“e.force:showToast”);
toastEvent.setParams({
“title”: “Success!”,
“message”: “File “+uploadedFiles[0].name+” Uploaded successfully.”
});
toastEvent.fire();

}
})
[/sourcecode]

1.png

2.jpg

3

4.jpg

Onuploadfinished attribute is used to perform any JavaScript controller function after  the file has been uploaded.

A sample file of 20MB has been uploaded without any limitations. If multiple attribute is set to true you can upload multiple files simultaneously. By default, it is set to false.

5

So, now you can upload files easily without any size limitations and no need of extensive coding. Just a simple lightning tag allows you to upload files quickly and easily.

FilesWinter '18
28
Like this post
7 Posts
Arya Ramani

Search Posts

Archives

Categories

Recent posts

Top 5 Factors to evaluate before choosing a Salesforce Integrator

Top 5 Factors to evaluate before choosing a Salesforce Integrator

Significance of UI/UX Design

Significance of UI/UX Design

Cyber-security in an uncertain world

Cyber-security in an uncertain world

The world of AR and VR

The world of AR and VR

The in-and-out of ML

The in-and-out of ML

  • Previous PostLocation & Metadata Retrieval from Image in Visualforce Page
  • Next PostMaking Callouts with Batch Apex for Data of over 12 MB

Related Posts

REST API call from Einstein Analytics Dashboard
Apex REST Salesforce Salesforce Einstein Wave Analytics

REST API call from Einstein Analytics Dashboard

Create/Update Salesforce Picklist definitions using metadata API
Integration Metadata API Salesforce

Create/Update Salesforce Picklist definitions using metadata API

3 Comments

  1. Pushpa
    Reply
    2 June 2018

    Hi

    Requesting the blog owner to remove the reference to project url from my previous reply.

    Thanks,
    Pushpa

    Reply
  2. Rob
    Reply
    18 July 2018

    Trying to resize a photo before it is saved. Are there any other events that the fileupload tag supports besides onuploadfinished? hoping for onchange or onuploadstarted.

    Reply
  3. Stéphane C.
    Reply
    2 August 2018

    Hi,

    Do you have an idea to display the latest uploaded file below it using this :

    Best,

    Reply

Leave a Reply (Cancel reply)

Your email address will not be published. Required fields are marked *

*
*

ABSYZ Logo
  • Home
  • About us
  • Article & Blogs
  • Careers
  • Get In Touch
  • Our Expertise
  • Our Approach
  • Products
  • Industries
  • Clients
  • White Papers

ABSYZ Software Consulting Pvt. Ltd.
USA: 49197 Wixom Tech Dr, Wixom, MI 48393, USA
M: +1.415.364.8055

India: 6th Floor, SS Techpark, PSR Prime, DLF Cyber City, Gachibowli, Hyderabad, Telangana – 500032
M: +91 79979 66174

Copyright ©2020 Absyz Inc. All Rights Reserved.

youngsoft
Copy