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.

A temporary solution for multiple uploads at once on Wix

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

Create file 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 upload-button-multiple-file

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):title , payload , name , type , currentCount , totalCount

Step 4: Install these two npm packages buffer , base64-arraybuffer

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.