Creating Ticket In JITBIT Helpdesk System With File Attachment From SharePoint

In my previous blogs, I have explained how to authenticate the SharePoint with JITBIT helpdesk system and create helpdesk tickets in JITBIT.

Please follow the below links to authentication and Creating tickets in JITIT helpdesk system

1. Authentication
2. Create Ticket in JITBIT System

Now, we are going to implement file upload feature while creating ticket from SharePoint to JITBIT system content, like Images, PDF, Documents, Spreadsheets.

Create a Ticket With File Attachments

POST - https://helpdeskurl/helpdesk/api/ticket

It helps to create a ticket with attachment.

function createTicket() {
    // Pass the necessary variables var catID, ticketBody, ticketSubject, pId,
    // Get the value from the HTML Elements
    catID = $('#picktech').val();
    ticketBody = $('#txtbody').val();
    ticketSubject = $('#txtsub').val();
    pId = $('#picktech2').val(); // Append the form data to POST into JITBIT system
    var form = new FormData();
    form.append("categoryId", catID); // Pass category ID from the dropdown
    form.append("body", ticketBody); // Pass Ticket Body from input element
    form.append("subject", ticketSubject); // Pass the subject from input element
    form.append("priorityId", pId); // Pass priorityId from input element
    form.append("userId", unameid); // Pass the userId of the current user what we already generated and stored globally
    //Upload multiple file attachments into form data
    $.each($('#file')[0].files, function(i, file) {
        form.append('file' + i, file);
    });
    // Now the ajax request calls
    $.ajax({
        "async": true,
        "crossDomain": true,
        "url": "https://vinodh.jitbit.com/helpdesk/api/ticket",
        "method": "POST",
        "headers": {
            "authorization": auth
        },
        "processData": false,
        "contentType": false,
        "mimeType": "multipart/form-data",
        "data": form, // Form data we appended before
        success: function(response) {
            swal({
                title: "Awesome!",
                text: "Ticket: " + response + " has been created successfully", // Am using SWAL sweet alert for success
                type: "success"
            }); // Clear the elements after successful submission
            $('#picktech').val("");
            $('#txtbody').val("");
            $('#txtsub').val("");
            $('#picktech2').val("");
            $('#file').val("");
        },
        error: function(error) {
            //Capture the error of API Call
            swal({
                title: "Oops!",
                text: "Something Went wrong",
                type: "error"
            });
        }
    });
}

HTML

<section class="container-fuild">
    <div class="main-area">
        <div class="row">
            <div class="col-lg-4 col-md-12 col-sm-12" style="padding-top: 20px;">
                <div class="form-group row"> <label for="example-text-input" class="col-2 col-form-label">Name</label>
                    <div class="col-4"> <input class="form-control" type="text" value="" id="lblname" disabled> </div>
                </div>
                <div class="form-group row"> <label for="example-text-input" class="col-2 col-form-label">Email</label>
                    <div class="col-4"> <input class="form-control" type="text" value="" id="lblemail" disabled> </div>
                </div>
                <div class="form-group row"> <label for="example-text-input" class="col-2 col-form-label">Subject</label>
                    <div class="col-4"> <input class="form-control" type="text" value="" id="txtsub" required> </div>
                </div>
                <div class="form-group row"> <label for="exampleTextarea" class="col-2 col-form-label">Message</label>
                    <div class="col-4"> <textarea class="form-control" id="txtbody" rows="8"></textarea> </div>
                </div>
                <div class="form-group row"> <label for="exampleSelect1" class="col-2 col-form-label">Priority</label>
                    <div class="col-4"> <select class="form-control" id="picktech2">

<option value="-1">Low</option>

<option value="0">Medium</option>

<option value="1">High</option>

<option value="2">Critical</option>

</select> </div>
                </div>
                <div class="form-group row"> <label for="exampleSelect1" class="col-2 col-form-label">Category</label>
                    <div class="col-4"> <select class="form-control" id="picktech">

<option value="select">Select</option>

</select> </div>
                </div>
                <div class="form-group row"> <label for="exampleSelect1" class="col-2 col-form-label">Upload</label>
                    <div class="col-4"> <input type="file" id="file" name="img" multiple> </div>
                </div> <button type="button" class="btn btn-primary" onclick="createTicket()">Create</button> </div>
        </div>
    </div>
</section>

Let's create a ticket from SharePoint

After filling the form data, also upload the files. Then, click "Create".

 

So now, the ticket has been created successfully with attachments. Let's navigate to JITBIT helpdesk system.

Finally, you are able to see the ticket with attachment information.

 

So, the NEW Ticket has been submitted from SharePoint with JITBIT API.