Is it posible to upload file in Lists Attachments in SharePoint in custom way

Question

Is it posible to upload file in Lists Attachments in SharePoint in custom way I already tried using REST and JS but I am facing an error and it can't upload if it's posible kindly suggest what way to do, if it's not posible I change the flow of my custom lists.

Here is the code I am using.

<script type="text/javascript">
function upload() {
// Define the folder path for this example.
var serverRelativeUrlToFolder = 'Sample';

//change item to your itemid for no hardcoding the value
var itemId = 1;

// Get test values from the file input and text input page controls.
var fileInput = jQuery('#getFile');
// var newName = jQuery('#displayName').val();
var fileCount = fileInput[0].files.length;
// Get the server URL.
var serverUrl = _spPageContextInfo.webAbsoluteUrl;
var filesUploaded = 0;
for(var i = 0; i < fileCount; i++){
    // Initiate method calls using jQuery promises.
    // Get the local file as an array buffer.
    var getFile = getFileBuffer(i);
    getFile.done(function (arrayBuffer,i) {

        // Add the file to the SharePoint folder.
        var addFile = addFileToFolder(arrayBuffer,i);
        addFile.done(function (file, status, xhr) {
            //$("#msg").append("<div>File : "+file.d.Name+" ... uploaded sucessfully</div>");
            filesUploaded++;
            if(fileCount == filesUploaded){
                alert("All files uploaded successfully");
                //$("#msg").append("<div>All files uploaded successfully</div>");
                $("#getFile").value = null;
                filesUploaded = 0;
            }
        });
        addFile.fail(onError);
    });
    getFile.fail(onError);

}

// Get the local file as an array buffer.
function getFileBuffer(i) {
    var deferred = jQuery.Deferred();
    var reader = new FileReader();
    reader.onloadend = function (e) {
        deferred.resolve(e.target.result,i);
    }
    reader.onerror = function (e) {
        deferred.reject(e.target.error);
    }
    reader.readAsArrayBuffer(fileInput[0].files[i]);
    return deferred.promise();
}

// Add the file to the file collection in the Shared Documents folder.
function addFileToFolder(arrayBuffer,i) {
var index = i;

    // Get the file name from the file input control on the page.
    var fileName = fileInput[0].files[index].name;

    // Construct the endpoint.
    var queryUrl = serverUrl+ "/_api/lists/GetByTitle('" + serverRelativeUrlToFolder + "')/Attachments(" + itemId + ")/Attachments/add(FileName='" + fileName + "')";

    // Send the request and return the response.
    // This call returns the SharePoint file.
    return jQuery.ajax({
        url: queryUrl,
        type: "POST",
        data: arrayBuffer,
        processData: false,
        headers: {
            "accept": "application/json;odata=verbose",
            "X-RequestDigest": jQuery("#__REQUESTDIGEST").val(),
            "content-length": arrayBuffer.byteLength
        }
    });
}
}

 // Display error messages. 
 function onError(error) {
alert(error.responseText);
}


</script>
<input id="getFile" name="file" type="file" multiple /><br />
<input id="addFileButton" type="button" value="Upload" onclick="upload();"/>

Answer 1

If you want to upload file to list attachment it has to be associated with list item. Change your url as below :

 var queryUrl = serverUrl+ "/_api/lists/GetByTitle('" + serverRelativeUrlToFolder + "')/Items(" + itemId + ")/Attachments/add(FileName='" + fileName + "')";

I consider in 'Sample' as your list name and item id '1' is your existing item. If not not then you can give id of existing item. I will upload files to that list item as attachments.

For reference