How to Programmatically Insert Media Manager Image into a Data Collection After Member Upload?

As basic as it sounds, I can’t seem to figure this out. :*(

I have a Multi-stage Form that I am using for Members to add event listings in their city. The first step requires them to add an image for the event, where they can also preview it, as the attached image shows. I would like to insert the uploaded image from the Media Manager into a temporary Data Collection when the member clicks the Next button, that will then be called upon when the member reaches the final page in the form, ‘Review’, where they can then confirm all of the data they input throughout the steps and then save it into the permanent Events Data Collection once they hit the Submit button on the final step, the Review page. I know having 2 submit buttons on the same page causes conflicts and I can’t save it into the same final Events Data Collection because it will have a different time stamp as the and not end up on the same row for the event listing when I call it to for display within a repeater on the main visitors events listing page. It also must be specific to that member/owner upload, in case there are members simultaneously uploading an image.

Maybe there’s a better flow option to achieve this. I am stuck once it’s uploaded into Media Manager.


Can we call upon Media Manager data specific to the Owner who uploaded it? If so, how can I upload this into the ‘Review Stage’ from the temporary Data Collection, or maybe straight from Media Manager? If not, what would be a better way to achieve the same result?

Thank you all for any insight!

  • Nelson

1 Like

More Notes:

I have tried to use a simple Upload Button but once the user hits ‘Next’ to go to the next slide, the image is no longer available. So when the user reaches the final page to hit the Submit button, all of the text data is saved but the image is not. They also cannot go back to change the image if they decided they need to change it on the ‘Review’ step or go back from any other slide/step to change it because it is not there once the user leaves that first slide with the uploaded image.

I also tried to have it so member can add the image in a way similar to a ‘data edit/update page’ where a dataset is set to ‘Read/Write’, have a ‘Revert’ button, and the member can edit/update the info, by seeing a preview of the image uploaded in real-time and then still be able to choose another image and then preview each time a new one is uploaded for review. But this option will bring up all data from the previous Event Listing entry from that owner in all the input fields. The ‘preview’ option is crucial so that they can see how their image is going to fit/look in the events listing repeaters I have. With events, a lot of times the member will have all different types of image sizes because some are pre-made flyers with irregular dimensions or phone pictures, hd, etc…

I also thought of maybe using wix-storage, and wix-location for this but I can’t seem to get the proper result with the code below because I know I am missing pieces and have structure errors in both parts:

import {local} from ‘wix-storage’;
import wixLocation from ‘wix-location’;

//to save the uploaded image temporarily and not save into collection yet, to not have conflicting date/time stamp on final Submit on ‘Review’ slide once it reaches the final permanent collection

$w.onReady(function () {
export function saveImageButton_click(event, $w) {
let image = $w(“#previewImage”).src;
local.setItem(“image”, image);

if ($w(“#addImageButton”).value.length > 0) {
$w(“#uploadStatusText”).text = Uploading ${$w("#addImageButton").value[0].name};
$w(“#addImageButton”).startUpload()
.then( (uploadedFile) => {
$w(“#uploadStatusText”).text = “Upload successful!”;
$w(“#previewImage”).src = uploadedFile.url;
})

   . **catch** ( (uploadError) => { 
    $w("#uploadStatusText").text = "Image upload error, try again."; 
    console.log(`Error: ${uploadError.errorCode}`); 
    console.log(uploadError.errorDescription); 
  }); 

}
else {
$w(“#uploadStatusText”).text = “Please choose an image to upload.”;
}
let toSave = {
“image”: “previewImage”,
};

//this is to then retrieve the uploaded image on the Review step of the multi-stage form in the slideshow

$w.onReady(function () {
//this is the button that sends user to next slide, the ‘Review’ slide
export function nextButton3_click(event, $w) {
$w("#slideShow).next();
local.getItem(“image”);
.then(res =>{
$w(‘#finalImageReview’).src //or .??? = .res.items // here I need to make image show up in the image field in the slideshow on the ‘Review’ step/slide. Use wix-location to set the uploaded/stored image into the preview image field on Review slide or what? Maybe I need to define the child/parent within slide? so confused…
});
}

Disclaimer: lol
I have yet to execute and test this code yet to avoid endless debugging that I’ll be even more confused about so this is merely my weak assumption from my current level of understanding of what the code should be and it’s the best I’ve been able to write. I’ve learned all of my coding from Wix Code and have no traditional HTML or JS knowledge prior to what I’ve learned here the past couple of months. I’m sure my code looks ridiculous ha. I’ve exhausted all options that I am aware of to achieve the end result and I just don’t know where else to go with it. This is a very important feature of the event listing process and of the website itself. Please excuse my code language, I’m trying my best. My syntax awareness is terrible but it’s getting better day by day lol.

Thanks again for the constant support and any guidance!

  • Nelson
1 Like

??? I’m dying here