Plain and simple. I want to limit the size of an image using the upload button. I’m looking to keep it under 2kb/file. I think i’ve got too many catches… but I’m not sure. any help would be greatly appreciated.
import wixData from “wix-data”;
$w.onReady( function () {
$w(‘#uploadButton’).onChange( () => {
let uploadedImageSizeLimit = 19999; //20kB
let selectedFile = $w(“#uploadButton”).value;
let selectedFileSize = selectedFile[0].size;
if (selectedFileSize < uploadedImageSizeLimit) {
$w(“#uploadButton”).startUpload($w(“#uploadButton”).buttonLabel = “Uploading”)
.then((uploadedFile) => {
console.log(“Upload successful. File is available here:”);
console.log(uploadedFile.url);
$w(“#dataset1”).setFieldValue(“image”, uploadedFile.url);
$w(“#dataset1”).save()
.then( (item) => {
console.log(“Save successful”);
let fieldValue = item.image;
} )
. catch ( (err) => {
let errMsg = err;
} );
} )
. catch ( (uploadError) => {
console.log(File upload error: ${uploadError.errorCode});
console.log(uploadError.errorDescription);
} );
} else {
// user clicked button but didn’t chose a file
console.log(“Please choose a file to upload.”)
}
} );
})
First off, I would change the upload button from an onChange to an onClick, so that you get the onClick to trigger the event handler, whereas if you use onChange you could not get it working as you are changing the buttons value which does not trigger the onChange event handler.
https://www.wix.com/corvid/reference/$w.UploadButton.html
The user chooses which file to upload by clicking the upload button and selecting the file in a native file chooser dialog. At that point the file is stored in the upload button’s value property as a File object. Then the user triggers an event, such as a button click, on the other element.
https://www.wix.com/corvid/reference/$w.UploadButton.html#onChange
onChange( )
Adds an event handler that runs when an input element’s value is changed.
Description
An element receives a change event when a user changes the value in an input element.
A change event is not triggered when you change an element’s value using the element’s value property.
If you can’t set your own appropriate limit within the upload button itself from the Wix Editor.
https://support.wix.com/en/article/adding-and-setting-up-an-upload-button
You will see under the File function the file size code, if you look in API reference for the Upload Button.
https://www.wix.com/corvid/reference/$w.UploadButton.html#File
Examples
Get the files pending upload
let files = $w("#myUploadButton").value;
let fileName = files[0].name; // "mypic.jpg"
let fileSize = files[0].size; // 45941
Have a look at this previous forum post and see the reply from Roi as he gives you a great little code example that could work for your needs.
Plus, there is already a Corvid example with the upload button that you might be interesting in looking at.
Thank you for your input, I will see play around with it some more tonight.