Uploading an XML file

JavaScript
1

Hello,

I can create a button and click on it. I want the normal Explorer window to appear and you can choose only XML files, select it and it is uploaded and then used in the program instead as the ones already given in the program.

Angular JS is used, so the button will be an ng_click module. The XML file should also be checked that it is a real XML file.

So far there are three constants.

const form1 =
`<?xml version="1.0" encoding="UTF-8"?>
<XML file starts

form2, form3

In another file these three forms are imported:

import form1 from ‘./forms/form1.js’

const forms = {
form1,
form2,
form3
}

export default forms
export const metaXml …

In the final program this complete form is imported and put into a scope.case as part of an object.

So the uploaded file should replace the imported form.

I guess there has to be a check if a file has been uploaded and then use a different import procedure.

Thanks a lot.

2

What have you tried so far, and what were the problems with that?

3

Hello

I tried to use the same method used for all buttons:

<button ng-click="uploadXML()">Upload XML</button>

Also this:

<input type="file" id="fileInput" accept=".xml">
<div id="fileContents"></div>

This actually works but would be nicer if the button said “Choose XML file” instead of just “Choose file”.

Once it is selected, something should happen with it, can this be done automatically or is it better to click on another button? I can use the ng-click for that. But that should only work if a file has been uploaded before. So there needs to be a check for that.

$scope.useXML = () => {

}

The uploaded file should then be put into a variable instead of the ones already pre used in the program.

4

Something like, if file has been opened successfully then valid = true.

If true then forms = file else forms = forms.

6

This puts “Choose …” before the button but doesn’t change the text on the button.

Codepen

8

I deleted my original post as you confirm that it doesn’t solve the problem. When I read about it in more detail, it turns out that changing the button text isn’t something you can easily do. Sorry for the confusion.

9 
<div>
<button>Choose XML file</button>
<input type="file" id="fileInput" accept=".xml">
</div>

div {
  position: relative;
}
button {
  position: absolute;
  top:0;
  left:0;
  width: 120px
}
input {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  opacity: 0;
}

JS:
Interact with the button as you would normally. Change its text, color, whatever.

Longstory short: Stack the elements on top of one another, hide the default control, and clicks still register on it.

10

Like this:
XML

What you posted is CSS.

Thanks.

For the actual problem or task I think I need to ask my colleagues since I am not allowed to post the code here.

11

Yup. Because what you needed was to trigger the click on an element without seeing the element. You already know how to bind things to clicks, because you showed it to us in post 3.

Changing the button’s innerHTML would change the text of the button.

12

How do I check that the file is really a valid XML file? It could be any file just with an .xml extension and it can be uploaded.

I found a lot of XML related code examples here:

13

You’d need to shove its contents through a DOMParser, parse it as XML, and sniff for a parse error.
DOMParser: parseFromString() method - Web APIs | MDN shows an example of how you can detect a parseerror.