Wix Velo: Uploading multiple images with a single upload button
As I have looked around on the Wix Velo forum regarding this topic, I realized that this feature has been requested by many Wix users and is currently in development. Meanwhile, there is a workaround that may allow you to upload multiple images while waiting for the feature release.
There are a few big steps in this solution:
- Write Frontend code for the custom element for multiple uploads
- Connect the Frontend code to the custom element in the Editor
- Create an API to trigger the upload process and implement the upload process itself (especially how to pass a big file (> 300 KB) from Front-end code to Back-end code so the Back-end can upload that file to Media Manager)
- Use the API on the Custom Element
Before you continue reading:
- Turn on Dev Mode, you will see 3 sections in the file panel on the left: Public, Backend, and Packages.
- Note: There is currently no workaround to remove any already-uploaded images from the Wix Media Manager in the code. You have to do it manually if you need to.
- Wix Limitation: Custom elements are supported only for premium Wix users on sites with their own domain and with Wix ads removed. So please make sure you have Premium before continuing.
- In this article, I only give out the code without explanation. Let me know if you need one in the comment.
Write Frontend code for the custom element for multiple uploads
custom-elements/uploadButton.js in Public and copy/paste all the code below into that file.
Connect the Frontend code to the custom element in the Editor
Step 1: Add a Custom Element to the Editor
Step 2: Click Choose Source and select
Corvid file in the Element Settings
Step 3: Select
uploadButton.js in the dropdown menu and put Tag Name as
Step 4: Well, your button should look like this! Resize it as you need to.
Create an API to trigger the upload process and implement the upload process itself
Step 1: In Public, create a file named
uploadButtonController.js and copy/paste the below code.
Step 2: In Backend, create a file named
mediaManagerUtil.jsw and copy/paste the below code.
Step 3: Create a Collection named
MediaUploadRecord with the following Field Keys (you can put any Field Names you want for these keys):
Step 4: Install these two npm packages
Use the API on the Custom Element
Let’s say your Custom Element tag name is
#CustomElement1 . Then, you can use the API as follows:
Some ending notes
- I am not recommending using this code for business purposes, as you cannot remove your uploaded media from the code but rather do it manually.
- Let me know if you need an explanation so I can spend another article to go further on my implementation.
Other than that, I hope this helps you with your current project.