How to Connect "HTML Upload File Button" to the "Submit Button by Wix Form"

Ask the community
, ,
1

I would like to create automation that uploads the files uploaded using HTML Upload File Button as we click on Submit button on wix forms. The HTML element uploads the files but it’s not submitting to the database when wix form submission happens.
Thanks in advance!

2

Hi. Please post your code.

3

Thanks for reply. Here is the code that I used to create Upload a File button.

Custom File Upload Button w/ File List .file-upload { display: block; align-items: center; font-size: 15px; } 
 .file-upload__input  { 
   display: none; 
} 

.file-upload__button { 
  -webkit-appearance: none; 
  background: #FFFFFF; 
  border: 3 px solid #00A6FF; 
  border-radius: 4px; 
  outline: none; 
  padding: 10em 25em;     
  color: #00A6FF; 
  font-size: 1em; 
  font-family: sans-serif; 
  font-weight: bold; 
  cursor: pointer; 
} 

.file-upload__label { 
  max-width: 500px; 
  font-size: 0.65em; 
  text-overflow: ellipsis; 
  overflow: hidden; 
  white-space: nowrap; 
} 
.file-upload__label:hover {

overflow: visible;
}

Choose File(s)

No File(s) Selected

4

hi thanks for the code but one thing I don’t understand is that the script doesn’t work for me on notepad++ and visual studio code, and its the array prototype code/sentence and the overall script that effects it and doesn’t work cuz of that.

837×303 16.2 KB

I don’t understand why the array. prototype isn’t blue and why the File upload options within the script are grey? can you please help me

5

What is it, what you are trying to achieve?
Generating an HTML-FILE-SELECTOR?
If so, than try this one…

<html>
  <head>
  </head>
  <body id="body">
    <input type="file", name="fileSelector1", id="fileSelector", accept="image/*", onchange="openFile(event)", multiple><br>
    <script type="text/javascript">
    	//--------------------------------------------------------------------------------
      var openFile = async function(event) {var data={};
        //var msg = {fileName: "", fileType: "", content: "", fileSize: "", accepted: ""};        
        //------------------------------------------------------------------------------- 
        var input = await event.target;         console.log(input);  
        var inputDATA = await input.files[0];   console.log("Input-Data: ", inputDATA);
        var fileName = inputDATA.name;	        console.log("File-Name: ", fileName);
        var fileType = inputDATA.type;		console.log("File-Type: ", fileType);
        var fileSize = inputDATA.size;		console.log("File-Size: ", fileSize);
       	var accepted = input.accept;		console.log("Accepted: ", accepted);
        var filesTotal = input.files.length;	console.log("Files-Total: ", filesTotal);
        //-------------------------------------------------------------------------------        
        var reader = new FileReader(); 
         reader.onloadend = async function (event) {var img = new Image();
          img.src = await event.target.result;
          img.onload = function () {
            data.fileHeight = img.height;
            data.fileWidth = img.width;
            data.fileName = fileName;
            data.fileSize = fileSize;
            data.fileType = fileType;
            data.filesTotal = filesTotal;
            data.accepted = accepted;    
            data.base64 = img.src;
          	data.state = "start";
            if (filesTotal>=0) {window.parent.postMessage(data,"*");}
          };
        };
				reader.readAsDataURL(inputDATA);
      //---------------------------------------------------------------------------------
        window.onmessage = (async(event)=>{console.log("OnMessage running...");
          var data = await event.data; console.log("DATA: ", data);
     
					// continue here......  
          
        });
        //-----------------------------------    
     	};
      //------------------- 
    </script>
  </body>
</html>