Hello ,
Im looking for a solution in my website.
its a rental boats website.
I would like to be abble to upload many images from just one button and than subimit all to a MIDIA GALLEY field database.
n
See this link: https://jonatandor35.wixsite.com/test/multiupload
For the sake of the example, let’s say you save 2 fields: userId, album (the media gallery field) in a collection named “Pictures”.
Here are the adjustments:
import wixUsers from "wix-users";
import wixData from "wix-data";
let userId = wixUsers.currentUser.id;
let galleryItems = [];
let toSave = {userId: userId, album: []};
$w.onReady(function () {
$w("#uploadButton1").fileType = "Image";
$w("#uploadButton1").onChange( () => {
if ($w("#uploadButton1").value.length > 0) {
$w("#submit").disable();
$w("#uploadButton1").buttonLabel = "Loading...";
$w("#loader").expand();
$w("#uploadButton1").startUpload()
.then( (uploadedFile) => {
galleryItems.push({type: "image", src: uploadedFile.url});
$w("#gallery1").items = galleryItems;
$w("#loader").collapse();
$w("#gallery1").expand();
toSave.album.push({"type": "image", "src": uploadedFile.url});
$w("#submit").enable();
toSave.album.length > 1 ? $w("#submit").label = "Save Images" : $w("#submit").label = "Save Image";
$w("#uploadButton1").buttonLabel = "Add another image";
$w("#uploadButton1").reset();
} )
.catch( (uploadError) => {
console.log(`File upload error: ${uploadError.errorCode}`);
console.log(uploadError.errorDescription);
} );
}
} );
$w("#submit").onClick((event) => {
$w("#submit").label = "saving...";
$w("#uploadButton1").disable();
$w("#submit").disable();
wixData.save("Pictures", toSave)
.then(() => {
$w("#submit").label = "✓ Saved";
$w("#submit").disable();
$w("#gallery1").items = [];
$w("#gallery1").collapse();
galleryItems = [];
toSave = {userId: userId, album: []};
$w("#uploadButton1").buttonLabel = "Add an Image";
$w("#uploadButton1").enable();
})
})
});
tnaks to replaly.
i had a problem with this code!
Line 13 :
$w(“#loader”).expand();
Line 18
$w("#loader").collapse();
when i go teste the code the button just keep loanding and nothing happens
@tfigueiracosta that’s because I put a loader (htmlComponent) in my example to indicate that it’s loading the image.
You can just delete these lines if you don’t want to show a loader.
@jonatandor35 ok, i did it! now i can upload more then one image.
But when i submit the button keep “saving” and dont send the images to database , only the other fields…
note that my button submited every information less a Album
@tfigueiracosta check your collection permissions and make sure you have the permission to write to collection.
Yes, because all the content in the database i sent a print above was sent from this registration webpage bellow
@tfigueiracosta I just tested the code and it worked for me. So either you didn’t copy all of it, or you didn’t adjust the property id, or something else, but the code is fine.
@jonatandor35 look this video i did
All inputs are connect with datacollection and their related fields
the upload button are not coneected with any data becouse wix do not allow to send to a galley field. So the code u sent me show take this action and sent all photos to my galley field database. is that correct??
@tfigueiracosta the code I posted was designed for working directly with your collection without any dataset in the middle. But you connected the input elements and the submit button to a dataset, so problems are expected. You should stick to one method.
Sorry maybe you hurried me wrong.
I would like to send the images along with the form for my dataset
Note that this is a boat registration page where information is sent to a dataset that sends data to dynamicpagaes linked.
Can you help me with that?
@tfigueiracosta so you have 2 options:
- Submit everything directly to your collection.
- Submit everything to a dataset.
Personally I prefer the first one.
To do, disconnect everything from the dataset.
and add:
let userInputs = [$w(#input1), $w(#input2"), $w(#dropdown1)]; //all the user input elements.
userInputs.forEach(e => {
e.onChange(event => {
userInputs.every(i => i.valid) ? $w("#submitButton").enable() :$w("#submitButton").disable();
})
})
$w("#submit").onClick((event) => {
toSave.name = $w("#input1").value;
toSave.lastName = $w("#input2").value;
//do it to all other fields.
wixData.save("COLLECTION-NAME", toSave)
.then(() => {
//etc...
})
@jonatandor35 first thank you very much for your patience
1-Im having a problem with the las line look…
let userInputs = [$w(“#input1”), $w(“#input2”), $w(“#dropdown1”), $w(“#uploadButton1”)];
userInputs.forEach(e => {
e.onChange(event => {
userInputs.every(i => i.valid) ? $w(“#submit”).enable() :$w(“#submit”).disable();
})
})
$w(“#submit”).onClick((event) => {
toSave.listedfor = $w(“#dropdown1”).value;
toSave.title = $w(“#input1”).value;
toSave.year = $w(“#input2”).value;
toSave.album = $w(“#uploadButton1”).value;
wixData.save(“EstoqueMiami”, toSave)
.then(() => {
}) // its sayng " parshing erro unepected token "
2- will this button alows me to upload many photos or i have to add one button to it photo?
@tfigueiracosta you need to add another }) in the end (to close the onClick() function).
Also I meant you should combine it with the first code (of the uploading images).
I connected to the first code you sent me and the errors left…
Question:
let userInputs = [$w(“#dropdown1”), $w(“#input1”), $w(“#input2”), $w(“#gallery1”)];
userInputs.forEach(e => {
e.onChange(event => {
userInputs.every(i => i.valid) ? $w(“#submit”).enable() :$w(“#submit”).disable();
})
})
$w(“#submit”).onClick((event) => {
toSave.listedfor = $w(“#dropdown1”).value;
toSave.title = $w(“#input1”).value;
toSave.year = $w(“#input2”).value;
toSave.album = $w(“#gallery1”).value; // to save in my album field ( gallery ) should a use #gallery insede the () or #uploadbutton??
I just tested the code and look
its open with 2 red lines errors
Then i filled the inputs normally and added two images! it worked well…
then when i click save images the third line error code appears and the button justt keep saving and nothing happens
here ara the full code:
import wixUsers from “wix-users”;
import wixData from “wix-data”;
let userId = wixUsers.currentUser.id;
let galleryItems = ;
let toSave = {userId: userId, album: };
$w.onReady( function () {
$w(“#uploadButton1”).fileType = “Image”;
$w(“#uploadButton1”).onChange( () => {
if ($w(“#uploadButton1”).value.length > 0) {
$w(“#submit”).disable();
$w(“#uploadButton1”).buttonLabel = “Loading…”;
$w(“#uploadButton1”).startUpload()
.then( (uploadedFile) => {
galleryItems.push({type: “image”, src: uploadedFile.url});
$w(“#gallery1”).items = galleryItems;
$w(“#gallery1”).expand();
toSave.album.push({“type”: “image”, “src”: uploadedFile.url});
$w(“#submit”).enable();
toSave.album.length > 1 ? $w(“#submit”).label = “Save Images” : $w(“#submit”).label = “Save Image”;
$w(“#uploadButton1”).buttonLabel = “Add another image”;
$w(“#uploadButton1”).reset();
} )
. catch ( (uploadError) => {
console.log(File upload error: ${uploadError.errorCode});
console.log(uploadError.errorDescription);
} );
}
} );
$w(“#submit”).onClick((event) => {
$w(“#submit”).label = “saving…”;
$w(“#uploadButton1”).disable();
$w(“#submit”).disable();
wixData.save(“Pictures”, toSave)
.then(() => {
$w(“#submit”).label = “✓ Saved”;
$w(“#submit”).disable();
$w(“#gallery1”).items = ;
$w(“#gallery1”).collapse();
galleryItems = ;
toSave = {userId: userId, album: };
$w(“#uploadButton1”).buttonLabel = “Add an Image”;
$w(“#uploadButton1”).enable();
})
})
});
let userInputs = [$w(“#dropdown1”), $w(“#input1”), $w(“#input2”), $w(“#uploadButton1”)];
userInputs.forEach(e => {
e.onChange(event => {
userInputs.every(i => i.valid) ? $w(“#submit”).enable() :$w(“#submit”).disable();
})
})
$w(“#submit”).onClick((event) => {
toSave.listedfor = $w(“#dropdown1”).value;
toSave.title = $w(“#input1”).value;
toSave.year = $w(“#input2”).value;
toSave.album = $w(“#uploadButton1”).value;
wixData.save(“dataset1”, toSave)
.then(() => {
})
})
First, you need all th code to be inside the $w.onReady(function () {}).
Second, you should not have 2 different $w(“#submit”).onClick() and 2 different wixData.save();
Merge them into one.
I made it!!! its working!! have no words man! thank you very much!!!
Itsss workingggg!! omg rs
Thank so much man!