Hello All, Im trying to set up an element that allows users to upload multiple image files to my site, and id like to create an image preview for them instead of uploading the files right away, but im having some problems. My pagfe code is as follow:
import wixWindow from 'wix-window'; $w.onReady(function () { $w("#uploadButton1").fileType = "Image"; // Set the fileType property to 'Image' console.log("Page is ready"); let images = []; $w("#uploadButton1").onChange((event) => { console.log("Upload button onChange event triggered"); let file = event.target.value[0]; console.log("Selected file:", file); if (file.valid) { console.log("Selected file is valid"); let reader = new FileReader(); reader.onload = (event) => { let src = event.target.result; console.log("Created data URL for selected file:", src); let id = "image" + images.length; images.push({_id: id, src: src}); console.log("Updated images array:", images); $w("#repeater1").data = images; console.log("Set data of repeater:", $w("#repeater1").data); }; // Create a Blob object from the local file const blob = new Blob([file], {type: file.type}); reader.readAsDataURL(blob); } else { console.log("Selected file is not valid"); } }); $w("#repeater1").onItemReady(($item, itemData, index) => { console.log("Repeater onItemReady event triggered for item", index); console.log("Item data:", itemData); $item("#imageX1").src = itemData.src; console.log("Set src of image element:", $item("#imageX1").src); }); });
However, im getting regular logs from this that say the file type is application/octet stream. Is there a way anyone knows of (besides creating a custom Element) that I can use to do this? I also tried the "createObjectFromURL" method, but was running into completely different and more frustrating errors. Here are some of my console logs from the browser Page ready
createConsoleProxy.ts:47 Page is ready
createConsoleProxy.ts:47 Upload button onChange event triggered
createConsoleProxy.ts:47 Selected file: {name: '300-DPI.jpg', size: 112587, valid: true, validationMessage: ''}
createConsoleProxy.ts:47 Selected file is valid
createConsoleProxy.ts:47 Created data URL for selected file: data:application/octet-stream;base64,W29iamVjdCBPYmplY3Rd
createConsoleProxy.ts:47 Updated images array: [{…}]
createConsoleProxy.ts:47 Set data of repeater: [{…}]
createConsoleProxy.ts:47 Repeater onItemReady event triggered for item 0
createConsoleProxy.ts:47 Item data: {_id: 'image0', src: 'data:application/octet-stream;base64,W29iamVjdCBPYmplY3Rd'}
createConsoleProxy.ts:47 Set src of image element: data:application/octet-stream;base64,W29iamVjdCBPYmplY3Rd
