0

I have a webpage (web-app) that allows users to upload files to the server. The server side is Python Quart(async Flask) with hypercorn server behind Nginx.

The problem, I am unable to upload multiple files. A single file uploads without any issue and everything works as expected.

I have read every stack-overflow posts related to this, and I have tried countless proposed solutions. This situation is different, when the form is submitted with a single file, the file object is included in the "files" portion of the request, but when multiple files are submitted the "files" portion of the request is empty and the file-objects are included in the "form" with the correct key, and it's value is a "bytes" object.

The HTML form is:

<form method="POST" 
      action="/upload"
      enctype="multipart/form-data">
  <div>
    <input value="xyz" name="number" type="hidden">
    <textarea name="message" placeholder="write message"></textarea>
  </div>
  <div>
    <input name="attach" multiple="" type="file">
    <input value="send" type="submit">
  </div>
</form>

The form is added to the page client-side with JS and the form is submitted asynchronously using a Fetch request. The request header is:

Accept:           */*
Accept-Encoding:  gzip, deflate, br
Accept-Language:  en-US;q=0.7,en;q=0.3
Connection:       keep-alive
Content-Length:   14563
Content-type:     multipart/form-data; boundary=…-5168
Cookie:           
DNT:              1
Host:             www.example.com
origin:           https://www.example.com
Referer:          https://www.example.com/mypage.html
User-Agent:       Mozilla/5.0 (X11; Ubuntu; Linu…) Gecko/20100101 Firefox/62.0

The request payload is:

-----------------------------5168578291153853291511672298
Content-Disposition: form-data; name="number"

ABC123
-----------------------------5168578291153853291511672298
Content-Disposition: form-data; name="message"

Some message
-----------------------------5168578291153853291511672298
Content-Disposition: form-data; name="attach"; filename="image-256.png"
Content-Type: image/png

On the server:

@app.route('/upload', methods=['POST'])
async def upload_post():
    form = await request.form
    form_data = {key: form.get(key) for key in form}
    print('form_data is:', form_data)

    uploads = await request.files
    if 'attach' in uploads:
        all_uploads = uploads.getall('attach')
        print('uploads is:', all_uploads)
    else:
        print('No attach in uploads is:')

When a single file is submitted the "attach" key is found in uploads and the "print" shows the correct multidict object. The 'attach' key is not in form_data. When two or more files are submitted the uploads has a length of 0 and the 'attach' key is then found in form_data with a bytes object as the value.

I am certain that the issue is caused by the "await request.files" but I have no idea why or how to solve the issue.

blindChicken
  • 352
  • 4
  • 13
  • What does the payload look like if there is more than one file? – snakecharmerb Feb 03 '19 at 10:50
  • It looks the same, but with an additional "Content-Disposition" section. This section has the same name="attach" and includes the data for the second attachment. Everything is as expected. – blindChicken Feb 03 '19 at 17:07
  • If you think its because of the async/await routine you could try removing the async and await calls and see if that then works as expected? At least you will know for sure then. – Jamie Lindsey Feb 04 '19 at 17:03
  • @JackHerer, I gave it a try but isn't that simple, as the "request" object in Quart is a coroutine that needs to be awaited. But interestingly, in my script before requesting the "files" I request the "form" and the form already includes the binary file object. Based on the sequence by which the request is sent, this suggests that the problem must be at the Nginx level. – blindChicken Feb 05 '19 at 16:00
  • I found the problem!!! The issue lies with the fetch request. The solution is shown here: https://stackoverflow.com/questions/47738642/does-fetch-support-multiple-file-upload-natively. Thus this is duplicate of that one. – blindChicken Feb 06 '19 at 02:30

0 Answers0