Skip to main content

Angular + Symfony file upload with AWS S3

First, using the fantastic work of Jenny Louthan of Uncorked Studios, implement this directive:

Secondly, write the Angular function to handle the upload:

Third, write the action in Symfony to process the file upload, with the proper route:



Now, referencing my previous post on setting up Liip + Gaufrette + AwsS3 I’ll assume you’ve configured and set that up properly. Given that, you’d adjust your imageUploadAction as follows.

However, to start, you’ll need a FileManager service to properly manage the files to Aws S3 as configured.




Finally, the whole Action:


AwsS3 + LiipImagineBundle + KnpGaufretteBundle + Symfony2.7+

If I could spare anyone even a fraction of the time it took me to configure this properly I can only imagine the time saved, given the last two days of head pounding I’ve gone through to finally make this correctly work with the latest AWS SDK (v3.2.5).

So all that under the bridge, here’s a final config to have your images, and any (all) associated filters cached in your S3 buckets.



note: you could also just include this in app/config/config.yml


Fix JSON serialization root as object instead of array in Symfony

JMS Serializer is perhaps my favorite and most frequently used open source package, and I am infinitely thankful for Johannes Schmitt for his contribution.

However, with heavy usage of Annotations JMS can become frustrating at times. Especially when building API data that you’re expecting to be formatted as an array or object and standardizing the behavior.

With the use of @MaxDepth, you’ll find that your recursive entity serialization may end up serialized as an object of nested objects, instead of an array of objects as you expect.

Check this issue for a deeper discussion on variations of the same problem, and also the solution implemented here.



The fix for this is actually quite simple: