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

Question

I'm designing an app that receives an XML file from an 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 an XML on it and return 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 don't 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, Oct 25 '21 at 22:09
Also, I see `var file1 = document.getElementById("file")` and in your HTML, I see ``, so this would not match up, `file != files` — Twisty, Oct 25 '21 at 22:11
Please see: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#uploading_a_file — Twisty, Oct 25 '21 at 22:56

score -1 · Answer 1 · answered Oct 25 '21 at 23:06

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

i have been trying the solution, the fetch API looks that its working fine, but i think my error comes from Python, am using the next lines with the for loop show before: entry = request.form['formData'] xmlentry = ET.fromstring(entry) But i got an error from the fetch try catch and this errors in console 'Error: TypeError: NetworkError when attempting to fetch resource' 'Uncaught (in promise) TypeError: response is undefined' — Luis MC, Oct 26 '21 at 01:31

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

1 Answers1