1. Use input type=”file” tag
cmp
<!--Upload file interface-->
<div>{!v.fileMessage}</div>
<div class="slds-file-selector__dropzone" style="height:200px;width: 98%;margin-top:10px" ondragleave="{!c.ondragleave}" ondrop="{ !c.ondrop}" ondraenter="{!c.ondraenter}">
<input type="file" class="slds-file-selector__input slds-assistive-text" id="file-upload-input-01" aria-labelledby="file-selector-primary- label file-selector-secondary-label" onchange="{<!-- -->!c.uploadFile}" />
<label class="slds-file-selector__body" for="file-upload-input-01" id="file-selector-secondary-label">
<span class="slds-file-selector__button slds-button slds-button_neutral" style="left:45%; top:90px;color:black;">
File upload</span>
</label>
<br />
<aura:iteration items="{!v.fileList}" var="item" indexVar="index">
<lightning:buttonIcon iconName="utility:close" variant="bare" onclick="{<!-- -->! c.shanchu }" alternativeText="Delete" title=" Settings" name="{!index + 1}" />{!index + 1}.{!item.name}<br />
</aura:iteration>
</div>
js
//Click to upload file
uploadFile: function(cmp, event, helper) {<!-- -->
event. preventDefault();
//cmp.set("v.IsSpinner", true);
const files = event. target. files;
var fileList = cmp.get("v.fileList");
// Only one attachment can be uploaded at a time
if(fileList. length==0){<!-- -->
for (var i = 0; i < files. length; i ++ ) {<!-- -->
fileList. push(files[i]);
}
cmp.set("v.fileList", fileList);
helper.fileToContentVersion(cmp, files);}
else{<!-- -->
alert('Only one attachment can be uploaded at a time');
}
},
helper
fileToContentVersion: function(cmp, files) {<!-- -->
var contentList = cmp.get("v.contentList");
for (var i = 0; i < files. length; i ++ ) {<!-- -->
var File = files[i];
var reader = new FileReader();
reader.readAsDataURL(File);
reader.onload = function(e) {<!-- -->
var fileData = {<!-- -->};
fileData.value = e.target.result.split(";base64,")[1];
fileData.title = File.name;
contentList. push(fileData);
cmp.set("v.contentList", contentList);
cmp.set("v.IsSpinner", false);
};
}
},
helper2
saveMethod: function(cmp, event) {<!-- -->
var fileInput = cmp.find("fuploader").get("v.files");
console.log('fileinput====' + fileInput);
var objFileReader = new FileReader();
if(fileInput!=null){<!-- -->
objFileReader.onload = $A.getCallback(function() {<!-- -->
var fileContents = objFileReader.result;
var base64 = 'base64,';
var dataStart = fileContents. indexOf(base64) + base64. length;
fileContents = fileContents. substring(dataStart);
// cmp.get("v.Reimbursement.DailyDetialList").forEach(function(obj){<!-- -->
// obj.detail.Daily__c = obj.detail.Daily__c + '';
// });
cmp.get("v.Reimbursement.ApprovalDetialList").forEach(function(obj){<!-- -->
obj.detail.HospitalityApplication__c = obj.detail.HospitalityApplication__c + '';
});
var recordId = cmp.get('v.recordId');
var action = cmp.get("c.saveService");
action.setParams({<!-- -->
'flag': false,
'jsonStr':JSON.stringify(cmp.get("v.Reimbursement")),
'fileName': fileInput[0].name,
'base64Data': fileContents,
'contentType': fileInput[0].type
});
console.log('savejson===' + JSON.stringify(cmp.get("v.Reimbursement")));
action.setCallback(this, function(response) {<!-- -->
var state = response. getState();
if(cmp.isValid() & amp; & amp; state == 'SUCCESS') {<!-- -->
var ResponseBody = response. getReturnValue();
var Status = ResponseBody. Status;
var Entity = ResponseBody. Entity;
var Msg = ResponseBody. Msg;
if(Status=='SUCCESS'){<!-- -->
var navEvt = $A.get("e.force:navigateToSObject");
navEvt.setParams({<!-- -->
"recordId": Entity,
"slideDevName": "related"
});
navEvt.fire();
}else{<!-- -->
var toastEvent = $A.get("e.force:showToast");
toastEvent.setParams({<!-- -->
"title" : "ERROR",
"message" : Msg,
"type" : "error"
});
toastEvent.fire();
}
}else{<!-- -->
console.log('The file was not uploaded successfully');
var toastEvent = $A.get("e.force:showToast");
toastEvent.setParams({<!-- -->
"title" : "ERROR",
"message" : 'An unexpected error occurred, please contact your system administrator! ',
"type" : "error"
});
toastEvent.fire();
}
});
$A.enqueueAction(action);
});
objFileReader. readAsDataURL(fileInput[0]);
}else{<!-- -->
}
2. Use the lightning:fileUpload tag
cmp
<div>
<center>
<aura:iteration items="{!v.uploadedFiles}" var="item" indexVar="index">
<tr class="slds-hint-parent">
<th data-label="" scope="row">
<ui:outputText value="{!item.name}"></ui:outputText>
</th>
</tr>
</aura:iteration>
<lightning:fileUpload label="" multiple="true"
accept="{!v.accept}" recordId="{!v.recordId}"
onuploadfinished="{!c.UploadFinished}" />
</center>
</div>
js
UploadFinished : function(component, event, helper) {<!-- -->
console.log("CY======>SF upload completed!!!");
var recordId = component. get("v. recordId");
var fNameList=event. getParam("files");
var toastEvent = $A.get("e.force:showToast");
}