Hi Noah
First of all uploading images is done, as I’m sure you are aware using the upload button.
A trick here is that you can upload images immediately after selecting an image using the onChange handler.
The important aspects of accessing the selected image is that you need to actually upload the selected images to the media manager using the uploadFiles option to the uploadButton
Here’s some code as an example
let selectedFile = null;
$w.onReady(() => {
// force image type for upload
$w(“#uploadButton1”) .fileType = “Image”;
$w(“#uploadButton1”).onChange(getSelectedImage);
});
async function getSelectedImage(event) {
// uploadButton value has changed. If files were selected then upload it/them
let uploadedFiles = await $w(“#uploadButton1”).uploadFiles();
// we should have a list of uploaded file attributes
// we only need the first one if more than one is loaded
console.log(we uploaded ${uploadedFiles.length} files);
if (uploadedFiles.length > 0) {
// we have at least 1 file let’s use the first file as our selected file
selectedFile = uploadedFiles[0];
// Let’s show the selected image as confirmation of the upload
$w(“#selectedImageText”).text = Selected file name: ${selectedFile.fileName};
$w(“#selectedFileURL”).text = URL of selected files ${selected.fileUrl};
// Show image uploaded
$w("#displayImage").src = selectedFile.fileUrl;
}
}
======================
In the code above the important information that you need to access is the selectedFile.fileUrl
Now sometimes the url provided is not the url held in the media manager. If the image url when assigned to the sec property of an image element doesn’t render then search the forum for solutions on how to change the uploaded file url to view an image.