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 collections. Choose the types of files you want to accept including documents, images, videos, and audio. The uploaded files are then stored securely in your collection for you to manage. 
Before you begin:
We recommend getting familiar with custom forms, which are a great way to collect information from visitors. 
A screenshot of a custom form that includes an upload button and a submit button.

Step 1 | Add and connect your upload button

First, add a button you would like to use as your "upload" button. This is the button visitors will click to select the file they want to upload. 

You also need to connect the button to a dataset that connects to the collection in which you are storing the uploaded files. Make sure the collection you choose has the correct permissions. We recommend choosing Form submissions in the Permissions & Privacy settings to allow anyone to add content.
New datasets experience:
In Wix Studio, we've moved datasets to the Inspector panel on the right to make them easier for you to use. Learn more about the new datasets experience in Wix Studio

To add and connect your upload button:

  1. Go to the Add panel:
    • Wix Editor: Click Add Elements  on the left side of the Editor.
    • Editor X: Click Add Elements  at the top of Editor X.
  2. Click Input then click Upload Buttons.
  3. Select a button and drag it onto your site.
  4. Click the button on your page.
  5. Click the Connect to Data icon  (or in Editor X).
  6. Click Create Dataset.
  7. Click the Choose a collection drop-down and select the collection in which your visitors will upload files.
    Tip: Click the Choose a collection drop-down and select Create Collection to create a new collection in which your visitors will upload files. 
  8. (Optional) Enter a name for your dataset in the Dataset name field.
  9. Click Create.
  10. Click the File connects to drop-down and select the field you want to connect the upload button to.
    Tip: Click Add new field if you want to connect the upload button to a new field in your collection. Then enter a Field Name, select the Field Type, and click Add
A screenshot of an upload button showing the Connect Upload Button panel.

Step 2 | Set up and design your upload button

Next, choose the type of files you want visitors to upload, along with other options in the button settings. You can customize the layout and design of the button so it looks they way you want it to. 

To set up and design your upload button:

  1. Click the upload button on your page. 
  2. Click the Settings icon  and choose from the following options: 
    • Upload settings: Choose which file types you want visitors to be able to upload, set the maximum number of files they can upload and set the field as required (optional). 
    • 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. 
    • Manage visitor files: Click View Uploaded Files to go to your Visitor Uploads folder in your Media Manager. 
A screenshot of the upload button settings.
  1. Click the Layout icon  to change the text and icon position, text alignment, or spacing between the field and field title. 
  2. Click the Design icon  and choose a preset button. Click Customize Design to further customize the button's design.
A screenshot of an upload button showing the Button Design panel.

Step 3 | Add and set up a submit button

You need a "submit" button that visitors click to finish submitting their files. Add another button to make it your submit button. Then set it up and connect the submit button to the same dataset as your upload button. 

To add and set up the submit button:

  1. Go to the Add panel:
    • Wix Editor: Click Add Elements  on the left side of the Editor.
    • Editor X: Click Add Elements  at the top of Editor X.
  2. Click Button.
  3. Select a button and drag it onto the page.
  4. Click Change Text & Icon and type "Submit" in the What does it say? field.
    Tip: Make sure the What does the button show? drop-down is set to Text only or Text and icon unless you don't want to display text on the submit button.
A screenshot of the submit button settings.
  1. Click the Connect to Data icon  (or  in Editor X).
  2. Make sure the Connect a dataset drop-down is set to the dataset you connected in step 1. 
  3. Click the Click action connects to drop-down and select Submit.
  4. (Optional) Add a success message that appears when visitors finish uploading their documents:
    1. Click + Add success message
    2. Select the success message in your Editor and edit the message. 
    3. Click and drag the success message to the location where you want it to appear. 
  5. (Optional) Add a failure message that appears if the document fails to upload:
    1. Select the submit button and click the Connect to Data icon  (or  in Editor X).
    2. Click + Add failure message
    3. Select the failure message in your Editor and edit the message. 
    4. Click and drag the failure message to the location where you want it to appear. You can overlap it with the success message because they both will not show at the same time. 
  6. Click the When successful, navigate to drop-down, and select an option:
    • Stay on this page: The visitor stays on the page after submitting the form.
    • A link: The visitor is redirected to another page after submitting the form. Click Choose under Choose a link and set up the link. 

Want visitors to be able to download these files?
You can allow visitors to download files from your collection by adding an input element such as a button to your site. Connect the button, using the Connect to Data icon  (or in Editor X), to the field these files are stored in. Once completed, if someone clicks the connected button, the file will immediately download.

Did this help?

|