Drag and drop messages and attachments into the task pane of an Outlook add-in

In Outlook on the web and the new Outlook on Windows, create a handler in your JavaScript file for the Office.EventType.ItemDraggedAndDropped event using the Office.context.mailbox.addHandlerAsync method. When the ItemDraggedAndDropped event occurs, the handler receives a DragAndDropEventArgs object so that you can identify when a user drags an item over the task pane, when they drop the item into the task pane, and what data is associated with the item. Depending on whether a drag or drop event occurred, the dragAndDropEventData property of the DragAndDropEventArgs object returns a DragoverEventData or DropEventData object. These objects provide information on the position of the mouse pointer and the data being transferred to the task pane.

When messages are dragged to the task pane, they're dropped as .eml files. Attachments that are dropped retain their current format. For a list of supported types, see Supported item types.

The following example shows how to implement the drag-and-drop feature.

// Handle the ItemDraggedAndDropped event.
Office.context.mailbox.addHandlerAsync(
    Office.EventType.ItemDraggedAndDropped,
    (event) => {
        console.log(`Event occurred: ${event.type}`);
        const eventData = event.dragAndDropEventData;

        // Get the file name and the contents of the items dropped into the task pane.
        if (eventData.type == "drop") {
            const files = eventData.dataTransfer.files;
            files.forEach((file) => {
                const content = file.fileContent;
                const name = file.name;

                // Add operations to process the item here, such as uploading the file to a CRM system.
            });
        }
    },
    (asyncResult) => {
        if (asyncResult.status === Office.AsyncResultStatus.Failed) {
            console.error("Failed to add event handler:", asyncResult.error.message); 
            return;
        }

        console.log("Event handler added successfully.");
    }
);

In Outlook on Windows (classic) and on Mac, use the HTML Drag and Drop API to handle the DragEvent DOM event. With the DragEvent object, you can identify when a user drags an item over the task pane, when they drop the item into the task pane, and what data is associated with the item. When a message is dragged and dropped into a task pane, its format varies depending on the Outlook client.

• Windows (classic): Dropped as a .msg file.
• Mac: Dropped as a .eml file.

Attachments that are dropped into a task pane retain their current format. For a list of supported types, see Supported item types.