Can I upload varying numbers of audio files, ranging from 2 to 10, to a CMS Collection on Webflow?
TL;DR
- Use multiple file fields in the CMS, each storing one audio file, leaving some blank if needed.
- Use a Multi-Reference field to link separate CMS items for flexible file numbers.
- Host audio externally (Google Drive, Dropbox, AWS) and store public URLs in the CMS.
- Use custom JavaScript to dynamically generate audio players based on stored files.
Yes, you can upload varying numbers of audio files (from 2 to 10) to a Webflow CMS Collection, but Webflow doesn't have a built-in multi-file field. You'll need to use a workaround to achieve this.
1. Use Multiple CMS Fields
- Webflow allows file upload fields in the CMS, but each field holds only one file.
- Add 10 separate file fields (e.g., Audio File 1, Audio File 2, ..., Audio File 10) to your CMS Collection.
- Upload audio files into these fields as needed. Items with fewer files can leave some fields blank.
2. Use a Multi-Reference Field
- If your audio files are stored in another CMS Collection (e.g., an “Audio Files” collection), use a Multi-Reference field.
- Each audio file would be an individual CMS item, allowing flexible numbers per entry.
- The Collection List displaying the referenced items can be filtered dynamically to show varying counts.
3. Host Audio Files Externally
- Since Webflow’s CMS doesn’t support bulk audio uploads in a single field, you could host the audio files on an external service (Google Drive, Dropbox, AWS, or SoundCloud).
- Store the public URLs in a CMS Rich Text, Plain Text, or Link field and embed a custom audio player.
4. Custom Code for Dynamic Embeds
- Webflow’s native Audio Embed is limited, so for flexible uploads, consider using custom JavaScript to generate audio players dynamically based on the number of files stored.
Summary
Webflow does not natively support a dynamic number of audio file uploads in a single field. The best methods are: (1) using multiple file fields, (2) a Multi-Reference field, (3) hosting externally, or (4) custom code. The right choice depends on your project's structure and workflow needs.