Problem sending post request from Angular frontend to Flask backend
See original GitHub issueI 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:
- Created 3 years ago
- Comments:6 (3 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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
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.