Serverless File Uploads for Wix
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
<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
- Step 1. Create an HTML Block
- Step 2. Add Uploadcare Widget
- Step 3. Publish Your Form
Let’s make sure everything is in place.
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.
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.”
Place the element in your working area. Make sure the block width is at least 760px to ensure that File Uploader will display correctly.
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>
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.
Hit “Update,” and you’re done integrating the widget.
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.
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.