SharePoint 2013 Mobile View - Adding attachments to list items

Hello! 

Aim: To be able to add an attachment to a list item using SharePoint 2013 on a mobile device (with the mobile browser site feature enabled)

I'd created a custom form using SharePoint designer which worked perfectly in an internet browser however I noticed the mobile view completely ignored the custom form and redirected to its own form "/_layouts/15/newforma.aspx"

I opened the "Newforma.aspx" and edited it to add in a custom attachment function. Here is the code I used...

<tr><td rowspan="2" width="190px" valign="top" height="50px">
Add Attachments:  </td><td valign="bottom" height="15" id="attachmentsOnClient"><span dir="ltr"><input type="file" name="fileupload0" id="onetidIOFile"
size="56" title="Name"></input></span></td></tr><tr><td colspan="2"><input id="attachbutton" type="BUTTON" onclick='AttachFile()'
      value="Upload" class="ms-ButtonHeightWidth"/><span id="idSpace"></span></td></tr>

I then added the javascript function to run when 'AttachFile()' is called: 

<script type="text/javascript">
{
function AttachFile(){
ULSopi:;
fileID=FileuploadString+FileUploadIndex;
fileInput=GetAttachElement(fileID);
filename=TrimWhiteSpaces(fileInput.value);
if(!filename)
{var L_FileNameRequired_TXT="You must specify a non-blank value for File Name.";
alert(L_FileNameRequired_TXT);fileInput.focus()
}else{var L_FileUploadToolTip_text="Name";
oRow=document.getElementById("idAttachmentsTable").insertRow(-1);
RowID="attachRow"+FileUploadIndex;
oRow.id=RowID;
oCellFileName=oRow.insertCell(-1);
oCellFileName.className="ms-vb";
oCellFileName.innerHTML='<span dir="ltr">'+filename+"</span>&nbsp;&nbsp;&nbsp;&nbsp;";
oCellControl=oRow.insertCell(-1);oCellControl.className="ms-propertysheet";
oCellControl.innerHTML="<IMG SRC='"+document.getElementsByName("RectGifUrl").item(0).value+"'>&nbsp;<a href='javascript:RemoveLocal(\""+RowID+'","'+fileID+"\")'>"+L_Delete_Text+"</a>";
fileInput.style.display="none";++FileUploadIndex;
oAttachments=document.getElementById("attachmentsOnClient");
var a=document.createElement("input");
a.tabIndex="1";a.type="File";
a.className="ms-longfileinput";
a.title=L_FileUploadToolTip_text;
a.name=FileuploadString+FileUploadIndex;
a.id=FileuploadString+FileUploadIndex;
a.size="56";oAttachments.appendChild(a);
var b=fileInput.form;b.encoding="multipart/form-data";
document.getElementById("idAttachmentsRow").style.display="";
ShowPartCustom()}}

function ShowPartCustom(){
ULSopi:;
document.getElementById("partAttachment").style.display="none";
document.getElementById("part1").style.display="block";
var a=document.getElementById("s4-ribbonrow");
if(a!=null)a.style.display="none";
FixRibbonAndWorkspaceDimensions();
typeof frm!="undefined"&&frm.SetFirstFocus(true)}
}</script>

The button appeared on the form, however when I picked a file to upload and selected "upload" would receive the following error: 

What I then did was to give the file a physical name within the javascript (this wouldn't matter as each item is stored within the list item so they wouldn't be overwriting one another!) 

{
function AttachFile(){
ULSopi:;
fileID=FileuploadString+FileUploadIndex;
fileInput=GetAttachElement(fileID);
filename=TrimWhiteSpaces("image.jpg");
if(!filename){
filname = "image.jpg";
}

Now when I'm clicking the upload button, nothing is happening at all and I'm not sure why!! Any help with this would be much appreciated! If I'm taking the wrong approach please do let me know! 

Many thanks

Rob