Replace content of the CalendarHTTPRequestGadget.xml file with this script:

<?xml version="1.0" encoding="UTF-8" ?>

<Module>

    <ModulePrefs title="Calendar HTTP Request Gadget">

        <Require feature="opensocial-0.8" />

    </ModulePrefs>

    <Content type="html">

        <![CDATA[

            <!--Including platform css-->

            <link href="/eXoSkin/skin/css/Core.css" rel="stylesheet"></link>

            <link href="/eXoSkin/skin/css/sub-core.css" rel="stylesheet"></link>

            <!--Including JQuery library-->

            <script src="jquery-3.2.1.js"></script>

            <!--Gadget's main body which will be added by HTML DOM Object later-->

            <div id="calendar-show" style="max-width: 800px" class="uiComposer uiGrayLightBox">

                <div class="input-append" style="margin: 20px 30px 20px 30px">

                    <form id="your_form_id" class="form-horizontal">

                        <fieldset>

                          <!-- Form name -->

                          <legend>Add attachment</legend>

                          <!-- Text input-->

                          <label>Event: &nbsp;</label><input type="text" id="eventid_txt" placeholder="Enter event id..."><br/><br/>

                          <!-- File button -->

                          <label>Attachment: &nbsp;</label><input id="file_attachment" name="pdf" class="input-file" type="file"><br/><br/>

                          <!-- Submit button -->

                          <button id="submit" name="submit" class="btn btn-primary" align="center">Submit</button>

                        </fieldset>

                    </form>

                </div>

            </div>

            <!--Start calling js function-->

            <script type="text/javascript">

                $(document).ready(function() {

                  $('#your_form_id').submit(function(e) {

                    e.preventDefault();

                    var form_data = new FormData($(this)[0]);                   

                    $.ajax({

                      url : '/rest/private/v1/calendar/events/'+$('#eventid_txt').val()+'/attachments',

                      type : 'POST',

                      contentType : false,

                      data : form_data,

                      processData : false,

                      success : function(data) {

                        // Handle the response on success

                      }

                    });

                  });

                });

            </script>

        ]]>

    </Content>

</Module>

This script creates a form which allows you to input 2 data fields. The first one is Id of the event that you want to add an attachment, while the second one is the attachment of this event.

Deploy this gadget, you will see the following UI:

In the POST request, the input event Id is passed to the url parameter while the attached file is put into a FormData object.

Enter an available event Id and browse to any local file that you want to attach, for example a .doc file.

Click Submit, then check attachments of the event. You will see the .doc file is created.