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

4
  • 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.. Commented Mar 15, 2021 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 Commented Mar 15, 2021 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. Commented Mar 15, 2021 at 23:05
  • @TomaszKisiel When I upload a file I get a new tab opened saying "Cannot POST /". Would you know why this happens? Commented Mar 15, 2021 at 23:52

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.