Send the image using the callout Rest api

As a salesforce specialist and having approx 5 years of experience, I must have to complete all requirements requested by the client in salesforce.

I know almost everything is possible in salesforce but sometimes you have to do some workaround to achieve exact functionality due to the governor's limits.

so my requirement is to create a page in the lightning view, once the user clicked ticket is created in an external system, Simple right! the same thing I think and confidently say yes it will take around 3 days to complete this integration using rest API.

Here comes the challenge on the second day when I am sending attachments from page to apex controller. I was totally stuck, searched a lot, a lot and lots of blogs try almost every workaround which is currently presented, all are very confusing and very hard to execute lots of error, lots of time-wasting.

Then I come to know that apex has a limitation "salesforce Idea", Currently Salesforce does not allow us to do this. The APEX HTTP request can be used to send text/CSV files withing an HTTP request body but we cannot set an image blob value within the request body.

Oh god! I was totally blank, thinking excuses on how to explain this problem to my manager.

On the third day, let's try one more time thinking out of the box. why not try with the front end, I know we can write SOQL in scripting.

Then I decided to do AJAX call but on the other hand, we have a salesforce Villian "lightning locker service" and my client is using lightning. 

After searching a couple of blogs on secure scripting, below is my full working and very simple code, That accepts any kind of file(of course you can restrict the user to attach a specific file format).

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script  type='text/javascript'>
    //function to send data into external system
    $(document).ready(function(){
    $("button").click(function(){
        
        //spinner show
        //$("#spinner").show();
        //console.log('clicked');
        
        //Attached image token
        var AttToken ='';
        //feching attachments
        var filesSelected = document.getElementById('attachmentFile').files[0];
        if(filesSelected != undefined) {
            //sending attachments to zendesk and getting attached token
			//here am using zendesk example you can include your end point URL
            $.ajax({url: "https://companyURL.zendesk.com/api/v2/uploads.json?filename="+filesSelected.name,
                    type: 'POST',
                    data: filesSelected,
                    dataType: 'json',
                    processData: false,
                    contentType: 'application/binary',
                    headers: {
                        'Authorization': 'Basic ********AccessToken*********' 
                    },
                    success: function(result){
                        console.log('token');
                        console.log(result.upload.token);
                        AttToken =result.upload.token;
                         //getFormData(AttToken);
                    }
                   });
        }else{
       // getFormData(AttToken);
        }
        console.log('--------AttToken---------->');
        console.log(AttToken);
    });
   });
   
   <!--html code-->
   <!--slds designing which accept input from system-->
    <div class="demo-only" style="max-width:300px">
                    <div class="slds-form-element">
                        <span class="slds-form-element__label" id="file-selector-primary-label">Attachment</span>
                        <div class="slds-form-element__control">
                            <div class="slds-file-selector slds-file-selector_images">
                                <div class="slds-file-selector__dropzone">
                                    <input type="file" class="slds-file-selector__input slds-assistive-text" accept="image/png" id="attachmentFile" aria-labelledby="file-selector-primary-label file-selector-secondary-label" />
                                    <label class="slds-file-selector__body" for="attachmentFile" id="file-selector-secondary-label">
                                        <span class="slds-file-selector__button slds-button slds-button_neutral">
                                            <svg class="slds-button__icon slds-button__icon_left" aria-hidden="true">
                                            </svg>Upload Image</span>
                                        <span class="slds-file-selector__text slds-medium-show">or Drop Image</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
	 <!--slds designing which accept input from system-->

            <button type="button" class="slds-button slds-button_brand" onclick="" style="background-color: #0070d2;border-color: #0070d2;">Create</button>