SharePoint Attachments Operations with JavaScript

Managing attachments in SharePoint lists is a crucial aspect of many business applications. Whether you are developing a custom solution, automating workflows, or integrating SharePoint with other systems, handling attachments effectively can greatly enhance user experience and efficiency. In this article, we will focus on performing CRUD (Create, Read, Update, Delete) operations and batching exclusively using pure JavaScript, without relying on external libraries like PnP.js.

What Are SharePoint Attachments?

SharePoint attachments are files associated with list items, allowing users to upload documents, images, or other types of files directly to a list item instead of a document library. This feature is commonly used in forms, ticketing systems, and project management solutions.

Why Do We Need Attachment Operations?

Effective attachment management helps automate processes, improve efficiency, and enhance collaboration. Some common scenarios include:

Bulk uploading and processing: Handling multiple attachments simultaneously.
Data migration: Moving list items with attachments between different SharePoint environments.
Custom application integration: Ensuring seamless data exchange between SharePoint and external systems.
Improved user experience: Allowing users to manage attachments directly from custom forms or applications.

Who Uses SharePoint Attachments?

Several professionals across industries rely on attachment functionalities:

Developers: To implement attachment management features in SharePoint solutions.
Business Analysts: To automate workflows that involve document handling.
IT Administrators: To manage large-scale data operations, migrations, and governance.
End Users: To upload and access relevant attachments in SharePoint lists.

Applications That Use SharePoint Attachments

Many business applications leverage SharePoint attachment capabilities, such as:

HR Systems: Storing resumes, offer letters, and employee documents.
Help Desk and Ticketing Systems: Attaching screenshots or logs to support requests.
Project Management Tools: Associating documents with tasks and milestones.
CRM Solutions: Managing customer-related files directly within SharePoint.

CRUD Operations for SharePoint Attachments with JavaScript

1. Create (Upload) Attachments

Using the SharePoint REST API, we can upload attachments to list items.

JavaScript (REST API)

function uploadAttachment(itemId, file) {
    var reader = new FileReader();
    reader.onload = function (e) {
        var arrayBuffer = e.target.result;
        fetch(`/sites/mysite/_api/web/lists/getbytitle('MyList')/items(${itemId})/AttachmentFiles/add(FileName='${file.name}')`, {
            method: 'POST',
            body: arrayBuffer,
            headers: {
                'Accept': 'application/json;odata=verbose',
                'X-RequestDigest': document.getElementById('__REQUESTDIGEST').value,
                'Content-Type': file.type
            }
        })
        .then(response => response.json())
        .then(data => console.log('File uploaded successfully', data))
        .catch(error => console.error('Upload failed', error));
    };
    reader.readAsArrayBuffer(file);
}

2. Read (Retrieve) Attachments

function getAttachments(itemId) {
    fetch(`/sites/mysite/_api/web/lists/getbytitle('MyList')/items(${itemId})/AttachmentFiles`, {
        method: 'GET',
        headers: { 'Accept': 'application/json;odata=verbose' }
    })
    .then(response => response.json())
    .then(data => console.log(data.d.results))
    .catch(error => console.error('Error retrieving attachments', error));
}

3. Delete Attachments

function deleteAttachment(itemId, fileName) {
    fetch(`/sites/mysite/_api/web/lists/getbytitle('MyList')/items(${itemId})/AttachmentFiles/getByFileName('${fileName}')`, {
        method: 'DELETE',
        headers: {
            'Accept': 'application/json;odata=verbose',
            'X-RequestDigest': document.getElementById('__REQUESTDIGEST').value
        }
    })
    .then(() => console.log('Attachment deleted successfully'))
    .catch(error => console.error('Error deleting attachment', error));
}

Batching Attachments for Performance

Batching improves performance by reducing the number of API calls.

async function batchUploadAttachments(itemId, files) {
    for (let file of files) {
        await uploadAttachment(itemId, file);
    }
    console.log("Batch upload completed");
}

Pros and Cons

Pros

✔️ No dependency on external libraries.
✔️ Full control over API requests.
✔️ Direct integration with SharePoint REST API.

Cons

❌ Requires handling authentication manually.
❌ REST API calls can be verbose.
❌ No built-in error handling like PnP.js.

Alternatives

Approach	Pros	Cons
JavaScript REST API	Full control over requests	Verbose and complex
PnP.js	Simplified and optimized	External dependency
Power Automate	No-code solution	Limited customization
CSOM (C#)	Full SharePoint integration	Requires server-side execution

Handling SharePoint list attachments using pure JavaScript provides flexibility and control but requires a deeper understanding of the SharePoint REST API. Compared to PnP.js, which simplifies development, JavaScript gives developers direct access to REST endpoints without external dependencies. Choosing the right approach depends on your project requirements and scalability needs.

What approach do you prefer for handling SharePoint attachments? Share your thoughts in the comments!