The fileUpload component provides your users with the ability to attach files. For example, if your event registration requires a photo from your guest, your guest would be able to attach a jpeg to their registration.

To instantiate your fileUpload component, use the below code example.

<Framework:InputFields qaData='{"type" : "input", "name": "imageUrl"}' group="sponsorEventBuilder" fieldType="fileUpload" aura:id="imageUrl" label="{!$Label.c.Sponsor_Package_Image_URL}" value="{!v.sponsorObj}" otherAttributes='{maximumFileSize : 5242880,allowedMimeTypes:["image/png","image/jpeg","image/jpg","image/gif","image/bmp","image/tiff"]}'/>
XML

Aura Methods for FrameworkInputFields also can be used here, as needed. 

Each file is stored in a private Amazon S3 bucket. When the file is uploaded, Salesforce creates a timed link for you to view the file. You can override this functionality.

To Configure the Time Limit for the File's URL

From the Spark Admin page:

  1. [Click] the AWS S3 Configuration link under Settings Pages.
  2. [Enter] the Upload TTL and Download TTL. These Time to Live values are entered in seconds. The minimum is 10 seconds, and there is no maximum.
  3. [Click] 
    .

Configurable Attributes

Fonteva allows you to customize your fileUpload component via otherAttributes. For example, in the above code block, the maximumFileSize and allowedMimeTypes are specified. In the example below, the viewport, along with the cropped file size and allowed mime types, are indicated.

Here is an example of the otherAttributes available for this component.

component.find('imageUrl').setOtherAttributes({
           maximumFileSize : 15242880,
           allowedMimeTypes:["image/png","image/jpeg","image/jpg","image/gif","image/bmp","image/tiff"],
           croppingParams : {
               enableExif : true,
               viewport: {
                   width: 274,
                   height: 274,
                   type: 'square'
               },
               boundary: {
                   width: 400,
                   height: 400
               }
           },
           croppingResultParams : {
               type: "blob",
               size: {width : 274, height : 274},
               format : "jpeg",
               circle : false
           },
           allowCropping : true,
           additionalModalClass : 'sponsor-image-modal',
		   showPreview : true,
		   previewWidth: 150,
		   previewHeight: 150
});
JS
  • maximumFileSize - The maximum allowed file size in bytes.
  • allowedMimeTypes - You can provide specific file types. If you do not provide a list of accepted file types, users are allowed to upload any type of file.
  • viewport - The part of the image displayed. You can specify the height and width, along with the shape of the viewport.

  • cropppingResultParams - You can customize the result of the cropped image. You can specify the file type, the size of the image, and the type.

  • allowCropping - Setting this attribute to "true" enables cropping
  • additionalModalClass - You can provide custom CSS classes for the image cropping modal.
  • showPreview - Setting this attribute to "true" displays a preview next to the fileUpload field.
  • previewWidth & previewHeight - The height and width of the preview above. 

  • Cropping is only available for image file types.
  • Fonteva uses Croppie for file cropping. See http://foliotek.github.io/Croppie/ for more information.

  • Fonteva recommends the size specified in croppingResultParams and viewport match. If the two size attributes do not match, it will result in a skewed image.

Below is a rendered example of fileUpload component: