We can't create a custom attachment type column in SharePoint, it is the default behavior, we have to attach the attachment to the existing out of the box attachment column.
You can use the below javascript code to attach the attachment :
<html>
<head>
<script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
var fileInput;
$(document).ready(function()
{
fileInput = $("#getFile");
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', registerClick);
});
function registerClick()
{
//Register File Upload Click Event
$("#addFileButton").click(readFile);
}
var arrayBuffer;
function readFile()
{
//Get File Input Control and read th file name
var element = document.getElementById("getFile");
var file = element.files[0];
var parts = element.value.split("\\");
var fileName = parts[parts.length - 1];
//Read File contents using file reader
var reader = new FileReader();
reader.onload = function(e) {
uploadFile(e.target.result, fileName);
}
reader.onerror = function(e)
{
alert(e.target.error);
}
reader.readAsArrayBuffer(file);
}
var attachmentFiles, clientContext, createInfo;
function uploadFile(arrayBuffer, fileName)
{
//Get Client Context and Web object.
clientContext = new SP.ClientContext();
var oWeb = clientContext.get_web();
//Get list and Attachment folder where the attachment of a particular list item is stored.
var oList = oWeb.get_lists().getByTitle('NewList');
var attachmentFolder = oWeb.getFolderByServerRelativeUrl('Lists/NewList/Attachments/1');
//Convert the file contents into base64 data
var bytes = new Uint8Array(arrayBuffer);
var i, length, out = '';
for (i = 0, length = bytes.length; i < length; i += 1) {
out += String.fromCharCode(bytes[i]);
}
var base64 = btoa(out);
//Create FileCreationInformation object using the read file data
createInfo = new SP.FileCreationInformation();
createInfo.set_content(base64);
createInfo.set_url(fileName);
//Add the file to the list item
attachmentFiles = attachmentFolder.get_files().add(createInfo);
//Load client context and execute the batch
clientContext.load(oList);
clientContext.load(attachmentFiles);
clientContext.executeQueryAsync(QuerySuccess, QueryFailure);
}
function QuerySuccess()
{
console.log("Attachment added successfuly ");
}
function QueryFailure(sender, args)
{
console.log('Request failed with error message - ' + args.get_message() + ' . Stack Trace - ' + args.get_stackTrace());
}
</script>
</head>
<body>
<input id="getFile" type="file" /><br />
<input id="addFileButton" type="button" value="Upload" />
</body>
<html>
Reference URL :
Upload File To List Item In Office 365 As An Attachment Using JavaScript Object Model
As an alternate using the REST API, we can attach the attachment to the SharePoint list:
$(document).ready(function() {
var ID = 1;
var listname = "UploadTEST";
$("#my-attachments").change(function() {
var file = $(this)[0].files[0];
var getFileBuffer = function(file) {
var deferred = $.Deferred();
var reader = new FileReader();
reader.onload = function(e) {
deferred.resolve(e.target.result);
}
reader.onerror = function(e) {
deferred.reject(e.target.error);
}
reader.readAsArrayBuffer(file);
return deferred.promise();
};
getFileBuffer(file).then(function(buffer) {
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl +
"/_api/web/lists/getbytitle('" + listname + "')/items(" + ID + ")/AttachmentFiles/add(FileName='" + file.name + "')",
method: 'POST',
data: buffer,
processData: false,
headers: {
"Accept": "application/json; odata=verbose",
"content-type": "application/json; odata=verbose",
"X-RequestDigest": document.getElementById("__REQUESTDIGEST").value,
"content-length": buffer.byteLength
}
});
});
});
});
For details you may refer to the below article:
Uploading Attachments to SharePoint Lists Using REST
