// When the web page / UI is ready $(document).ready(function() { getExistingAttachments(); // Initialise a variable that references the "drop-zone" container defined in the HTML var dropZone = $('#drop-zone'); // Add a dragover event listener to the dropZone dropZone.on('dragover', function() { // Add a class of 'dragover'. We'll use this to provide visual feedback $(this).addClass('dragover'); return false; }); // Add a dragleave event listener to the dropZone dropZone.on('dragleave', function() { // Remove the'dragover' class. We'll use this to provide visual feedback $(this).removeClass('dragover'); return false; }); // Add a drop event listener to the dropZone. This is our key event dropZone.on('drop', function(e) { // Prevent the default behavior of opening the file in the browser e.preventDefault(); // Remove the'dragover' class. We'll use this to provide visual feedback $(this).removeClass('dragover'); // Retrieve the dropped files from the event object using e.originalEvent.dataTransfer.files var files = e.originalEvent.dataTransfer.files; // Loop through the files array $.each(files, function(index, file) { // Initialise a new file reader var reader = new FileReader(); // What to do once the reader.onload = function(event) { // Split the file contents after the first comma (removing the base64 prefix) var base64 = event.target.result.split(',')[1]; var fileName = file.name; var fileType = file.type; var fileSize = file.size; // Run the uploadToNoteAttachment function, passing the base64 content, the file name and the file type uploadToNoteAttachment(base64,fileName,fileType); }; // Read the file reader.readAsDataURL(file); }); }); }); // Function to upload the note attachment using the Portal Web API // Accepts the file content, file name and file type as parameters function uploadToNoteAttachment(base64,fileName,fileType) { var record = {}; record.filename = fileName; // Text record.documentbody = base64; // Text record.subject = fileName; // Text // Set the Regarding field to a case with GUID taken from the id parameter in the URL record["objectid_incident@odata.bind"] = "/incidents({{ request.params.id }})"; // Lookup webapi.safeAjax({ type: "POST", contentType: "application/json", url: "/_api/annotations", data: JSON.stringify(record), success: function (data, textStatus, xhr) { var newId = xhr.getResponseHeader("entityid"); console.log(newId); // On successful upload, run the generateThumbnail function, passing the GUID of the newly created note record, the file name and the file type generateThumbnail(newId,fileName,fileType); }, error: function (xhr, textStatus, errorThrown) { console.log(xhr); } }); } // Function to generate thumbnails with either an preview for images or a file icon for other file types // Accepts a ntoe GUID, a file name and mime type as parameters function generateThumbnail(guid,fileName,mimeType) { if(mimeType.startsWith('image')) { var thumbnail = '<li class="attachment-preview"><div data-id="' + guid + '" data-filename="' + fileName + '"><img class="img-responsive" src="/_entity/annotation/' + guid + '"></div></li>'; } else { var thumbnail = '<li class="attachment-preview"><div data-id="' + guid + '" data-filename="' + fileName + '"><div class="inner"><span class="glyphicon glyphicon-file" aria-hidden="true"></span> ' + fileName + '</div></div></li>'; } // Append the thumbnail to the file list $('ul#file-list').append(thumbnail); } // Function to retrieve any existing attachments regarding the current case (using the GUID from the URL) function getExistingAttachments() { webapi.safeAjax({ type: "GET", url: "/_api/annotations?$select=annotationid,filename,mimetype&$filter=(_objectid_value eq {{ request.params.id }} and isdocument eq true)&$orderby=createdon desc", contentType: "application/json", success: function (data, textStatus, xhr) { var results = data; console.log(results); for (var i = 0; i < results.value.length; i++) { var result = results.value[i]; // Columns var annotationid = result["annotationid"]; // Guid var filename = result["filename"]; // Text var mimetype = result["mimetype"]; // Text // Run the generateThumbnail function, passing the note GUID, file name and mimetype as inputs generateThumbnail(annotationid,filename,mimetype); } }, error: function (xhr, textStatus, errorThrown) { console.log(xhr); } }); }