How to upload a "Image only from client side to SharePoint Custom List" using Rest Api ? not in Document Library and not in picture Library - rest

Question

I'm new to SharePoint & REST API. So kindly help me with Step by Step Instructions.
I have one custom list called "Attachment" within this custom list I have one Attachment column named as "Attach" which is created with the data type "Hyperlink or Picture".
Using Rest API I want to add the Image which is selected by the end user in client side (browser) to SharePoint Custom list named as "Attachment" under the column "Attach".
Help me with the working Code Samples.
Note: I'm trying this in visual studio 2017 as a SharePoint Hosted App.
This is my Default.aspx page code.
<div class="form-group">
<label>Attachments</label>
<input type="file" class="form-control" id="attch"/>
</div>
"I expect when the user selected any image using this control, I need to upload and store that image to custom List" not in document library , not in picture gallery. Only in Custom List.
Kindly Give me a Visual Studio Solution File (or) Give me a Clear Working code For Default.aspx and App.js with the Script.
Thanks in Advance!!!

Answer 1

The "Hyperlink or Picture" field only store the link of the image.
If you only want to store the image in custom list, we need store the images as attachments. I suggest you store the images into a document library or picture library, then use a "Hyperlink or Picture" to store the link of the images.
To upload image as attachment in list items using REST API, the following articles for your reference.
Working with files attached to list items by using REST
Uploading Attachments to SharePoint Lists Using REST

Answer 2

you need to create a document library instead and upload the image to it,
you can try this js to upload the image,
function _arrayBufferToBase64(buffer) {
var binary = ''
var bytes = new Uint8Array(buffer)
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i])
}
return binary;
}
function uploadfile(name, content) {
var createitem = new SP.RequestExecutor(appweburl);
createitem.executeAsync({
url: appweburl + "/_api/web/GetFolderByServerRelativeUrl('/sites/Tile of web/app title/Lists/list name/foldername')/Files/Add(url='" + name + "',overwrite=true)",
method: "POST",
binaryStringRequestBody: true,
body: content,
success: function (e) {
alert('done');
},
error: function () { alert("Error"); },
state: "Update"
});
}