How to add attachment in SharePoint list using SharePoint Hosted App

Question

I am working on a SharePoint Hosted app in JSOM, where a user enters his expenses with attachment. I have no Idea how to upload attachment and add it into a SharePoint List. I have created that expense List in App Environment itself, The column name is Attachment while its type is Hyperlink or Picture (Might be this is wrong but I haven't found a column type related to Attachment).

<td>
   <input type="file" id="attch_0" />
 </td>

Kindly Suggest.

Answer 1

This is how I have done, I have created a new Document Library where I upload file also I can upload some Metadata too. Below is the code -
function readFile(fileName, claimNo, file) {

    //Get File Input Control and read th file name  
    var element = document.getElementById("attch_id");
    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;

function uploadFile(arrayBuffer, fileName) {
    //Get Client Context,Web and List object.  
    var clientContext = new SP.ClientContext();
    var oWeb = clientContext.get_web();
    var oList = oWeb.get_lists().getByTitle('AttachmentList');

    //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  
    var createInfo = new SP.FileCreationInformation();
    createInfo.set_content(base64);
    createInfo.set_url(fileName);

    //Add the file to the library  
    var uploadedDocument = oList.get_rootFolder().get_files().add(createInfo)
    var oListItem = uploadedDocument.get_listItemAllFields();
    oListItem.set_item('InternalName', "Some Data");
    oListItem.update();
    //Load client context and execcute the batch  
    clientContext.load(uploadedDocument);
    clientContext.executeQueryAsync(function QuerySuccess() {
        alert("File Uploaded Successfully.");
    }, function QueryFailure(s, a) {
        alert("File Upload failed with error - " + a.get_message());
    })
}

Answer 2

Will looking at the CSOM code help?

List list = web.Lists.GetByTitle("listtitle");
ListItem item = list.GetItemById(1);
var attachment = new AttachmentCreationInformation();
attachment.FileName = "fileName";
attachment.ContentStream = new MemoryStream(System.IO.File.ReadAllBytes("streamFile"));
Attachment att = item.AttachmentFiles.Add(attachment);                                        
context.Load(att);                                     
context.ExecuteQuery(); 

copied from here: How to attach files to list item using Client Object Model?