CODEWITHSUNDEEP
ajaxformsfile-uploadfetchsymfony-3.2
philipp
philipp

Reputation: 16505

Symfony3—ajax Upload multiple files using fetch and FormData

I have that Form (extending AbstractType):

public function buildForm(FormBuilderInterface $builder, array $options)
{
  $builder
    ->add('files', FileFieldType::class, [
      'label' => 'Files',
      'multiple' => true]
    );
}

This tiny form in the frontend (ReactJS):

 <form onChange={onChange} ref={node => form = node}>
   <input type="file" multiple={multiple} name="file[files]" />
 </form>

I the upload is triggered the following happens:

const data = new FormData(form); 

fetch('/upload', {
  method: 'POST',
  headers: {
    'Content-Type': 'multipart/form-data'
  },
  body: data
});

But on the server no files arrive, so in the controller:

$request->files->all(); //[]

and thus the form is never valid, too.

In a functional test I am using this:

$client->request('POST', '/upload', [], ['file' => ['files' => $file]]);

where $file refers to an Object of type UploadedFile. That works, so what is the error here?

Upvotes: 1

Views: 666

Answers (1)

philipp
philipp

Reputation: 16505

As I could find in this answer:

The basic idea is that each part (split by string in boundary with --) has it's own headers (Content-Type in the second part, for example.) The FormData object manages all this for you, so it's a better way to accomplish our goals.

So to make the upload work, I needed to drop the content-type from the headers and rename the input field to: file[files][].

Upvotes: 1

Related Questions