Téléchargeur de fichiers personnalisé à l’aide du composant Web Lightning – SFDCPanther3 minutes de lecture
Salut #Ohana,
Dans cet article de blog, nous expliquerons comment développer un téléchargement de fichier personnalisé à l’aide du composant Web Lightning.
Nous allons créer un composant qui téléchargera le fichier sous l’objet fichier au lieu de la pièce jointe. La raison pour laquelle nous le faisons, Salesforce désapprouve les pièces jointes.
Nous utiliserons FileReader classe de JavaScript pour lire le fichier, puis l’envoyer à Salesforce.
Nous avons conçu le composant qui se trouvera à l’intérieur de la page d’enregistrement, mais si vous souhaitez l’utiliser à un endroit différent, effectuez l’ajustement en conséquence.
L’objectif principal de ce composant est de fournir la possibilité de télécharger les fichiers même si vous ne connaissez pas l’ID d’enregistrement et l’ID d’enregistrement sera généré au moment de l’exécution.
Étape 1 – Créez la classe Apex
public with sharing class FileUploadService {
@AuraEnabled
public static Id saveTheChunkFile(Id parentId, String fileName, String base64Data, String contentType, String fileId){
base64Data = EncodingUtil.urlDecode(base64Data, 'UTF-8');
if ( String.isBlank(fileId) ) {
fileId = saveFiles(parentId, fileName, base64Data );
} else {
appendToFile(fileId, base64Data);
}
return Id.valueOf(fileId);
}
@AuraEnabled
public static Id saveFiles(Id recordId, String fileName, String base64Data ) {
ContentVersion contentToInsert =new ContentVersion();
contentToInsert.Title =fileName;
contentToInsert.VersionData=EncodingUtil.base64Decode(base64Data);
contentToInsert.PathOnClient='/' + fileName ;
contentToInsert.IsMajorVersion = false;
insert contentToInsert;
contentToInsert = [select id, ContentDocumentId from ContentVersion WHERE Id =: contentToInsert.Id];
ContentDocumentLink cl = new ContentDocumentLink();
cl.ContentDocumentId = contentToInsert.ContentDocumentId;
cl.LinkedEntityId = recordId;
cl.ShareType = 'V';
cl.Visibility = 'AllUsers';
insert cl;
return contentToInsert.id;
}
@AuraEnabled
public static void appendToFile(Id contentDocumentId, String base64Data) {
//base64Data = EncodingUtil.urlDecode(base64Data, 'UTF-8');
ContentVersion versionData = [
SELECT Id, VersionData,ContentDocumentId
FROM ContentVersion
WHERE Id = :contentDocumentId
];
String existingBody = EncodingUtil.base64Encode(versionData.VersionData);
versionData.VersionData = EncodingUtil.base64Decode(existingBody + base64Data);
update versionData;
}
}
Étape 2 – Créer le composant Web Lightning
fichier .html
{fileName} {fileSize}
fichier .js
import { LightningElement, api } from 'lwc';
import saveTheChunkFile from '@salesforce/apex/FileUploadService.saveTheChunkFile';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
const MAX_FILE_SIZE = 4500000;
const CHUNK_SIZE = 750000;
export default class UploadFile extends LightningElement {
@api recordId;
fileName = '';
filesUploaded = [];
isLoading = false;
fileSize;
handleFilesChange(event) {
if(event.target.files.length > 0) {
this.filesUploaded = event.target.files;
this.fileName = event.target.files[0].name;
}
}
saveFile(){
var fileCon = this.filesUploaded[0];
this.fileSize = this.formatBytes(fileCon.size, 2);
if (fileCon.size > MAX_FILE_SIZE) {
let message = 'File size cannot exceed ' + MAX_FILE_SIZE + ' bytes.n' + 'Selected file size: ' + fileCon.size;
this.dispatchEvent(new ShowToastEvent({
title: 'Error',
message: message,
variant: 'error'
}));
return;
}
var reader = new FileReader();
var self = this;
reader.onload = function() {
var fileContents = reader.result;
var base64Mark = 'base64,';
var dataStart = fileContents.indexOf(base64Mark) + base64Mark.length;
fileContents = fileContents.substring(dataStart);
self.upload(fileCon, fileContents);
};
reader.readAsDataURL(fileCon);
}
upload(file, fileContents){
var fromPos = 0;
var toPos = Math.min(fileContents.length, fromPos + CHUNK_SIZE);
this.uploadChunk(file, fileContents, fromPos, toPos, '');
}
uploadChunk(file, fileContents, fromPos, toPos, attachId){
this.isLoading = true;
var chunk = fileContents.substring(fromPos, toPos);
saveTheChunkFile({
parentId: this.recordId,
fileName: file.name,
base64Data: encodeURIComponent(chunk),
contentType: file.type,
fileId: attachId
})
.then(result => {
attachId = result;
fromPos = toPos;
toPos = Math.min(fileContents.length, fromPos + CHUNK_SIZE);
if (fromPos {
console.error('Error: ', error);
})
.finally(()=>{
})
}
formatBytes(bytes,decimals) {
if(bytes == 0) return '0 Bytes';
var k = 1024,
dm = decimals || 2,
sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}
}
Merci d’avoir lu 🙂 #DéveloppeurGeeks #SalesforceDéveloppeur #SfdcPanther #AskPanther
S’il vous plaît, faites comme partager abonnez-vous au SFDCPanther Chaîne Youtube.
Cliquez pour noter cet article!
[Total:[Total:2 Moyenne: 4,5]