Drag & Drop Case Attachments – Final JavaScript

 // 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);
        }
    });
}