Lightning元件中自定義檔案上傳

Lightning元件中自定義檔案上傳

File Upload Component:

<!——FileUpload。cmp——>

<!—— ‘parentId’ Aura Attribute for store the Id for Parent Record where we are attach our file ——>

<!—— ‘fileName’ attribute for display the selected file name ——>

<!—— Lightning Input with file type and on file change call the ‘handleFilesChange’ controller ——>

{!v。fileName}


variant=“brand” class=“slds-m-top——medium”/>

File Upload JavaScript Controller:

({

handleSave: function(component, event, helper) {

if (component。find(“fuploader”)。get(“v。files”)。length > 0) {

helper。uploadHelper(component, event);

} else {

alert(‘Please Select a Valid File’);

}

},

handleFilesChange: function(component, event, helper) {

var fileName = ‘No File Selected。。’;

if (event。getSource()。get(“v。files”)。length > 0) {

fileName = event。getSource()。get(“v。files”)[0][‘name’];

}

component。set(“v。fileName”, fileName);

},

handleCancel: function(component, event, helper) {

$A。get(“e。force:closeQuickAction”)。fire();

}

})

File Upload JavaScript Controller Helper:

({

MAX_FILE_SIZE: 4500000, //Max file size 4。5 MB

CHUNK_SIZE: 750000, //Chunk Max size 750Kb

uploadHelper: function(component, event) {

// get the selected files using aura:id [return array of files]

var fileInput = component。find(“fuploader”)。get(“v。files”);

// get the first file using array index[0]

var file = fileInput[0];

var self = this;

// check the selected file size, if select file size greter then MAX_FILE_SIZE,

// then show a alert msg to user,hide the loading spinner and return from function

if (file。size > self。MAX_FILE_SIZE) {

component。set(“v。fileName”, ‘Alert : File size cannot exceed ’ + self。MAX_FILE_SIZE + ‘ bytes。\n’ + ‘ Selected file size: ’ + file。size);

return;

}

// create a FileReader object

var objFileReader = new FileReader();

// set on​load function of FileReader object

objFileReader。on​load = $A。getCallback(function() {

var fileContents = objFileReader。result;

var base64 = ‘base64,’;

var dataStart = fileContents。indexOf(base64) + base64。length;

fileContents = fileContents。substring(dataStart);

// call the uploadProcess method

self。uploadProcess(component, file, fileContents);

});

objFileReader。readAsDataURL(file);

},

uploadProcess: function(component, file, fileContents) {

// set a default size or startpostiton as 0

var startPosition = 0;

// calculate the end size or endPostion using Math。min() function which is return the min。 value

var endPosition = Math。min(fileContents。length, startPosition + this。CHUNK_SIZE);

// start with the initial chunk, and set the attachId(last parameter)is null in begin

this。uploadInChunk(component, file, fileContents, startPosition, endPosition, ‘’);

},

uploadInChunk: function(component, file, fileContents, startPosition, endPosition, attachId) {

// call the apex method ‘SaveFile’

var getchunk = fileContents。substring(startPosition, endPosition);

var action = component。get(“c。SaveFile”);

action。setParams({

parentId: component。get(“v。parentId”),

fileName: file。name,

base64Data: encodeURIComponent(getchunk),

contentType: file。type,

fileId: attachId

});

// set call back

action。setCallback(this, function(response) {

// store the response / Attachment Id

attachId = response。getReturnValue();

var state = response。getState();

if (state === “SUCCESS”) {

// update the start position with end postion

startPosition = endPosition;

endPosition = Math。min(fileContents。length, startPosition + this。CHUNK_SIZE);

// check if the start postion is still less then end postion

// then call again ‘uploadInChunk’ method ,

// else, diaply alert msg and hide the loading spinner

if (startPosition < endPosition) {

this。uploadInChunk(component, file, fileContents, startPosition, endPosition, attachId);

} else {

alert(‘File has been uploaded successfully’);

}

// handel the response errors

} else if (state === “INCOMPLETE”) {

alert(“From server: ” + response。getReturnValue());

} else if (state === “ERROR”) {

var errors = response。getError();

if (errors) {

if (errors[0] && errors[0]。message) {

console。log(“Error message: ” + errors[0]。message);

}

} else {

console。log(“Unknown error”);

}

}

});

// enqueue the action

$A。enqueueAction(action);

}

})

File Upload Apex Controller:

public with sharing class FileUploadController {

@AuraEnabled

public static Id SaveFile(Id parentId, String fileName, String base64Data, String contentType) {

base64Data = EncodingUtil。urlDecode(base64Data, ‘UTF-8’);

Attachment attach = new Attachment();

attach。parentId = parentId;

attach。Body = EncodingUtil。base64Decode(base64Data);

attach。Name = fileName;

attach。ContentType = contentType;

Insert attach;

return attach。Id;

}

}

File Upload Apex Controller:

<!——FileUploadApp。app——>

效果如下:

Lightning元件中自定義檔案上傳

頂部