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!
$w.onReady(function () { let value = []; $w('#uploadButton1').onChange((event) => { //video upload button if ($w("#uploadButton1").value.length > 0) { $w("#uploadButton1").buttonLabel = "Uploading" $w('#uploadButton1').startUpload() .then((uploadedFile) => { value.push({ "slug": "Title", "src": uploadedFile.url, "title": "title", "type": "video" }); $w('#gallery1').items = value; $w('#uploadButton1').reset(); }); } }); $w('#uploadButton2').onChange((event) => { //image upload button if ($w("#uploadButton2").value.length > 0) { $w("#uploadButton2").buttonLabel = "Uploading" $w('#uploadButton2').startUpload() .then((uploadedFile) => { value.push({ "slug": "Title", "src": uploadedFile.url, "title": "title", "type": "image" }); $w('#gallery1').items = value; $w('#uploadButton2').reset(); }); } }); });
Hey mate, wondered if you could had any luck with this? I've been trying and it's driving me insane!
And for your "If user uploads one image, image is saved in 'markcoverPhoto' and 'gallery' field in 'marks' collection? I've been playing around with the codes with no success!' post?" ..... you should indeed create a new post.....
😉
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(); }) }
Thanks mate! Test site works great - legend!
Any luck with
'If user uploads one image, image is saved in 'markcoverPhoto' and 'gallery' field in 'marks' collection? I've been playing around with the codes with no success!' post?
Hi !!
How will the user delete the image in the array .. by pressing a button or clicking an item in the gallery etc ?????
like example ->
Here the user uploads one image.....
Then the image is show in the gallery
Then the user wants to delete one image in the gallery...
So he/she clicks one of the image in the gallery..
That image gets deleted ...
Here's the live site (Tip - don't go to another pages or the home page total destruction)
https://ajithkrr.wixsite.com/mysite/blank-14
Here's the code I used ->
$w('#gallery1').onItemClicked((event) => { let indexNum = event.itemIndex; let i = indexNum value = value.slice(0, i).concat(value.slice(i + 1, value.length)) $w('#gallery1').items = value; });
$w.onReady(function () { let value = []; $w('#uploadButton1').onChange((event) => { //photo upload button if ($w("#uploadButton1").value.length > 0) { $w('#uploadButton1').startUpload() .then((uploadedFile) => { value.push({ "slug": "Title", "src": uploadedFile.url, "title": "title", "type": "video" }); $w('#gallery1').items = value; $w('#uploadButton1').reset(); }); } }); $w('#uploadButton2').onChange((event) => { //image upload button if ($w("#uploadButton2").value.length > 0) { $w('#uploadButton2').startUpload() .then((uploadedFile) => { value.push({ "slug": "Title", "src": uploadedFile.url, "title": "title", "type": "image" }); $w('#gallery1').items = value; console.log(value); $w('#uploadButton2').reset(); }); } }); $w('#gallery1').onItemClicked((event) => { let indexNum = event.itemIndex; let i = indexNum value = value.slice(0, i).concat(value.slice(i + 1, value.length)) $w('#gallery1').items = value; }); });
https://www.wix.com/corvid/reference/$w/gallery/onitemclicked#$w_gallery_onitemclicked_galleryitemclickedeventhandler
To add to the above ...
What I'm trying to achieve is this..
If user uploads one image, image is saved in 'markcoverPhoto' and 'gallery' field in 'marks' collection? I've been playing around with the codes with no success!
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 = "Upload Again"; $w("#uploadCoverPhotoMain").enable(); $w("#coverPreviewimage").show(); $w("#coverimagePreview").show(); $w('#uploadCoverPhotoMain').reset(); $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; console.log(value); }) if ($w("#uploadCoverPhotoMain").value.length > 1) { $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 = "Upload Again"; $w("#uploadCoverPhotoMain").enable(); $w('#uploadCoverPhotoMain').reset(); $w("#uploadVideo2").buttonLabel = "Disabled"; $w("#uploadVideo2").disable(); value.push({ "slug": "Title", "src": uploadedFile.url, "title": "title", "type": "image" }); $w("#gallery1").show(); $w('#gallery1').items = value; }) .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" $w("#gallery1").hide(); } } }
and the submit/save button
export function SubmitCreate_click(event) { $w("#SubmitCreate").label = "Publishing..." $w("#SubmitCreate").disable(); $w("#dropPublish").disable(); $w("#dropCreateanother").disable(); $w("#previewButton").disable(); let toInsert = { "gallery": value }; $w("#MarksDataset").save().then((item) => { wixData.insertReference("marks", "mymarks", item._id, result.items[0]._id, toInsert) wixData.query("marks") .eq("_id", wixData._id) .find() .then((res) => { let headline = res.items[0].headline.split(' ').join('-'); let id = res.items[0]._id; let category = res.items[0].category; id = id.split(':').join('%3A'); category = category.split(':').join('%3A'); headline = headline.split(' ').join('-'); wixLocation.to(`/marks/${id}/${category}/${headline}`) }) .catch((err) => { let errorMsg = err; }) }) }
Interested on how to delete an image in the database too
me again...how do you now delete what's been uploaded?
user uploads an image or video but decides to actually delete something that's been uploaded before submitting?
I should get you involved in my project! haha
Then try this ->
(code for the video upload button)
$w.onReady(function () { let video = []; $w('#uploadButton1').onChange((event) => { if ($w("#uploadButton1").value.length > 0) { $w("#uploadButton1").buttonLabel = "Uploading" $w("#uploadButton1").disable(); $w('#uploadButton1').startUpload() .then((uploadedFile) => { video.push({ "slug": "Title", "src": uploadedFile.url, "title": "title", "type": "video" }); $w('#gallery1').items = video; $w('#uploadButton1').reset(); $w("#uploadButton1").enable(); }); } }); });
interesting!
I do, i have 4 in total .. one upload button for images, one for video, one for file and one for audio
...or do you have any separate upload button ??
If you have separate upload button (one for photo upload, one for video upload, then we can combine both the image and video as a gallery) then we can achieve it
Hi mate !!
I don't see any upload button for uploading both image and video
There is no current feature for multiple file upload....
You can surely vote for it ->
https://www.wix.com/corvid/requested-feature/multiple-file-upload-button
The user uploads one file..
It gets uploaded....
Then you want to show the all uploaded images as a gallery...
When the save button is clicked you want to insert it to database..
If it is ->
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) { if ($w("#uploadButton1").value.length > 0) { $w("#uploadButton1").buttonLabel = "Uploading" $w("#uploadButton1").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('#uploadButton1').reset(); $w('#dataset25').refresh(); $w('#gallery').show(); $w('#gallery').items = value; $w('#imagedeletebutton').show(); console.log(value); }) } }
As you said "none of the elements are connected to the database," you need the insert function to insert the all images to a gallery field to the database....
Something like this ->
export function save_click(event) { if ($w("#uploadButton1").value.length > 0) { $w("#save").label = "Publishing..." $w("#save").disable(); let toInsert = { "gallery": value // instead of "gallery" paste your filed key of the gallery field }; wixData.insert("Database", toInsert) //database name .then( (results) => { $w("#save").label = "Published" $w("#save").enable(); $w("#save").show(); $w("#dataset25").refresh(); }) } }
If you are trying to upload multiple images to a gallery field in database, check here ->
https://www.wix.com/corvid/forum/main/comment/5f8dbc2277c8e700599cfb14