CMS: Adding and Setting Up an Upload Button
8 min read
Create an upload button to allow site visitors to submit files directly to your CMS (Content Management System) collections.
When you connect the button to your collection, you choose the type of collection field that will store the uploaded files. You can choose from image, document, video, audio, media gallery, or multi-document field types.
The field type you connect also determines the type of file the upload button accepts. The uploaded files are stored as new items in your collection and in the 'Visitor Uploads' section of your media manager.
Before you begin:
Make sure to add the CMS to your editor if you haven't already.
Step 1 | Add the upload button element
Go to the relevant page in your editor and add the upload button.
Wix Editor
Studio Editor
- Go to your editor.
- Go to the page in which you want to add an upload button.
- Click Add Elements
on the left side of the editor. - Click Input.
- Click Upload Buttons under Advanced.
- Click and drag the upload button you want to use onto the page.
Step 2 | Connect to the CMS through a dataset
Connect your upload button to a dataset that connects to a CMS collection field where you will store the submissions.
Wix Editor
Studio Editor
- In your editor, click the upload button you just added.
- Click the Connect to CMS icon
. - Click the Choose a dataset drop-down and select an existing dataset that connects to the collection you will store submissions in. Alternatively, click Add a Dataset, then choose the collection you want to store submissions in.
- Add a field to your collection where you will store the upload button submissions:
Tip: Alternatively, you can connect to an existing collection field.- Click the File connects to drop-down and select Add new field.
- Enter a Field Name for the new collection field.
- Select the Field Type you want to add to your collection from the drop-down. The field type determines the kind of files you can store in the field.
- Click Add.
Step 3 | Set the dataset mode and collection permissions
Datasets control the connection between your upload button and your CMS collection. Make sure to set the dataset mode to Write so the upload button can add the files to your collection.
If needed, set the permissions for the collection. You choose from preset permissions such as Form Submissions that allow visitors to add content. Customize the permissions further to control who can add, edit, view, and delete the collection items.
Wix Editor
Studio Editor
- In the panel on the right, click Dataset Settings.
- Click the Dataset mode drop-down and select Write.
- (If necessary) Click the permissions type under Collection Permissions and select Form submissions in the 1st drop-down. You can click the additional drop-downs to refine the permissions. Click Save once you're done setting the permissions.
Step 4 | Customize the upload button
Edit the settings to control how many items can be uploaded at a time, set the field title and more. In the layout and design settings you can customize the button's appearance to match your site.
Wix Editor
Studio Editor
- In your editor, click the upload button.
- Click Settings and edit the following:
- Upload settings: Choose the maximum number of files visitors will be able to upload at the same time and set the field as required, if needed.
Note: Ignore the Supported file type drop-down, which does not apply to upload buttons that are connected to the CMS. - Display options: Customize the following options:
- Field title: (Recommended) Enter a title that displays above the button text.
- Button text: Edit the text that appears on the button itself.
- Text below button: Choose what you want to display below the button:
- Show file info only: Display the name of the file your visitor uploads.
- Show custom text: Enter custom text that you want to display below the button such as file requirements. This text changes to the name of the file once it has been uploaded.
- Upload settings: Choose the maximum number of files visitors will be able to upload at the same time and set the field as required, if needed.
- Click the Layout icon
to adjust the spacing, direction, alignment and icon position. Click Advanced to set the alignment and direction of specific text. - Click the Design icon
and choose a preset button. Click Customize Design to further customize the button's design.
Step 5 | Create a submit button
You need to create a way for visitors to submit the files they upload with the button. Add a regular button or image and connect it to the same dataset that connects to your submissions collection. Then set the click action for the button or image to Submit. This allows the uploaded files to 'write', or create a new item in the submissions collection upon clicking the submit button.
If you connect other input elements to the same dataset, the submit button also sends their inputs to the collection.
Learn how to create a submit button for your upload button.
Did this help?
|