This issue is related to a SPX no framework webpart with RestAPI on Sharepoint 2019. The webpart contains a text field and a file upload field. The aim is to fill in the text field, select a file to upload and click Submit button. The text field column value is unique and need to map to the uploaded file, so an Attachment to the List item was considered easier but the process is failing. Please help with the method shown below:

    <input type="text" id="idTitle" name="Title" placeholder="Serial Number."><br />  
    <input id="upload" type="file"/><br />  
<button class="create-Button ${styles.button}" ><span class="${styles.label}">Submit Order</span></button>

 

 SaveItem(): void { 
var newfileName = document.getElementById('upload').files[0].name;

  const body: string = JSON.stringify({ 
  'Title': document.getElementById('idTitle')["value"],  
      });  
  this.context.spHttpClient.post(`${this.context.pageContext.web.absoluteUrl}/_api/web/lists/getbytitle('${this.Listname}')/items`, 
      SPHttpClient.configurations.v1, 
      { 
  headers: { 
  'Accept': 'application/json;odata=nometadata', 
  'Content-type': 'application/json;odata=nometadata', 
  'odata-version': ''
        },
 this.context.spHttpClient.post(`${this.context.pageContext.web.absoluteUrl}/_api/web/lists/getbytitle('${this.Listname}')/items({item_id})/AttachmentFiles/ add(FileName='{newfileName}')`, 
      SPHttpClient.configurations.v1, 
      { 
  headers: { 
  Authorization: "Bearer " + accessToken
Content-Length: {length of request body as integer}
X-RequestDigest: "{form_digest_value}"
        },      
        
  body: body 
      }) 
      .then((response: SPHttpClientResponse): Promise<IListItem>=> { 
  return response.json(); 
      }) 
      

This issue is related to a No Javascript Framework SPFx webpart with RestAPI on Sharepoint 2019. The webpart contains a 'text' and 'file upload' fields. The aim is to fill in the text field, select a file to upload and click "Submit" button. The text field column value is unique and need to map to the uploaded file, so an Attachment to the List item was considered easier but the process is failing. 

Please help with the method shown below:

<input type="text" id="idTitle" name="Title" placeholder="Serial Number."><br />  
<input id="upload" type="file"/><br />  
<button class="create-Button ${styles.button}" ><span class="${styles.label}">Submit Order</span></button>

SaveItem(): void { 
var newfileName = document.getElementById('upload').files[0].name;

const body: string = JSON.stringify({ 
        'Title': document.getElementById('idTitle')["value"],  
      });  
  this.context.spHttpClient.post(`${this.context.pageContext.web.absoluteUrl}/_api/web/lists/getbytitle('${this.Listname}')/items`, 
      SPHttpClient.configurations.v1, 
      { 
  headers: { 
  'Accept': 'application/json;odata=nometadata', 
  'Content-type': 'application/json;odata=nometadata', 
  'odata-version': ''
        },
 this.context.spHttpClient.post(`${this.context.pageContext.web.absoluteUrl}/_api/web/lists/getbytitle('${this.Listname}')/items({item_id})/AttachmentFiles/ add(FileName='{newfileName}')`, 
      SPHttpClient.configurations.v1, 
      { 
  headers: { 
  Authorization: "Bearer " + accessToken
Content-Length: {length of request body as integer}
X-RequestDigest: "{form_digest_value}"
        },      
        
  body: body 
      }) 
      .then((response: SPHttpClientResponse): Promise<IListItem>=> { 
  return response.json(); 
      })