Magento 2 File uploader uicomponent in frontend

A little blog on how to use the file-uploader.js uicomponent.

Case: Let’s say you want customers to be able to upload a csv with products and qty to order.

Step 1: Your phtml

In your .phtml you can use the following code snippet to initiate a ajax file uploader.

Tip: The uploader comes with a nice #dropzone which you can style.

Checkpoint 1:  When u drag in or upload a csv file, and you monitor you ajax calls in your browser extension, you will see a files post to the configured controller.

Step 2: Your controller

Checkpoint 2: The response of the ajax of the upload should be valid now.