0

I am creating a webapp using React that takes a csv file as input from user. I want to then work with that csv file in python, then return it to the user so that they can download it.

This is what I have so far:

React (Frontend):

App.js:

function App() {
    return(
        <UploadFile />
    );
}

UploadFile.js:

function Upload(){
return(
    <form action="/action_page.php" method="POST" encType="multipart/form-data">
        <input type="file" id="dat" name="filename"/>
        <input type="submit"/>
    </form>
);
}

Python (Backend): working.py

from flask import Flask, render_template, request
from werkzeug import secure_filename

app = Flask(__name__)

@app.route('./upload')

def upload_file():
    return render_template('index.html')

@app.route('/uploader', methods = ['POST'])
def upload_file():
    f = request.files['file']
    f.save(secure_filename(f.filename))
    return 'File uploaded'

if __name__ == '__main__':
    app.run(debug = True)

I'm completely lost on how to continue. I've sort of followed ideas from Taking user input from HTML form as a variable for Python script and https://pythonbasics.org/flask-upload-file/ but I'm not sure how to continue.

Where is the file saved and what is it saved as? How do I start using it? And is the secure_filename function required?

Can anyone help me on the right track to start using the actual file?

Thanks

chung
  • 835
  • 1
  • 7
  • 19
  • Don't know flask but I think the file is saved in current python script location with name same as name of file which user send. secure_filename is probably required to prevent before injection something bad inside filename. After saving file you can open them using name ```secure_filename(f.filename)```. I am a little bit wondering why you have action with php script ```action="/action_page.php"``` when you use python.. – Kishieel Mar 15 '21 at 22:54
  • Oh that was just in the tutorial I saw to add a form with nothing to do with python. I have a couple of question on how this works, why are there two upload_file functions? and I don't have to call these functions at all then? I just run the app, upload a file, and the file should be saved in the directory automatically? @TomaszKisiel – chung Mar 15 '21 at 22:58
  • I think that first method is used when no other HTTP method is specified, in most cases it handle GET method and receive you HTML file. Second one look like method specified for handle POST method e.g. when you send form with method="POST" then second method is used, but when you run your page in browser the first one is called. – Kishieel Mar 15 '21 at 23:05
  • @TomaszKisiel When I upload a file I get a new tab opened saying "Cannot POST /". Would you know why this happens? – chung Mar 15 '21 at 23:52

0 Answers0