ENH leverage FormData to support file upload

[lekoala]

Description

Currently, ajax forms are submitted using serializeArray. This doesn't allow sending more advanced content, like a file upload

Manual testing steps

• Add a FileField in the cms
• Check that $_FILES is empty on save

With this change, files are submitted properly. It also offers the opportunity to do more advanced things (eg: sending binary canvas data as a blob) and, all things considered, should probably work better because it uses a native js feature instead of jquery serializeArray

Issues

#1852

Pull request checklist

• The target branch is correct
  • See picking the right version
• All commits are relevant to the purpose of the PR (e.g. no debug statements, unrelated refactoring, or arbitrary linting)
  • Small amounts of additional linting are usually okay, but if it makes it hard to concentrate on the relevant changes, ask for the unrelated changes to be reverted, and submitted as a separate PR.
• The commit messages follow our commit message guidelines
• The PR follows our contribution guidelines
• Code changes follow our coding conventions
• This change is covered with tests (or tests aren't necessary for this change)
• Any relevant User Help/Developer documentation is updated; for impactful changes, information is added to the changelog for the intended release
• CI is green

[GuySartorelli]

The JS CI is failing as you haven't built the dist files. Can you please build that and include it in the PR?
Instructions are at https://docs.silverstripe.org/en/5/contributing/build_tooling/

[lekoala]

from what i see in the tests, it's not my changes that creates error but i've compiled the files

on windows, it requires this to work
module.exports.rules['linebreak-style'] = ['error', 'windows'];

otherwise you get Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style

could be nice to add that as a default for https://github.com/silverstripe/eslint-config/blob/1/.eslintrc.js to make it windows friendly

[GuySartorelli]

could be nice to add that as a default for https://github.com/silverstripe/eslint-config/blob/1/.eslintrc.js to make it windows friendly

I've created silverstripe/eslint-config#28 to track that. That's a very good idea.

Sorry this has taken so long for me to look at. There was a merge conflict so I've rebased and re-compiled the assets. I'll try to review this properly shortly.

[GuySartorelli]

This doesn't quiiite seem to work the way I'd expect. It does upload the file, but:

1. If the file is for a relation (only tried with has_one so far), the file doesn't get stored against that relation.
2. If the file is an image, a thumbnail isn't included. Going to the asset admin section, there is no thumbnail for the image.

2 is probably out of scope for this, so I'd be okay with that being handled separately. But 1 definitely seems like it is part of the general problem this PR is intended to resolve.

The code I used is:

<?php

namespace {

    use SilverStripe\Assets\File;
    use SilverStripe\CMS\Model\SiteTree;
    use SilverStripe\Forms\FileField;

    class Page extends SiteTree
    {
        private static $db = [];

        private static $has_one = [
            'MyFile' => File::class,
        ];

        public function getCMSFields()
        {
            $fields = parent::getCMSFields();
            // I also tried with the field being named `MyFile` without the "ID" suffix
            $fields->addFieldToTab('Root.Main', FileField::create('MyFileID'));
            return $fields;
        }
    }
}

[lekoala]

hi @GuySartorelli it does not seem related to my PR itself

first, FileField don't need the ID suffix
https://github.com/silverstripe/silverstripe-framework/blob/b662f03b75a7f1e14075f3068a5c787197724501/src/Forms/FileField.php#L142-L143

from what i can see, the upload part itself works fine

if you set the relation as an image, thumbnail generation should work as far as i can tell (but it needs to be published in order to work, so maybe it's an ownership issue)

relation seem to work

so all good as far as it goes for this module i would say