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.

  1. function createTicket() {
  2. // Pass the necessary variables var catID, ticketBody, ticketSubject, pId,
  3. // Get the value from the HTML Elements
  4. catID = $('#picktech').val();
  5. ticketBody = $('#txtbody').val();
  6. ticketSubject = $('#txtsub').val();
  7. pId = $('#picktech2').val(); // Append the form data to POST into JITBIT system
  8. var form = new FormData();
  9. form.append("categoryId", catID); // Pass category ID from the dropdown
  10. form.append("body", ticketBody); // Pass Ticket Body from input element
  11. form.append("subject", ticketSubject); // Pass the subject from input element
  12. form.append("priorityId", pId); // Pass priorityId from input element
  13. form.append("userId", unameid); // Pass the userId of the current user what we already generated and stored globally
  14. //Upload multiple file attachments into form data
  15. $.each($('#file')[0].files, function(i, file) {
  16. form.append('file' + i, file);
  17. });
  18. // Now the ajax request calls
  19. $.ajax({
  20. "async": true,
  21. "crossDomain": true,
  22. "url": "https://vinodh.jitbit.com/helpdesk/api/ticket",
  23. "method": "POST",
  24. "headers": {
  25. "authorization": auth
  26. },
  27. "processData": false,
  28. "contentType": false,
  29. "mimeType": "multipart/form-data",
  30. "data": form, // Form data we appended before
  31. success: function(response) {
  32. swal({
  33. title: "Awesome!",
  34. text: "Ticket: " + response + " has been created successfully", // Am using SWAL sweet alert for success
  35. type: "success"
  36. }); // Clear the elements after successful submission
  37. $('#picktech').val("");
  38. $('#txtbody').val("");
  39. $('#txtsub').val("");
  40. $('#picktech2').val("");
  41. $('#file').val("");
  42. },
  43. error: function(error) {
  44. //Capture the error of API Call
  45. swal({
  46. title: "Oops!",
  47. text: "Something Went wrong",
  48. type: "error"
  49. });
  50. }
  51. });
  52. }

HTML

  1. <section class="container-fuild">
  2. <div class="main-area">
  3. <div class="row">
  4. <div class="col-lg-4 col-md-12 col-sm-12" style="padding-top: 20px;">
  5. <div class="form-group row"> <label for="example-text-input" class="col-2 col-form-label">Name</label>
  6. <div class="col-4"> <input class="form-control" type="text" value="" id="lblname" disabled> </div>
  7. </div>
  8. <div class="form-group row"> <label for="example-text-input" class="col-2 col-form-label">Email</label>
  9. <div class="col-4"> <input class="form-control" type="text" value="" id="lblemail" disabled> </div>
  10. </div>
  11. <div class="form-group row"> <label for="example-text-input" class="col-2 col-form-label">Subject</label>
  12. <div class="col-4"> <input class="form-control" type="text" value="" id="txtsub" required> </div>
  13. </div>
  14. <div class="form-group row"> <label for="exampleTextarea" class="col-2 col-form-label">Message</label>
  15. <div class="col-4"> <textarea class="form-control" id="txtbody" rows="8"></textarea> </div>
  16. </div>
  17. <div class="form-group row"> <label for="exampleSelect1" class="col-2 col-form-label">Priority</label>
  18. <div class="col-4"> <select class="form-control" id="picktech2">
  20. <option value="-1">Low</option>
  22. <option value="0">Medium</option>
  24. <option value="1">High</option>
  26. <option value="2">Critical</option>
  28. </select> </div>
  29. </div>
  30. <div class="form-group row"> <label for="exampleSelect1" class="col-2 col-form-label">Category</label>
  31. <div class="col-4"> <select class="form-control" id="picktech">
  33. <option value="select">Select</option>
  35. </select> </div>
  36. </div>
  37. <div class="form-group row"> <label for="exampleSelect1" class="col-2 col-form-label">Upload</label>
  38. <div class="col-4"> <input type="file" id="file" name="img" multiple> </div>
  39. </div> <button type="button" class="btn btn-primary" onclick="createTicket()">Create</button> </div>
  40. </div>
  41. </div>
  42. </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.