filestack-js
filestack-js copied to clipboard
Feature Request: Support preview CSS as data url
Expected Behavior
Preview API supports using a data url as css.
Current Behavior
Currently, receiving an error:
validation error: invalid value format "data%253Atext%252Fcss%253Bbase64%252CYm9keSB7IGJhY2tncm91bmQ6IGJsdWUgfQ%253D%253D" for parameter css required by preview task (invalid format data%253Atext%252Fcss%253Bbase64%252CYm9keSB7IGJhY2tncm91bmQ6IGJsdWUgfQ%253D%253D)
Possible Solution
Filestack must be expecting a literal url. Preferably, Filestack would check if the url provided is a data url, and if so, handle accordingly.
For example, a data url can be used in a like so:
<link rel="stylesheet" type="text/css" href="data:text/css;base64,Ym9keSB7IGJhY2tncm91bmQ6IGJsdWUgfQ==" />
Here's a demo: https://codesandbox.io/s/dazzling-pine-cdksy?file=/src/index.js
Context
Some benefits of supporting css as data url:
- Removes the requirement of hosting a static css file.
- Speeds up development as the css url is cached by Filestack which means that if you want to check changes to the css file, you must either wait some period for the cache to be refreshed or provide a different css url. Using a data url would circumvent this.
- Allows for dynamically supplying css based on conditions (someone might want that?)
Caveat
All that to say, filestack-js is merely creating an iframe and supplying the preview url as the src, so it is not at all responsible for how the css url is handled. Is there repository or other suitable place to submit this request?
For instance, hitting the preview url directly produces the same error: https://cdn.filestackcontent.com/preview=css:%22data%3Atext%2Fcss%3Bbase64%2CYm9keSB7IGJhY2tncm91bmQ6IGJsdWUgfQ%3D%3D%22/SGe380ViQ7W8efiX6sdG
Your Environment
- Version used: 3.24.1
- Browser Name and version: Chrome 92.0.4515.159
- Operating System and version (desktop or mobile): OSX 11.5.2
- Link to your project: https://codesandbox.io/s/dazzling-pine-cdksy