Angular Application for Attaching Files to SOAP Service

I am currently utilizing soap services to pass XML data along with file attachments. While SoapUI tool works perfectly for this purpose, I want to achieve the same functionality through Angular6 in my project. Below is a snippet of my Xml code.

<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:wsdl="http://service.wsvc.mhb.crimsonlogic.com/wsdl">
 <soapenv:Header><wsse:Security soapenv:mustUnderstand="1" xmlns:wsse="http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd" xmlns:wsu="http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-utility-1.0.xsd"><wsse:UsernameToken wsu:Id="UsernameToken-4C616D2C88CB4E2F9915586128832798"><wsse:Username>this.userName</wsse:Username>
    <wsse:Password Type="http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-username-token-profile-1.0#PasswordDigest"> token.getPasswordDigest()  </wsse:Password><wsse:Nonce EncodingType="http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-soap-message-security-1.0#Base64Binary"> token.getNonceBase64() </wsse:Nonce><wsu:Created> token.getCreated() </wsu:Created></wsse:UsernameToken></wsse:Security>
     </soapenv:Header>
      <soapenv:Body>
      <wsdl:SubmitMessageRequest>
      <wsdl:DocumentType> document </wsdl:DocumentType>
       <wsdl:Subject>this.fileName</wsdl:Subject>
       <wsdl:PayloadName>
        <wsdl:href>cid: this.fileName</wsdl:href>
        </wsdl:PayloadName>
       <wsdl:AttachmentFile>
        <wsdl:href>?</wsdl:href>
         </wsdl:AttachmentFile>
         </wsdl:SubmitMessageRequest>
        </wsdl:MessageSubmission>
      </soapenv:Body>
      </soapenv:Envelope>
javascriptangulartypescriptweb-servicessoap

Answer №1

Utilizing SOAP services with HTTP protocol is totally feasible. To interact with SOAP services, consider implementing the ngx-soap Angular module. Make sure to include the file you wish to upload as binary data within the SOAP request body.

Sample template file:

<input
  style="display: none"
  type="file" (change)="onFileChanged($event)"
  #fileInput>
<button (click)="fileInput.click()">Select File</button>
<button (click)="onUpload()">Upload!</button>

Sample component file:

export class MyFileUploadComponent {
  selectedFile: File
  client: Client;

  constructor(private soap: NgxSoapService) {
     this.soap.createClient('assets/fileuploader.wsdl').subscribe(client => this.client = client);
  }

  onFileChanged(event) {
    this.selectedFile = event.target.files[0]
  }

  onUpload() {
    // Add your upload logic here
    const body = {
          file: this.selectedFile
    };
    (<any>this.client).Add(body).subscribe((res: ISoapMethodResponse) => this.message = res.result.AddResult);
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on getting the bot to react to a single "event" mentioned in the sentence, without multiple occurrences

Things are a bit complicated, but here's an example to illustrate: I've set up this event: client.on('message', async message => { if (message.content.toLowerCase().includes("megumin")) { message.channel.send("W ...

javascriptjsondiscordbotsdiscord.js

Managing JSON data sent using PHP

After exploring numerous syntaxes from various sources on the internet, I am hesitant to reveal my struggles as it may be hard to distinguish fact from fiction. So... This snippet shows a part of my HTML code: var jsonData = { address: 'address& ...

phpjavascriptjsonjquery

Quick method to assign child iframe title as index.html <title>title</title>

Is there a simple method to dynamically update the <title> of my index.html based on the <title> of a child iframe? Take a look at my website for reference If the content within the iframe changes, will the title automatically update along wi ...

javascriptjqueryhtmliframetitle

What are the steps for configuring my Angular directive in this specific scenario?

Looking to create a directive that implements isolate scope. Here's the code snippet: angular.module('myApp').directive('itemCollection', ['$cookies', function($cookies) { return { restrict ...

javascriptangularjsangularjs-directive

What is the best way to showcase the chosen information?

Typically, I maintain a list of specific entries within cards. When clicking on one of the records in the card, the corresponding data table is supposed to be displayed below that record. An issue arises where after selecting a record and displaying its d ...

angular

The VSCode Extension fails to launch after being packaged

I'm currently working on a straightforward VSCode extension that scans the active open file for any comments containing "//TODO: " and then presents a list of all TODO comments in a webview sidebar tab. While I have a functional prototype that runs s ...

typescriptwebpackvisual-studio-codevscode-extensionsrollup

What could be causing my div element to remain stationary despite the movement functions I have implemented?

I am attempting to move my div element by using key presses to adjust the CSS attributes of the HTML elements. However, despite implementing the necessary code, the mover refuses to budge and nothing appears when I inspect the elements or their attributes. ...

javascript

Bring life to the process of adding and removing DOM elements through animation

I am seeking to provide an engaging and interactive experience for my users while ensuring responsiveness. To achieve this goal, I have decided to learn more about web development by creating a card game. My current setup involves clickable elements that ...

javascriptjqueryhtmlcssanimation

Hide a header and bring it back after a 2-second delay

I REPLIED BELOW Is there a way to make the header of my webpage fade out when scrolled and then be hidden using style.display? Here's what I have so far: <script type="text/javascript> function Scroll() { var head = document.getEl ...

javascripthtmlcss

Encountering issues with utilizing global variables in Ionic 3

Using Ionic 3, I created a class for global variables but encountered an error Uncaught (in promise): Error: No provider for Globals! Error: No provider for Globals! at injectionError (http://localhost:8100/build/vendor.js:1590:86) at noProviderError Th ...

angulartypescriptionic-frameworkionic3

What is the reason behind the TypeError thrown when attempting to assign to `NaN` or `undefined` in JavaScript

A.S.: The question pertains to the type of error rather than the phenomenon itself "use strict" results in a TypeError when system variables like NaN and undefined are modified. But why is it categorized as a TypeError instead of a SyntaxError? Edit: I ...

javascripttypeerror

What is the best way to activate a JQ function with my submit button?

Is there a way to trigger a JQ function when clicking the submit button in a form? I managed to make Dreamweaver initiate an entire JS file, but not a particular function. ...

javascriptjqueryhtmlforms

Ways to resolve the issues encountered during the installation of @popperjs/core

After adding ng-bootstrap to my Angular project using the command: npm i @ng-bootstrap/ng-bootstrap --legacy-peer-deps I then proceeded to install popperjs with this command: npm install @popperjs/core --save However, upon running the Angular server, I e ...

angularbootstrap-5popperjs

The instance is referencing "greet" during render, but it is not defined as a property or method

At the same time, I encountered another error stating "Invalid handler for event 'click'". <template> <div id="example-2"> <!-- `greet` is the name of a method defined below --> <button v-on:cli ...

javascripthtmlvue.js

Is it practical to extract the page type/name from the CSS of the selected tab?

My website has multiple tabs on a single page and I want to integrate Google Analytics code. However, since all the tabs are part of the same page, I need a way to track which tab the user is interacting with. Would using CSS to check for the selected tab ...

javascriptcsswebgoogle-analyticsportlet

Error arises when using ODBC PDO alongside Ajax functionality

I've encountered a problem while working on a project at my job. I'm using PDO queries and ajax to generate dynamic elements, but I can't seem to fix a specific issue. The problem is that regardless of the option selected in two dynamically ...

javascriptphpjqueryajaxpdo

What is the best method for deleting an uploaded image from a box?

My code is quite lengthy, so I'll just showcase the JavaScript portion here. Here is a snippet of my JavaScript code: <script type="text/javascript"> let current = 0; for(let i = 0; i < 5; i++) { $('#thumbnail-view- ...

javascriptphpjqueryhtmlcss

How do I show a personalized cookie banner based on the user's location in a NextJs application?

I have a NextJs 12 application with URLs domain.com and domain.com/es. We implemented the OneTrust cookie banner in _document.ts as shown below: <Head> <Script id="one-trust" strategy="befor ...

javascriptreactjsnext.jscookiesone-trust

What's Next? Redirecting Pages in Node.js Express after Handling POST Requests

Is it possible to redirect to a different page from a post request? module.exports = function(app) { app.post('/createStation', function(request, response){ response.redirect('/'); //I'm having trouble getting ...

javascriptnode.jsexpressnpmdao

Updating image URL for grouped objects with Fabric JS

Check out this link :http://jsfiddle.net/mishragaurav31/ang58fcL/#base I created two groups of objects; one consisting of a circle and text, and the other with two images. When I try to change attributes for group 1, it works fine. However, when attempt ...

javascripthtmlfabricjs