Vue parse and then upload an xml file.

I'm struggling with this.

I want to parse a xml file (Jasper Report Template), so that I can store some parameters which are in it.

I was looking at this : https://codepen.io/Atinux/pen/qOvawK

Do I need to do reader.readAsDataURL(file); surely this should be simple?

I also want to upload the file with Axios.

HTML

<input type="file" name="fileToUpload" id="fileToUpload" @change="fileUploaded" v-model="fileToUpload">

fileUploaded: function (event) {

        self = this;
            
        var file = e.target.files[0];
        var file = document.getElementById("fileToUpload").files[0];
        //You could insert a check here to ensure proper file type


        var reader = new FileReader();
        reader.readAsText(file);
        reader.onloadend = function(){

            var parser = new DOMParser();
            var doc = parser.parseFromString( reader.result, "application/xml");
            var params = doc.querySelectorAll('parameter');

             for (var i = 0; i < params.length; i++) {
                self.jasperParams.push(params[i].getAttribute('name'));
             }

        }

        },

axios.post('/' + self.table,{

                name: self.name,
                sql:self.SQL,
                area_id:self.area_id,
                report_type_id:self.report_type_id,
                fileToUpload:self.fileToUpload