question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Problem sending post request from Angular frontend to Flask backend

See original GitHub issue

I am sending a file from front end to backend, i have also installed cors extension for the browser but got badly engaged with the error: I have tried a lot i performed debugging. I also added the cors in the flask, i added some code in the function of component.html to perform manual debugging. Previously i was receiving the error of cors disabled the response but it got resolved by adding cors in the browser:

App.py:

import csv
from flask import make_response, url_for
from flask import Flask, jsonify,render_template
from flask_cors import CORS, cross_origin
from werkzeug.utils import secure_filename
# from flask_restful import Resource, Api;
from flask import Flask, render_template, request, redirect
import matplotlib.pyplot as plt
from test import test
app = Flask(__name__)
#cors = CORS(app, resources={r"/api/http://localhost:4200": {"origins": "http://localhost:4200"}})# api = Api(app)
CORS(app, supports_credentials=True)
app.register_blueprint(test,url_prefix="/admin")

@app.route('/uploader', methods = ['POST','GET'])
#@cross_origin(["http://localhost:4200"])
@cross_origin(allow_headers=['http://localhost:4200'])
def upload_file():
    print(request.files)
    # check if the post request has the file part
    if 'file' not in request.files:
        print('no file in request')
        return"no file in request"
    file = request.files['file']
    if file.filename == '':
        print('no selected file')
        return"no selected file"
    if file and allowed_file(file.filename):
        print("hello")
        filename = secure_filename(file.filename)
        #file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
        return "Successful"
    print("end")
    return"Bye"
@app.route('/')
def index():
    return  ('This is the main page of Python and calling the index function')

weather =  {
    "data":[ {
        "day":"1/6/2019",
        "temperature":"23",
        "windspeed":"16",
        "event":"Sunny"
    },  {
        "day":"5/6/2019",
        "temperature":"17",
        "windspeed":"18",
        "event":"Rainy"
    },  {
        "day":"6/6/2019",
        "temperature":"19",
        "windspeed":"21",
        "event":"Rainy"
    },  {
        "day":"7/6/2019",
        "temperature":"28",
        "windspeed":"14",
        "event":"Sunny"
    }
    ]
}

@app.route("/weatherReport/", methods = ['GET'])

def WeatherReport():
    global weather
    return jsonify([weather])
if __name__ == '__main__':
    app.run(debug = True)

component.ts:

  @ViewChild('fileInput') fileInput;
  ngOnInit() {
    this.todaydate = this.myservice.showTodayDate();
  }
  handleFileInput(files: FileList) {
    console.log('Inside handleFileInput');
    this.receivedFile = files.item(0);
    const isFileupload = true;
    console.log(` Received File: ${this.receivedFile}`);

  }

  uploadFile() {
    console.log('Inside  uploadFile');
    const files: FileList = this.fileInput.nativeElement.files;
    console.log('Inside  uploadFile line 02');
    if (files.length === 0) {
      console.log('Inside  uploadFile 03');
      console.log('no file content here');
      console.log('Inside  uploadFile 04');
      return;
    };
    console.log('Inside  uploadFile 05');

    this.restservice.parseTable(files).subscribe((data: any) => {
      console.log('Inside  uploadFile 06');
      console.log('Data that i am sending: ' + data);
    },  

//at here the error block is executing; (error) => { console.log(‘Inside uploadFile 07’); console.log(‘No Data Found’ + error); }); } } service.ts:

  parseTable(files) {
    const formData: FormData = new FormData();
    formData.append('file', files[0], files[0].name);
    return this.http.post(this.backendAddress, formData);
  }

component.html:

          <input #fileInput name="file" type="file"  (change)="handleFileInput($event.target.files)" >
<button mat-raised-button class="standard-button" (click)="uploadFile()">Upload file</button>

Error

*POST http://localhost:5000/uploader 500 (INTERNAL SERVER ERROR)*

Request:

*Please help me out friends*

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
eric-wiesercommented, Apr 29, 2020

This is the bug tracker for numpy, not for general python help. Your code does not appear to use numpy at all. Perhaps your question would be more suited to StackOverflow.

Edit: It looks like @babaralishah already asked this on stackoverflow here: https://stackoverflow.com/questions/61479576/102441

0reactions
WarrenWeckessercommented, Apr 29, 2020

It means, as far as we can tell, this is not the right place to ask your question. @eric-wieser noted that you also asked your question on StackOverlow. That is probably a good place to get help with your problem.

Read more comments on GitHub >

github_iconTop Results From Across the Web

problem sending post request from angular frontend to flask ...
Update: I solved this problem by changing task = Task(task = request.form['task']) to form_data = request.get_json() task = Task( task =…
Read more >
How to make a POST request from Angular to Flask server
1 Answer 1 · Import HttpClientModule in your AppModule 's imports . · Inject HttpClient in your component (move that logic into a...
Read more >
Using Python, Flask, and Angular to Build Modern Web Apps
The first one issues POST requests to create new exams and the second one lists all exams persisted on the database. Flask application...
Read more >
Flask / Angular 8 / MySQL #3 ( Angular 8 FrontEnd ... - YouTube
Flask / Angular 8 / MySQL #3 ( Angular 8 FrontEnd and starting with Requests ). 8K views 3 years ago.
Read more >
Python backend with JavaScript frontend - TMS Developer Blog
For the Python backend, we will make use of the Flask library. ... 6.2 Sending the data and getting error response; 6.3 Receiving...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found