How to request several arguments from FormData?

Question

This is a follow-up question from here: there I learned how to upload a file, process it and then populate the website again with its content using AJAX and FormData. For example, if I have a file data.csv like this:

A,B,C
1,3,4
2,4,2

I can pass it using AJAX and FormData

<form method="POST" enctype="multipart/form-data" id="fileUploadForm">
    <div class="custom-file">
       <input id="myfile" name="myfile" type="file" class="custom-file-input">

       <label for="myfile" class="custom-file-label">
         Choose file...
       </label>
    </div>
</form>

// the javascript part
var form = $('#fileUploadForm')[0];
var formdata = new FormData(form);

$.ajax({
        type: "POST",
        enctype: 'multipart/form-data',
        url: "/_get_table",
        data: formdata,
        processData: false,
                contentType: false,
                cache: false,
                timeout: 600000,

and get:

I can then easily fetch this using

file = request.files['myfile']

and convert it into a dataframe using

df = pd.read_csv(file)

My question is now how I would do this, if I want to pass additional parameters (not only the file). Here it is suggested to use

var formdata = new FormData();
formdata.append("myform", form)
formdata.append("myvalue", 10)

which gives

and the headers

How do I now collect the info correctly? I can get myvalue like this

val = request.form['myvalue']

but I have not found a way to access and read myfile. If I e.g. try

file = request.files['myform']

I get

werkzeug.exceptions.HTTPException.wrap..newcls: 400 Bad Request: KeyError: 'myform'

I also tried other solutions from here but without success.

Please show us your whole request including headers. And btw it doesn't look correct as you shouldn't put `form` in to your `formdata` but only the `myfile`. Your payload should consist of `myfile` and `myvalue`. As you can see in your screenshot. `myform` is obviously not a file but a javascript object. That's meaningless. — Sraw, Oct 03 '18 at 19:12
@Sraw: Yes, but I don't know how to pass it correctly; I don't know how to only extract the file. I also tried `form.elements.myfile` but that does not help either. Give me a sec to make the screenshots... — Cleb, Oct 03 '18 at 19:15
@Sraw; I added the screenshot of the headers. Does that help? — Cleb, Oct 03 '18 at 19:19
Yes it does help. So your format is correct. The only problem is how to pass file correctly in javascript. In this case this is not a python problem. I guess you can directly `var formdata = new FormData(form); formdata.append("myvalue", 10)`. — Sraw, Oct 03 '18 at 19:27
@Sraw: That seems to work! Feel free to add it as an answer. I will then later open another question to really understand this behavior... — Cleb, Oct 03 '18 at 19:30
@Sraw: Could you still add your solution as an answer?! I will then upvote and accept. — Cleb, Oct 05 '18 at 11:23

score 1 · Accepted Answer · answered Oct 05 '18 at 16:14

The problem is because you didn't add your file to the FormData correctly.

As you are using multipart/form-data, your payload should be one file and some form-data. But in your screenshot, as you can see, you were adding one object.

To solve this problem, actually you can directly add your value to the original FormData:

var formdata = new FormData(form); 
formdata.append("myvalue", 10);

How to request several arguments from FormData?

1 Answers1