saasufy-components 10.5.1 → 10.5.3

package/README.md

@@ -211,26 +211,45 @@ After adding a record to Saasufy which holds a file in one of its fields, that f
 The format of the URL to link directly to a specific file/image is:
 
 ```
-https://saasufy.com/:serviceId/files/:modelName/:modelId/:fieldName
+https://:serviceId.saasufy.com/files/:modelName/:modelId/:fieldName
 ```
-For example, if the URL for your Saasufy service (which you get after deploying your service) is `wss://saasufy.com/sid7999/socketcluster/`
-and your file is stored inside an `Image` model with ID `58f2051c-14bc-4518-8816-ff387cfdd57e` inside a `data` field, you will be able to link to your image directly using this URL:
+Each service serves its files on a subdomain of its own, named after the service.
+The `:serviceId` is the `sid` part of the URL for your Saasufy service (which you get after deploying your service); if that URL is `wss://saasufy.com/sid7999/socketcluster/`, then your service ID is `sid7999`.
+
+So if your file is stored inside an `Image` model with ID `58f2051c-14bc-4518-8816-ff387cfdd57e` inside a `data` field, you will be able to link to your image directly using this URL:
 
 ```
-https://saasufy.com/sid7999/files/Image/58f2051c-14bc-4518-8816-ff387cfdd57e/data
+https://sid7999.saasufy.com/files/Image/58f2051c-14bc-4518-8816-ff387cfdd57e/data
 ```
 
 You can use it to embed images into your application using the `<img>` tag like this:
 
 ```html
-<img src="https://saasufy.com/sid7999/files/Image/58f2051c-14bc-4518-8816-ff387cfdd57e/data" alt="My image" />
+<img src="https://sid7999.saasufy.com/files/Image/58f2051c-14bc-4518-8816-ff387cfdd57e/data" alt="My image" />
 ```
 
 Saasufy enforces access controls for HTTP in the same way as it does for its WebSocket protocol.
 It's possible to block or restrict access to specific files stored on specific fields via the `Access` page under the relevant model.
 
 If your model field's access is set to `restrict`, only authenticated users with matching permissions will be able to view/download the image/file.
-In this case, you will need to add your user's JWT token to a cookie with the name `socketcluster.saasufyService.authToken` and it will be passed along with the request.
+In this case the request has to carry the user's signed JWT in an `Authorization: Bearer <signedAuthToken>` header; the token is the `signedAuthToken` of your `socket-provider`'s socket.
+
+Headers cannot be attached to an `<img src="...">`, so fetch the file yourself and hand the element an object URL:
+
+```js
+let socket = document.querySelector('socket-provider').saasufySocket;
+
+let response = await fetch('https://sid7999.saasufy.com/files/Image/58f2051c-14bc-4518-8816-ff387cfdd57e/data', {
+  headers: { Authorization: `Bearer ${socket.signedAuthToken}` }
+});
+
+let img = document.querySelector('img');
+img.src = URL.createObjectURL(await response.blob());
+```
+
+Remember to `URL.revokeObjectURL(img.src)` once you are done with it.
+
+Because files are served on a subdomain of their own, that fetch is a cross-origin request and the browser preflights it. Your app's origin therefore has to appear in the **Files allow origin** setting on the Saasufy settings page, which defaults to `*`. Files which are not restricted need none of this - an `<img>` tag is not subject to CORS.
 
 ## Components
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "10.5.1",
+  "version": "10.5.3",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {