Feature: support file uploads

[daun]

Describe the problem

We should go ahead and implement file uploads — it's simple enough with fetch now.

Describe the proposed solution

Append attached files to the request body:

const input = document.querySelector('input[type="file"]')
const data = new FormData()
for (const file of input.files) {
  data.append(input.name, file)
}

fetch('/', { method: 'POST', body: data })

Alternatives considered

Keep recommending to use the API directly for file uploads.

How important is this feature to you?

• Nice to have
• Would make my life a lot easier
• I cannot use swup without it

[daun]

Looks like this is already supported :) Creating a FormData obj from a form element apparently includes file inputs.

[hirasso]

I remember a bug in Safari where empty file inputs in AJAX-submitted forms would cause the request to fail. Back then I used this hack to fix the issue.

We should test sometime if this problem was solved in recent versions of Safari.

Should I create an issue for this?

[daun]

Let‘s maybe just reopen this issue to keep track of it? And test in Safari. Could this have to do with XMLHttpRequest instrad of fetch? In any case, let‘s make sure!

[hirasso]

It could, yes! Need a project to test it 😅

[daun]

I think we're safe — looks like the issue was solved in a Safari release in 2018, i.e. it only affects Safari 11 which we currently don't support.