Serverless File Uploads for Wix
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 5 minutes we will build a working uploads-enabled form via Uploadcare File Uploader using just a few lines of code.

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

Before We Begin

Let’s make sure everything is in place.

First, you need to have an Uploadcare account. In case you don’t, Sign Up for one. Once you get it, navigate to your dashboard to create a new project or discover Public API key for an existing one.

Second, you need a Wix-powered website. If you don’t have it, it will take you a few clicks to create 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 1. Create an HTML Block

Go to the Wix editor and open your website. Use a toolbox on the left side to place an HTML element on your page: hit the plus sign, “More,” and “HTML iframe.”

Choose “HTML iframe”

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 2. Add Uploadcare Widget

Select the block you have just placed and hit the “Enter Code” button. A settings box will appear providing you with the two options: “Code” radio-button and HTML code box. Copy the following code and paste it there.

Don’t forget to replace YOUR_PUBLIC_KEY with a real Public API Key you discovered in the “Before We Begin” part.

<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>

Paste code under “Add your code here (HTTPS only)” label

The data-images-only option sits in the widget 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 3. Publish Your Form

Hit “Update,” and you’re done integrating the widget.

Updated Block Version

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 upmost layer (Ctrl + Shift + → will do that), so no other elements are blocking the view upon the dialog activation.

Note, Wix puts external HTML in the <iframe> element which is not guaranteed to be responsive across devices. Test the created form to display properly on your most popular user devices.

Conclusion

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

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

In case you have any questions, feel free to post those around our community area.

We’re always happy to help with code, integration, and other stuff. Search our site for more info or post your question in our Community Area.