1

I have application which should take using android/iPhone and send to SF backend. But when try to send image I fetch error:

Received exception event aura:systemError from server

and:

enter image description here

And my code:

<aura:component controller="PhotoController" access="global">

<aura:attribute name="valuePhoto" type="String" default=""/>
<aura:attribute name="sizePhoto" type="Integer" default="0"/>
<aura:attribute name="debuger" type="String" default="start"/>
<aura:attribute name="isPhotoLoaded" type="Boolean" default="false"/>
<aura:attribute name="photoSource" type="String" />

<h1>Photo component</h1>
<h2>{!v.valuePhoto.length}</h2>
<input value="{!v.valuePhoto}" aura:id="photo" name="photo" label="Photo" type="file" accept="image/*;capture=camera" onchange="{!c.takePhoto}"/>

<h1>Size of filte retirned from server : {!v.sizePhoto}</h1><br/>
{!v.debuger}

<aura:if isTrue="{!v.isPhotoLoaded}">
    <img src="{!v.photoSource}"/>
</aura:if>

({
takePhoto : function(component, event, helper) {
    var photo_as_string = component.get('v.valuePhoto');
    var file = component.find("photo").getElement().files[0];
    var fr = new FileReader();
    fr.onload = function() {
        var fileContents = fr.result;
        var base64Mark = 'base64,';
        var dataStart = fileContents.indexOf(base64Mark) + base64Mark.length;
        fileContents = fileContents.substring(dataStart);

        component.set('v.photoSource', fileContents);
        var savePhotoAction = component.get('c.savePhoto');

        savePhotoAction.setParams({
            photo_value: fileContents
        });

        savePhotoAction.setCallback(this, function(response) {
            var state = response.getState();
            if(state === 'SUCCESS') {
                var size = response.getReturnValue();
                component.set('v.sizePhoto', size);
            } else if(state === 'ERROR') {
                var errors = response.getError();
                if(errors && errors.length && errors[0] && errors[0].message) {
                    console.error(errors[0].message);
                }
            } else {
                console.error('Unexpected error was occured')
            }
        });
        setTimeout(() => $A.enqueueAction(savePhotoAction), 1000);
        setTimeout(() => component.set('v.debuger', component.get('v.photoSource').length), 2000);
    };
    //
    fr.readAsDataURL(file);

    fr.onloadend = function() {console.log('ended')}
}

})

public with sharing class PhotoController {

@AuraEnabled
public static Integer savePhoto(String photo_value) {
    System.debug('photo_value is null -> ' + (photo_value == null));
    try {
        Blob decoded = EncodingUtil.base64Decode(photo_value);
        Integer size = decoded.size();
        System.debug('Size -> ' + size);
        return size;
    } catch(Exception e) {
        String message = e.getMessage();
        Exception cause = e.getCause();

        System.debug('message -> ' + message);
        System.debug('cause -> ' + cause);

        throw new AuraHandledException(e.getMessage());
    }
}

}

How workaround this? Maybe there is way to reduce size of photo? And what max size of image can I send to salesforce, I noticed that is near 0.75Mb?

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.