Attachment_via_JS_in_VF.txt

// APEX CONTROLLER CODE
public class QuickPix {
    
    public String parentId {get;set;}
    public String sessionId {get;set;}

    public QuickPix(){
        parentId = ApexPages.currentPage().getParameters().get('id');
        sessionId = UserInfo.getSessionId();
    }
}

// VF PAGE CODE
<apex:page controller="QuickPix" standardstylesheets="false">
    <apex:SLDS />
    <style>

        .background {
            background-color:#eee;
            padding: .1rem 0 1rem 0;
            width:100%;
            height:100%;
        }
        .container {
            margin: 0 auto;
        }
        .card {
            background: #FFF !important;
            padding: 1rem;

            margin: 2rem 10% 2rem 10%;
            box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
        }
        .content {
            margin: 0 auto;
        }
        .hide {
            display:none;
        }
    </style>
    
    <div class="background">
        <div class="container">
            <div class="card">
                <div class="content">
                    <h3>Capture Example</h3>
                    <div class="slds-form-element">
                        <!-- <span class="slds-form-element__label" id="file-selector-primary-label"></span> -->
                        <div class="slds-form-element__control">
                            <div class="slds-file-selector slds-file-selector_files">
                            <div class="slds-file-selector__dropzone">
                                <input accept="image/*" capture="true" class="capture slds-file-selector__input slds-assistive-text" type="file" aria-labelledby="file-selector-primary-label file-selector-secondary-label" />
                                <label class="slds-file-selector__body" for="capture" id="file-selector-secondary-label">
                                <span class="sudoCapture slds-file-selector__button slds-button slds-button_neutral">
                                    <svg class="slds-button__icon slds-button__icon_left" aria-hidden="true">
                                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Asset.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#upload')}" />
                                    </svg>Take &amp; Upload Photo</span>
                                </label>
                            </div>
                            </div>
                        </div>
                    </div>
                    <br />
                    <br />

                    <h3>Select Example</h3>
                    <div class="slds-form-element">
                        <!-- <span class="slds-form-element__label" id="file-selector-primary-label"></span> -->
                        <div class="slds-form-element__control">
                            <div class="slds-file-selector slds-file-selector_files">
                            <div class="slds-file-selector__dropzone">
                                <input accept="image/*" class="select slds-file-selector__input slds-assistive-text" type="file" aria-labelledby="file-selector-primary-label file-selector-secondary-label" />
                                <label class="slds-file-selector__body" for="capture" id="file-selector-secondary-label">
                                <span class="sudoSelect slds-file-selector__button slds-button slds-button_neutral">
                                    <svg class="slds-button__icon slds-button__icon_left" aria-hidden="true">
                                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Asset.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#upload')}" />
                                    </svg>Upload Local Photo</span>
                                </label>
                            </div>
                            </div>
                        </div>
                    </div>
                    <br />
                    <br />

                    <h3>Thumbs Up(loaded files :)</h3>
                    <div class="thumbs"></div>
                    <br />
                    <br />
                    
                    <i>Dev Note: only thing different on inputs is capture attribute. Capture has devices jump strait to the camera to take a picture
                    whereas the other has user select camera or file from device's local storage. Takes a step out if all they want is quickly snap pics.
                    <br/>
                    This Uploads onchange of input -- so immediate. Remoting may take less time, perhaps only milliseconds, but has a file cap equvilant of less than 5MB. 
                    Today's (&amp; tomorrow's) cameras could blow that out no prob so this uses Org's own SOAP/AJAX API. Hopfully that works as it's not open to the public therefore not going to hit limits (hopefully) but may want to run those numbers to be sure.
                    </i>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        const __sfdcSessionId = '{!sessionId}'
    </script>

    <script src="/soap/ajax/34.0/connection.js" type="text/javascript"></script>

    <script>

        /* SETUP EL's */
        this.dom = {}
        this.dom.select = document.querySelector('.select')
        this.dom.sudoSelect = document.querySelector('.sudoSelect')
        this.dom.capture = document.querySelector('.capture')
        this.dom.sudoCapture = document.querySelector('.sudoCapture')
        this.dom.thumbs = document.querySelector('.thumbs')

        /* Add Listeners to ELs */
        this.dom.sudoSelect.onclick = () => this.dom.select.click()
        this.dom.sudoCapture.onclick = () => this.dom.capture.click()
        this.dom.select.onchange = e => addAttachment(e.target.files[0])
        this.dom.capture.onchange = e => addAttachment(e.target.files[0])
        
        
        /* Helpers */
        const appendThumb = (el) => this.dom.thumbs.appendChild(el)

        const addAttachment = (file) => {
            console.dir(file)

            const reader = new FileReader();
            
            if(file == undefined){
                alert('Attachment required to proceed');
                return false
            }

            if(file.size > 26214400){  //Where 26214400 is byte equivalent of 25MB
                alert('Attachment size not supported');
                return false
            }

            reader.onload = (e) => {
                
                const attachment = new sforce.SObject('Attachment');  
                attachment.Name = file.name;
                attachment.IsPrivate = false;  
                attachment.ContentType = file.type;
                attachment.Body = (new sforce.Base64Binary(e.target.result)).toString();;
                attachment.Description = file.name;
                attachment.ParentId = '{!parentId}';//Where recordID is the ID of record to which you want to add your attachment
                const result = sforce.connection.create([attachment])
                
                if(result[0].getBoolean("success")){  
                    console.log('file added successfully')

                    return true
                }else{
                    console.error('error occured')

                    return false
                }
            };

            reader.onloadend = (e) => {

                const thumbReader = new FileReader()

                thumbReader.addEventListener("load", function() {
                    
                    const img = document.createElement('img')
                    img.src = thumbReader.result
                    img.style['max-width'] = '200px'
                    img.style['max-height'] = '200px'
                    appendThumb(img)

                }, false);

                thumbReader.readAsDataURL(file);
                
                
                return true
            };
            
            reader.readAsBinaryString(file);
        }

        /* SF UI FIX */
        Array.from(document.querySelectorAll('button')).forEach(el => el.classList.remove('btn'))

    </script>

</apex:page>