How i can send a XML from HTML in string to Python (using Flask) using Fetch API in Javascript

Question

im designing an app that receives a XML file from a HTML page and send it to Python using Flask This is my HTML (frontend) code

<input type="file" id="files"  class="form-control" accept=".xml" required />
<button onclick="send()" style="width: 150px;" class="btn btn-primary">Send</button>

And i am using Flask with Python to run my backend, i am using POSTMAN (i show it below) and i send a XML on it and return my what is supposed to return This is my Python code

@app.route('/Students', methods=['POST'])
def loaddata():
    # this is a list 
    global dataArray

    entry= request.data.decode('utf-8')

    xmlentry= ET.fromstring(entry)

    for student in xmlentry.findall('STUDENT'):
        name= dte.find('NAME').text
        address = dte.find('ADDRESS').text
        new = DataObject(name,adress)

        # DataObject its a class, i am using OOP
        dataArray.append(new)


return jsonify({'Mensaje':'Students added to the database',})

but i dont know how to send the XML data from the HTML file and make it work with my Python Backend, i have used Fetch before but no for this particular case This is my JavaScript code where i have confusion

var file1 = document.getElementById("file");

function send() {

fetch('localhost:3000/Students', {
            method: 'POST',
            body: file1,
            headers:{
              'Content-Type': 'text/plain',
              'Access-Control-Allow-Origin': '*',}})
        .then(res => res.json())
        .catch(err => {
                console.error('Error:', err)
                alert("Ocurrio un error, ver la consola")
        })
        .then(response =>{
          console.log(response);
          alert(response.Mensaje)
        })
    }

What i can do? This is my program tested with POSTMAN

Welcome to Stack Overflow. Do you already have the XML inside file1? Or do you relay on the User to enter a File into a Input element? — Twisty
Also, I see var file1 = document.getElementById("file") and in your HTML, I see <input type="file" id="files" class="form-control" accept=".xml" required />, so this would not match up, file != files — Twisty
Please see: developer.mozilla.org/en-US/docs/Web/API/Fetch_API/… — Twisty

Twisty Twisty · Accepted Answer · 2021-10-25T23:06:27

Consider the following HTML / JavaScript.

function send(file) {
  var formData = new FormData();
  formData.append('xmlFile', file);
  fetch('localhost:3000/Students', {
      method: 'POST',
      body: formData,
      headers: {
        'Content-Type': 'text/plain',
        'Access-Control-Allow-Origin': '*',
      }
    })
    .then(res => res.json())
    .catch(err => {
      console.error('Error:', err)
      alert("Ocurrio un error, ver la consola")
    })
    .then(response => {
      console.log(response);
      alert(response.Mensaje)
    })
}

var fileInp = document.getElementById("files");
var sendBtn = document.getElementById("filesBtn");
sendBtn.addEventListener('click', (event) => {
  if (fileInp.files[0] !== undefined) {
    send(fileInp.files[0]);
  } else {
    alert("Please select a XML File.");
  }
});

<input type="file" id="files" class="form-control" accept=".xml" required />
<button id="filesBtn" style="width: 150px;" class="btn btn-primary">Send</button>

This is based on the following Example: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#uploading_a_file

When the User clicks Send, the file is sent to the function. New Form Data is created and POST to the server.

You may need to adjust your Python. See here: Get the data received in a Flask request

How i can send a XML from HTML in string to Python (using Flask) using Fetch API in Javascript

1 Answers