filestack-js icon indicating copy to clipboard operation
filestack-js copied to clipboard

Feature Request: Support preview CSS as data url

Open jvnlwn opened this issue 3 years ago • 0 comments

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

jvnlwn avatar Sep 07 '21 13:09 jvnlwn