+ Start a Discussion
Peter BölkePeter Bölke 

Lightning wait for action response

Hello,

i have another problem. I have an fileupload field. After finishing the upload the attachtmentid should be returned and a relation to a custom object dataset should be created. My problem is, that lightning scripts are async. So the dataset is created, while upload is still proceeding. How can i fullfill my requierement?

Helper.save() is the method to store the file and is called in a controller. I tried to store the attachementid in a helper variable, but didnt work either.
snippet of controller:
var fileobj = cmp.find("fileinput").get("v.files");
                            $A.getCallback(function () {
                                helper.save(cmp);
                                console.log("444", engine['Document_Id__c']);
                                console.log(engine);
                            });

                            var saveEngineObj = cmp.get("c.saveEngine");
                            engine['Document_Id__c'] = helper.attachId;
                            console.log("444", helper.attachId);
                            console.log("444", engine['Document_Id__c']);
                            console.log(engine);
                            $A.getCallback(function () {
                                saveEngineObj.setParams({saveEngineData: engine});
                                saveEngineObj.setCallback(this, function(responseEngine){
                                    //cmp.set("v.customSettings", responseEngine.getReturnValue());
                                    var engineData = responseEngine.getReturnValue();
                                    console.log('EE 4', engineData);
                                    
                                    $A.get('e.force:refreshView').fire();
                                    $A.get("e.force:closeQuickAction").fire()
                                    
                                });
                                
                                $A.enqueueAction(saveEngineObj);
                            });
                        }


Helper:
({
    fileId : '',
    attachId: '',
    save : function(component) {
        //var fileInput = component.find("fileinput").getElement();
        console.log('start save');
        var fileInput = component.find("fileinput").get("v.files");
        console.log(fileInput[0]);
        var file = fileInput[0];
        var MAX_FILE_SIZE = 750000;
        if (file.size > this.MAX_FILE_SIZE) {
            alert('File size cannot exceed ' + this.MAX_FILE_SIZE + ' bytes.\n' +
                  'Selected file size: ' + file.size);
            return;
        }
        
        var fr = new FileReader();
        
        var self = this;
        
        fr.onload = function() {
            var fileContents = fr.result;
            var base64Mark = 'base64,';
            var dataStart = fileContents.indexOf(base64Mark) + base64Mark.length;
            fileContents = fileContents.substring(dataStart);
            self.upload(component, file, fileContents);
        };
        
        fr.readAsDataURL(file);
        console.log("FILE 1", file)

    },
    upload: function(component, file, fileContents) {
        console.log("upload helper function");
        var action = component.get("c.saveTheFile"); 
        if(this.fileId == ''){
            this.fileId = component.get("v.recordId");
        }
        action.setParams({
            //parentId: component.get("v.recordId"),
            parentId: this.fileId,
            fileName: file.name,
            base64Data: encodeURIComponent(fileContents), 
            contentType: file.type
        });
        
        action.setCallback(this, function(a) {
            this.attachId = a.getReturnValue();
            
            console.log("att", a.getReturnValue());
        });
        
        
        $A.enqueueAction(action); 
        
    }

})


thanks for any help
Peter
 
Best Answer chosen by Peter Bölke
Ravi Dutt SharmaRavi Dutt Sharma
Hi Peter,

Place you code to insert data into dataset object inside the callback present in upload method.

Controller:
 
var fileobj = cmp.find("fileinput").get("v.files");
                            $A.getCallback(function () {
                                helper.save(cmp);
                                console.log("444", engine['Document_Id__c']);
                                console.log(engine);
                            });

Helper
 
({
    fileId : '',
    attachId: '',
    save : function(component) {
        //var fileInput = component.find("fileinput").getElement();
        console.log('start save');
        var fileInput = component.find("fileinput").get("v.files");
        console.log(fileInput[0]);
        var file = fileInput[0];
        var MAX_FILE_SIZE = 750000;
        if (file.size > this.MAX_FILE_SIZE) {
            alert('File size cannot exceed ' + this.MAX_FILE_SIZE + ' bytes.\n' +
                  'Selected file size: ' + file.size);
            return;
        }
        
        var fr = new FileReader();
        
        var self = this;
        
        fr.onload = function() {
            var fileContents = fr.result;
            var base64Mark = 'base64,';
            var dataStart = fileContents.indexOf(base64Mark) + base64Mark.length;
            fileContents = fileContents.substring(dataStart);
            self.upload(component, file, fileContents);
        };
        
        fr.readAsDataURL(file);
        console.log("FILE 1", file)

    },
    upload: function(component, file, fileContents) {
        console.log("upload helper function");
        var action = component.get("c.saveTheFile"); 
        if(this.fileId == ''){
            this.fileId = component.get("v.recordId");
        }
        action.setParams({
            //parentId: component.get("v.recordId"),
            parentId: this.fileId,
            fileName: file.name,
            base64Data: encodeURIComponent(fileContents), 
            contentType: file.type
        });
        
        action.setCallback(this, function(a) {
            this.attachId = a.getReturnValue();
            
			var saveEngineObj = cmp.get("c.saveEngine");
			engine['Document_Id__c'] = attachId;
			console.log("444", attachId);
			console.log("444", engine['Document_Id__c']);
			console.log(engine);
			$A.getCallback(function () {
				saveEngineObj.setParams({saveEngineData: engine});
				saveEngineObj.setCallback(this, function(responseEngine){
					//cmp.set("v.customSettings", responseEngine.getReturnValue());
					var engineData = responseEngine.getReturnValue();
					console.log('EE 4', engineData);
					
					$A.get('e.force:refreshView').fire();
					$A.get("e.force:closeQuickAction").fire()
					
				});
				
				$A.enqueueAction(saveEngineObj);
			});
            
        });
        
        
        $A.enqueueAction(action); 
        
    }

})

Please mark it as the best answer it it resolves your issue. Thanks.
 

All Answers

Ravi Dutt SharmaRavi Dutt Sharma
Hi Peter,

Place you code to insert data into dataset object inside the callback present in upload method.

Controller:
 
var fileobj = cmp.find("fileinput").get("v.files");
                            $A.getCallback(function () {
                                helper.save(cmp);
                                console.log("444", engine['Document_Id__c']);
                                console.log(engine);
                            });

Helper
 
({
    fileId : '',
    attachId: '',
    save : function(component) {
        //var fileInput = component.find("fileinput").getElement();
        console.log('start save');
        var fileInput = component.find("fileinput").get("v.files");
        console.log(fileInput[0]);
        var file = fileInput[0];
        var MAX_FILE_SIZE = 750000;
        if (file.size > this.MAX_FILE_SIZE) {
            alert('File size cannot exceed ' + this.MAX_FILE_SIZE + ' bytes.\n' +
                  'Selected file size: ' + file.size);
            return;
        }
        
        var fr = new FileReader();
        
        var self = this;
        
        fr.onload = function() {
            var fileContents = fr.result;
            var base64Mark = 'base64,';
            var dataStart = fileContents.indexOf(base64Mark) + base64Mark.length;
            fileContents = fileContents.substring(dataStart);
            self.upload(component, file, fileContents);
        };
        
        fr.readAsDataURL(file);
        console.log("FILE 1", file)

    },
    upload: function(component, file, fileContents) {
        console.log("upload helper function");
        var action = component.get("c.saveTheFile"); 
        if(this.fileId == ''){
            this.fileId = component.get("v.recordId");
        }
        action.setParams({
            //parentId: component.get("v.recordId"),
            parentId: this.fileId,
            fileName: file.name,
            base64Data: encodeURIComponent(fileContents), 
            contentType: file.type
        });
        
        action.setCallback(this, function(a) {
            this.attachId = a.getReturnValue();
            
			var saveEngineObj = cmp.get("c.saveEngine");
			engine['Document_Id__c'] = attachId;
			console.log("444", attachId);
			console.log("444", engine['Document_Id__c']);
			console.log(engine);
			$A.getCallback(function () {
				saveEngineObj.setParams({saveEngineData: engine});
				saveEngineObj.setCallback(this, function(responseEngine){
					//cmp.set("v.customSettings", responseEngine.getReturnValue());
					var engineData = responseEngine.getReturnValue();
					console.log('EE 4', engineData);
					
					$A.get('e.force:refreshView').fire();
					$A.get("e.force:closeQuickAction").fire()
					
				});
				
				$A.enqueueAction(saveEngineObj);
			});
            
        });
        
        
        $A.enqueueAction(action); 
        
    }

})

Please mark it as the best answer it it resolves your issue. Thanks.
 
This was selected as the best answer
Peter BölkePeter Bölke
thanks you