How to Enable Uploading UGC to Wix: PDFs, Images, Video, and More

5 Minutes to Integrate

Wix is a free website builder. With Uploadcare, you can allow your users to submit media via forms, with no fuss about storage or uploading interface.

In just 5 minutes we will build a working uploads-enabled form via Uploadcare File Uploader using just a few lines of code.

How Uploadcare Uploads Files to Wix

Our responsive and mobile-ready File Uploader provided as a standard JavaScript library. Technically, File Uploader replaces your basic <input type="file"> controls, which then become buttons that activate the file uploader dialog. Every piece of content uploaded via Uploadcare gets instantly cached on our CDN and swiftly and reliably delivered across 130+ countries.

What does it look like for an end user? For example, let’s say you need your users to upload scans of their documents. With File Uploader integrated, they see a submission form where they can easily add PDF files to your Wix website.

But of course, it’s not only about PDFs. Images and video files that are stored in various sources, from local folders on your PC to social media, can also be uploaded to Wix.

So, let’s get started.

Adding a PDF to Wix
Adding a PDF to Wix

Step 1. Setup

Before we begin, let’s make sure everything is in place.

First of all, you need a Wix-powered website. If you don’t have one, it will only take you a few clicks to create one.

Second, you need to have an Uploadcare account. If you don’t, Sign Up for one. Once you’ve created it, navigate to your dashboard to create a new project or discover your Public API key for an existing one.

By the way, if you plan to let users submit non-image files via your form, add billing info to your account.

Now that you’re set up, go to your Wix website and proceed to the next step.

Step 2. Create an HTML Block

Go to the Wix editor and open your website. Use the toolbox on the left side to place an HTML element on your page: hit the plus sign, then click More, and choose HTML iframe in the Embeds section.

Adding upload HTML to Wix
Adding upload HTML to Wix

Now, place the element in your working area. Make sure the block width is at least 760px to ensure that File Uploader will display correctly.

Step 3. Add the Uploadcare File Uploader

Select the block you have just placed and click the Enter Code button. A settings box will appear, providing you with two options: a “Code” radio button and an HTML code box. Copy the code below and paste it there.

Don’t forget to replace YOUR_PUBLIC_KEY with the real Public API Key you got after signing up for Uploadcare.

<script>
  UPLOADCARE_PUBLIC_KEY = 'YOUR_PUBLIC_KEY'
</script>
<script
  src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js"
  data-integration="Wix"
></script>

<fieldset>
  <legend>Submit Your Question</legend>
  <form>
    <p>
      <label for="email">E-mail</label>
      <input type="email" id="email" name="email" />
    </p>
    <p>
      <label for="question">Your question</label>
      <textarea id="question" name="question"></textarea>
    </p>
    <p>
      <label for="images">Your files</label>
      <input
        type="hidden"
        id="files"
        name="files"
        role="uploadcare-uploader"
        data-clearable
        data-images-only
        data-crop="free,2:3,4:3,16:9"
      />
    </p>
    <p>
      <button type="submit">Submit</button>
    </p>
  </form>
</fieldset>
HTML code for Wix upload
HTML code for Wix upload

The data-images-only option sits in the file uploader config to provide a fail-safe experience when working with accounts on the Free plan with no billing info added: those only allow image uploads.

Step 4. Publish Your Upload Form to Wix

Click Update, and you’re done integrating the file uploader.

 The final look of a file uploader for Wix
The final look of a file uploader for Wix

You can rearrange the order of blocks in the Wix editor by moving them a layer up or down. Ensure your form is in the topmost layer (Ctrl + Shift + → will do that), so no other elements are blocking the view when the dialog is activated.

Note that Wix puts external HTML in an <iframe> element, which is not guaranteed to be responsive across devices. Test the created form to make sure it displays properly on your users’ most popular devices.

Conclusion

You’ve just built an uploads-enabled form via Uploadcare File Uploader 📷

Now, you and your users can easily upload files to Wix; they’re all automatically optimized to provide the best page load speed, fit any screen, and take up as little space as possible.

Check out our docs to learn how to power up any web app with a ready-to-use file platform: uploads, in-browser image editing, media processing, and lightning-fast CDN delivery:

If you have any questions, feel free to post them in our community area.