Credentials, Headers, and Additional Data
During file upload or removal, you can control whether or not to send cookies and headers for cross-site requests, attach custom headers, or send additional data.
Attaching Credentials to Requests
You can control whether or not the request will use credentials by setting the withCredentials option. By default, withCredentials is set to true.
Attaching Additional Data to Requests
You can also send additional data in the form of key/value pairs.
Depending on when the data will be sent:
- In the
uploadevent handler, set the data property of the UploadEvent argument, or - In the
removeevent handler, set the RemoveEvent argument.
Configuring Request Headers
The Upload component sends files as FormData through Angular's HttpClient. As a result, the browser automatically sets the Content-Type header to multipart/form-data and appends the required boundary string. The Upload does not set a Content-Type header explicitly because this prevents the browser from generating the correct boundary and causes the server to reject the request.
Setting Static Headers
To attach custom headers to every upload request, use the saveHeaders input property. For remove requests, use the removeHeaders input property. Both properties accept an Angular HttpHeaders instance.
The following example demonstrates how to configure static headers through the saveHeaders property. The configured headers appear above the component.
Setting Dynamic Headers
To add or modify headers on a per-request basis, use the headers property of the UploadEvent or RemoveEvent argument in the corresponding event handler. Because HttpHeaders is immutable, call the append method and reassign the result.
The following example demonstrates how to set dynamic headers in the upload event handler. The headers change with each upload request, as shown in the panel above the component.