Skip to main content
More in Learn

File Component

The file component is ideal for uploading files that aren’t images or video. The files thus uploaded will only be stored and won’t be transformed or transcoded in any way.

Whenever you upload files to Crystallize, they’re added to a content delivery network (CDN) for speed and ease of access. Most of the time, some sort of processing is performed on these files: videos are encoded for streaming, while images are transcoded and resized.

There may be times when you simply want to upload files to the CDN without any changes being made to them. You may also want to require that certain files must be uploaded, and that they’re of a specific format. For instance, you may want every product in your store to have a user manual PDF available for customers to browse.

Once you add a file component to a product, folder, or document shape, you can configure:

  • Max file size. Use the arrow keys or type into the box to specify a maximum size per file in MB. 50 MB is both the default and maximum file size limit. (If you require a higher file size limit, please contact us).
  • Min/Max number of files. Click beneath the Min/Max label to access a drop-down where you can edit the lower and upper range. By default, no files are required (Min = 0) and the component will allow you to upload as many files as you want (Max = ∞).
  • File MIME types. By default, any file format will be permitted. To restrict files to certain MIME type(s), click the plus sign button (+) to add a file type box, then click on the words File type to reveal a list of file formats and a box that you can type into. You can choose from the formats listed or specify a custom format by scrolling all the way down to the Create your own+ option. Remove MIME types by clicking the X in the top-right corner of each File type box.

When creating or editing a product, document, or folder that contains a file component as part of its shape, you’ll find an interface like this:

In the case where a minimum number of files must be uploaded, you’ll be warned of the requirement that must be fulfilled. All changes will still be saved, but you won’t be able to publish them until the requirement is met.

To add files, either drag and drop them into the window or click Browse local files to browse your local machine/network. Any files that don’t match the MIME type(s) you configured earlier will be grayed out and can’t be selected. And if you try to click and drag a file type that’s not allowed?

Ouch! Let’s not do that again. (A similar thing will happen with files that exceed your file size limit.)

Once you successfully upload a file, you’ll see its name and attributes listed. Clicking on the (...) button to the far right provides options for downloading and deleting the file.

What happens if the number of files uploaded exceeds your maximum limit? As it turns out, you can keep uploading files past the limit, but you’ll be unable to publish until enough files are deleted to return to within the limit. This is for cases in which someone else might have to come along and make a decision as to which of the files should be kept.

Once published, file data can be queried and retrieved via the Catalogue API. Consult the API documentation within the GraphQL playground at{your-tenant-name}/catalogue to see the available attributes.

You can also try out our code sample for retrieving file component data. And if that’s not enough for you, we have a wonderful demonstration of this component that you can watch below:

People showing thumbs up

Need further assistance?

Ask the Crystallize team or other enthusiasts in our slack community.

Join our slack community