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!
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
Hey mate!
I’m trying to allow users to upload images or videos on their own and have them display in a gallery…if that’s what you meant also?
I’ve had a look at your code but it doesn’t seem to be working for me… I’ve amended it slightly and this is what I have but still not having much luck with it(!)
Worth also mentioning none of the elements are connected to the dataset as I’m unable to connect the upload button to the ‘mediaGallery’ field for example.
I’ve created a test page to use an example…
Test link: https://eventmark.co.uk/test
Key:
upload button = #uploadButton1 (set to upload ‘image’)
gallery = #gallery
status of upload = #uploadStatusText
delete button = #imagedeletebutton
save button = #save
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('#imagedeletebutton').show();
console.log(value);
})
}
}
export function save_click(event) {
if ($w("#uploadButton1").value.length > 0) {
$w("#save").label = "Publishing..."
$w("#save").disable();
$w("#dataset25").save().then(() => {
$w("#save").label = "Published"
$w("#save").enable();
$w("#save").show();
$w("#dataset25").refresh();
})
}
}
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();
})
}
}
THIS IS GREAT!
I had to remove the below in order for it to work…
if ($w("#uploadButton1").value.length > 0) {
Is there now a way to upload image and video using the above?
@ajit kumar did you make a reply that I’m missing?
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
@events32996 See down (last)!!!
…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
interesting!
I do, i have 4 in total … one upload button for images, one for video, one for file and one for audio
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();
});
}
});
});
Ah I see what you mean, that’s what I was going to do but I thought we could achieve it under one upload button, but I don’t think so! Thanks mate!
@events32996 Sure it is under development as in the wish-list page…
$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();
});
}
});
});
I should get you involved in my project! haha
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?
Interested on how to delete an image in the database too
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;
})
})
}
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;
});
});
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?
