Hi All!
I'm attempting two things simutanously here...I've seen a few old threads with no results over the years so attempting in near-end of 2020!
Is there a way for a user to upload multiple images at once, rather than one upload button per image? Same for video or a file?
If a user upload an image and a video, is there a way to display these in a gallery rather than two separate elements?
See below codes that I am currently using for one upload button per separate image or video etc. Scenario being:
- A user uploads one image using an upload button set to 'image'
- uploaded image preview is shown using one image
- Submit button to save image to DS
/// Submit uploaded image
export function SubmitCreate_click(event) {
$w("#SubmitCreate").label = "Publishing..."
$w("#SubmitCreate").disable();
$w("#dropPublish").disable();
$w("#dropCreateanother").disable();
$w("#previewButton").disable();
$w("#MarksDataset").save().then((item) => {
wixData.insertReference("marks", "mymarks", item._id, result.items[0]._id)
.then(() => {
let name = item.headline.split(' ').join("-");
wixLocation.to(wixLocation.baseUrl + "/marks/" + name);
})
.catch((error) => {
console.log(error);
});
})
.catch((err) => {
let errorMsg = err;
$w("#SubmitCreate").label = "Publish"
$w("#SubmitCreate").enable();
$w("#SubmitCreate2").label = "Publish"
$w("#SubmitCreate2").enable();
$w("#publishCreate").label = "Publish"
$w("#publishCreate").enable();
})
}
Upload image button = #uploadCoverPhotoMain
Preview images = #coverimagePreview #coverPreviewimage #markCover #portfolioImage
export async function uploadCoverPhotoMain_change(event) {
if ($w("#uploadCoverPhotoMain").value.length > 0) {
$w('#previewcover').hide();
$w('#PublishDrop').hide();
$w("#uploadVideo2").buttonLabel = "Disabled";
$w("#uploadVideo2").disable();
$w("#uploadCoverPhotoMain").buttonLabel = "Uploading";
$w("#uploadCoverPhotoMain").disable();
$w("#uploadCoverPhotoMain").startUpload()
.then((uploadedFile) => {
$w("#uploadCoverPhotoMain").buttonLabel = "Uploaded";
$w("#uploadCoverPhotoMain").enable();
$w("#coverPreviewimage").show();
$w("#coverimagePreview").show();
$w("#uploadVideo2").buttonLabel = "Disabled";
$w("#uploadVideo2").disable();
$w("#coverimagePreview").src = uploadedFile.url;
$w("#coverPreviewimage").src = uploadedFile.url;
$w("#markCover").src = uploadedFile.url;
$w("#portfolioImage").src = uploadedFile.url;
})
.catch((err) => {
let errorMsg = err;
$w("#uploadCoverPhotoMain").buttonLabel = "Try again";
$w("#uploadCoverPhotoMain").enable();
$w("#uploadVideo2").buttonLabel = "Upload";
$w("#uploadVideo2").enable();
$w("#coverPreviewimage").hide();
$w("#coverimagePreview").hide();
$w("#portfolioImage").src = "https://static.wixstatic.com/media/b05b4f_1a5794cf7c7d4b9eb1622cf7d97df0b0~mv2.png"
})
.catch((uploadError) => {});
///
} else {
$w("#coverPreviewimage").hide();
$w("#coverimagePreview").hide();
$w("#uploadCoverPhotoMain").buttonLabel = "Upload";
$w("#uploadCoverPhotoMain").enable();
$w("#uploadVideo2").buttonLabel = "Upload";
$w("#uploadVideo2").enable();
$w("#coverPreviewimage").hide();
$w("#coverimagePreview").hide();
$w("#portfolioImage").src = "https://static.wixstatic.com/media/b05b4f_1a5794cf7c7d4b9eb1622cf7d97df0b0~mv2.png"
}
}
Thanks in adavance team!
I'm not having much luck with onitemclick, am I missing out on something?
I've seen this but not sure what I need to replace it with..
$w("#myGallery").onItemClicked( (event) => {
let itemDescription = event.item.description; // "Description"
let itemIndex = event.itemIndex; // 3
} );
import wixData from 'wix-data'; import wixUsers from 'wix-users'; import wixLocation from 'wix-location'; import wixWindow from 'wix-window'; let result = []; let value = []; export function uploadButton1_change(event) { //image upload button if ($w("#uploadButton1").value.length > 0) { $w("#uploadButton1").buttonLabel = "Uploading" $w("#uploadButton1").disable(); $w("#uploadButton2").disable(); $w('#uploadButton1').startUpload() .then((uploadedFile) => { value.push({ "slug": "Title", "src": uploadedFile.url, "title": "title", "type": "image" }); $w("#uploadButton1").buttonLabel = "Upload again" $w("#uploadStatusText").show(); $w("#uploadStatusText").text = "Upload Successful" $w("#uploadButton1").enable(); $w('#uploadButton2').enable(); $w('#uploadButton1').reset(); $w('#dataset25').refresh(); $w('#gallery').show(); $w('#gallery').items = value; $w('#imagedeletebutton').show(); $w("#save").enable(); console.log(value); }) } } export function uploadButton2_change(event) { if ($w("#uploadButton2").value.length > 0) { $w("#uploadButton2").buttonLabel = "Uploading" $w("#uploadButton2").disable(); $w("#uploadButton1").disable(); $w('#uploadButton2').startUpload() .then((uploadedFile) => { value.push({ "slug": "Title", "src": uploadedFile.url, "title": "title", "type": "video" }); $w("#uploadButton2").buttonLabel = "Upload again" $w("#uploadStatusText").show(); $w("#uploadStatusText").text = "Upload Successful" $w('#gallery').items = value; $w('#uploadButton2').reset(); $w('#uploadButton2').enable(); $w('#uploadButton1').enable(); $w('#dataset25').refresh(); $w('#gallery').show(); $w('#imagedeletebutton').show(); console.log(value); }) } } export function gallery_itemClicked(event) { let indexNum = event.itemIndex; let i = indexNum value = value.slice(0, i).concat(value.slice(i + 1, value.length)) $w('#gallery').items = value; } export function save_click(event) { $w("#save").label = "Publishing..." $w("#save").disable(); $w('#uploadButton1').disable(); $w('#uploadButton2').disable(); let toInsert = { "gallery": value }; wixData.insert("marks", toInsert) //database name .then((results) => { $w("#save").label = "Published" $w("#save").enable(); $w('#uploadButton1').enable(); $w('#uploadButton2').enable(); $w("#dataset25").refresh(); }) }