HI Guys,
I`ve been coding a form foe my site and all is ok apart from the video upload button i get a file not supported message even though i set file type as “video”
On the same form i have used the same technique for image uploads and its perfect just the video i have this error.
I was wondering what i have missed here as all the forum posts seem to say this is ok ?
thanks
Dan
// Video Function
$w("#videoUploadbutton").fileType = "Video";
export function videoUploadbutton_change(event) {
if($w("#videoUploadbutton").value.length > 0) {
$w("#videoText").text = "Uploading " + $w("#videoUploadbutton").value[0].name;
$w("#videoUploadbutton").startUpload()
.then( (uploadedFile) => {
$w("#videoText").text = "Upload successful";
$w("#videoPlayer").src = uploadedFile.url;
$w("#myCheckinsdataset").setFieldValue("videoUrl", uploadedFile.url)
})
.catch( (uploadError) => {
$w("#videoText").text = "File upload error";
console.log("File upload error: " + uploadError.errorCode);
console.log(uploadError.errorDescription);
});
}
else {
$w("#videoText").text = "Please choose a file to upload.";
}
}
Hey Dan, try something for me, and let’s see if it works. Put the line with
$w("#videoUploadbutton").fileType ="Video";
into the $w.onReady() function that should be at the start of the page. You’re probably going to need to have a reference to the $w function to be able to access the fileType of an element in the Wix Editor.
HI @Chris Derrell
heres the full code i moved it to what i think is in the on ready function but still the same
is this right?
Whats strange is when i look in the collection it actually uploads the video ??? its there in collection just the error is there ?
Thanks
Dan
import wixUsers from 'wix-users';
import wixData from 'wix-data';
import wixLocation from 'wix-location';
let user = wixUsers.currentUser;
let userId = user.id; // "r5cme-6fem-485j-djre-4844c49"
let isLoggedIn = user.loggedIn; // true
$w.onReady(async function () {
$w("#videoUploadbutton").fileType = "Video";
await wixData.query("Members/PrivateMembersData")
.eq("_id", wixUsers.currentUser.id)
.find()
.then( (results) => {
$w('#firstNametextbox').value = results.items[0].firstName;
$w('#lastNametextbox').value = results.items[0].lastName;
$w('#emailAddresstextbox').value = results.items[0].loginEmail;
$w('#phoneNumberTextbox').value = results.items[0].mainPhone;
} );
});
// Video Function
$w("#videoUploadbutton").buttonLabel = "Select Photo"; // "Button label text of button on load"
export function videoUploadbutton_change(event) {
$w("#videoUploadbutton").buttonLabel = "Test After Change"; // "Button label text after change"
if($w("#videoUploadbutton").value.length > 0) {
$w("#videoUploadbutton").buttonLabel = "Uploading" //+ $w("#videoUploadbutton").value[0].name; "If you want to add something more to it"
$w("#videoUploadbutton").startUpload() // "Tells Wix to start the upload and hold it as object before submission"
.then( (uploadedFile) => {
})
.catch( (uploadError) => {
$w("#videoUploadbutton").buttonLabel = "File upload error";
console.log("File upload error: " + uploadError.errorCode);
console.log(uploadError.errorDescription);
});
}
else {
$w("#videoUploadbutton").buttonLabel = "Select Photo";
}
}
// Front Photo Function
$w("#frontPhotouploadbutton").fileType = "Image"; //
$w("#frontPhotouploadbutton").buttonLabel = "Select Photo"; // "Button label text of button on load"
//$w("#frontPhotoclient").hide();
//$w("#frontPhotoexample").show();
export function frontPhotouploadbutton_change(event) {
$w("#frontPhotouploadbutton").buttonLabel = "Test After Change"; // "Button label text after change"
if($w("#frontPhotouploadbutton").value.length > 0) {
$w("#frontPhotouploadbutton").buttonLabel = "Uploading" //+ $w("#frontPhotouploadbutton").value[0].name; "If you want to add something more to it"
$w("#frontPhotouploadbutton").startUpload() // "Tells Wix to start the upload and hold it as object before submission"
.then( (uploadedFile) => {
$w("#frontPhotoclient").show();
$w("#frontPhotoexample").hide();
$w("#frontPhotouploadbutton").buttonLabel = "Upload successful"; // "Button label once upload in complete"
$w("#frontPhotoclient").src = uploadedFile.url; // "Gets a Wix URL from .src file, doesnt appear to be a normal URL"
$w("#myCheckinsdataset").setFieldValue("frontImageUrl", uploadedFile.url)
})
.catch( (uploadError) => {
$w("#frontPhotouploadbutton").buttonLabel = "File upload error";
console.log("File upload error: " + uploadError.errorCode);
console.log(uploadError.errorDescription);
});
}
else {
$w("#frontPhotouploadbutton").buttonLabel = "Select Photo";
}
}
export function submitCheckinbutton_click(event) {
$w('#myCheckinsdataset').setFieldValue('firstName', $w('#firstNametextbox').value);
$w('#myCheckinsdataset').setFieldValue('lastName', $w('#lastNametextbox').value);
$w('#myCheckinsdataset').setFieldValue('emailAddress', $w('#emailAddresstextbox').value);
$w('#myCheckinsdataset').setFieldValue('weightInKg', $w('#weightTextbox').value);
$w('#myCheckinsdataset').setFieldValue('fat', $w('#bodyFattextbox').value);
$w('#myCheckinsdataset').setFieldValue('phoneNumber', $w('#phoneNumberTextbox').value);
$w('#myCheckinsdataset').setFieldValue('howDidYouFeelThisWeek', $w('#commentsTextbox').value);
$w('#myCheckinsdataset').setFieldValue('frontPhoto', $w('#frontPhotoclient').src);
$w('#myCheckinsdataset').save()
console.log("Data Entered")
wixLocation.to("/home");
}
Anyone know what this is ? ive been trying now for 2 days all i get is the Error that
File upload error: -7751
My Check In
Line 273
MP4 files are not supported
Do i need to use a different type of button for video ? or how do i turn off the validation that its looking for image???
I have this in my On ready section
// On Ready Functions
$w.onReady(async function () {
// Data Query On Ready
await wixData.query("Members/PrivateMembersData")
.eq("_id", wixUsers.currentUser.id)
.find()
.then( (results) => {
$w('#firstNametextbox').value = results.items[0].firstName;
$w('#lastNametextbox').value = results.items[0].lastName;
$w('#emailAddresstextbox').value = results.items[0].loginEmail;
$w('#phoneNumberTextbox').value = results.items[0].mainPhone;
console.log("This is " + $w('#firstNametextbox').value + " " + $w('#lastNametextbox').value + " his email is " + $w('#emailAddresstextbox').value + " & his phone number is " + "+" + $w('#phoneNumberTextbox').value)
})
// Video On ready Function
console.log("Video upload text length =" + " " + $w("#videoUploadbutton").value.length + " " + "(No photo selected)");
$w("#videoUploadbutton").fileType = "Video"; // File type selector
$w("#videoUploadbutton").buttonLabel = "Upload Video"; // "Button label text of button on load"
if( $w("#videoClient").hidden ) {
$w("#videoExample").show();
}
else {
$w("#videoExample").hide();}
and this as the export function its the same set up thats works perfect for images just wont accept videos
// Video Upload Button Function
export function videoUploadbutton_change(event) {
console.log("back photo upload text length =" + " " + $w("#videoUploadbutton").value.length + " " + "(photo selected)");
$w("#videoUploadbutton").buttonLabel = "Uploading Please Wait...." //+ $w("#videoUploadbutton").value[0].name; "If you want to add something more to it"
$w("#videoUploadbutton").startUpload() // "Tells Wix to start the upload and hold it as object before submission"
.then( (uploadedFile) => {
$w("#videoUploadbutton").style.backgroundColor = "#FA9869"
$w("#rightSidephotoclient").show()
.then( ( ) => {
console.log("Right side client photo shown");
});
$w("#rightSidephotoexample").hide("fade",fadeOption)
.then( ( ) => {
console.log("Right side example photo faded");
});
$w("#rightSidephotoclient").fitMode = "fit"
$w("#videoUploadbutton").buttonLabel = "Upload successful"; // "Button label once upload in complete"
$w("#videoClient").src = uploadedFile.url; // "Gets a Wix URL from .src file, doesnt appear to be a normal public URL"
//$w("#myCheckinsdataset").setFieldValue("rightSideImageUrl", uploadedFile.url) // This way creates a image in collection but as a WIX URL but you see an image
let src = $w("#rightSidephotoclient").src;
let videoPublicurlLink = "https://static.wixstatic.com/media/" + src.split("/")[3]; // Converts the WIX URL to a public URL
$w("#myCheckinsdataset").setFieldValue("videoUrl", videoPublicurlLink) // This will upload the converted public URL to a URL field in collection.
console.log(videoPublicurlLink); // Just a checker so we can see whats happening in the log.
})
.catch( (uploadError) => {
$w("#videoUploadbutton").buttonLabel = "File upload error";
$w("#videoErrortext").show();
$w('#videoErrortext').text = uploadError.errorDescription
console.log("File upload error: " + uploadError.errorCode);
console.log(uploadError.errorDescription);
});
}
HI i just solved this issue myself.
this line of code needs to go just under your export function to make it work.
$w("#videoUploadbutton").fileType = "Video"; // File type selector
// Video Upload Button Function
export function videoUploadbutton_change(event) {
$w("#videoUploadbutton").fileType = "Video"; // File type selector
console.log("back photo upload text length =" + " " + $w("#videoUploadbutton").value.length + " " + "(photo selected)");
$w("#videoUploadbutton").buttonLabel = "Uploading Please Wait...." //+ $w("#videoUploadbutton").value[0].name; "If you want to add something more to it"
$w("#videoUploadbutton").startUpload() // "Tells Wix to start the upload and hold it as object before submission"
.then( (uploadedFile) => {
$w("#videoUploadbutton").style.backgroundColor = "#FA9869"
$w("#rightSidephotoclient").show()
.then( ( ) => {
console.log("Right side client photo shown");
});
$w("#rightSidephotoexample").hide("fade",fadeOption)
.then( ( ) => {
console.log("Right side example photo faded");
});
$w("#rightSidephotoclient").fitMode = "fit"
$w("#videoUploadbutton").buttonLabel = "Upload successful"; // "Button label once upload in complete"
$w("#videoClient").src = uploadedFile.url; // "Gets a Wix URL from .src file, doesnt appear to be a normal public URL"
//$w("#myCheckinsdataset").setFieldValue("rightSideImageUrl", uploadedFile.url) // This way creates a image in collection but as a WIX URL but you see an image
let src = $w("#rightSidephotoclient").src;
let videoPublicurlLink = "https://static.wixstatic.com/media/" + src.split("/")[3]; // Converts the WIX URL to a public URL
$w("#myCheckinsdataset").setFieldValue("videoUrl", videoPublicurlLink) // This will upload the converted public URL to a URL field in collection.
console.log(videoPublicurlLink); // Just a checker so we can see whats happening in the log.
})
.catch( (uploadError) => {
$w("#videoUploadbutton").buttonLabel = "File upload error";
$w("#videoErrortext").show();
$w('#videoErrortext').text = uploadError.errorDescription
console.log("File upload error: " + uploadError.errorCode);
console.log(uploadError.errorDescription);
});
}
You dont need it in the onready section like this
// Video On ready Function
console.log("Video upload text length =" + " " + $w("#videoUploadbutton").value.length + " " + "(No video selected)");
$w("#videoUploadbutton").fileType = "Video"; // File type selector
$w("#videoUploadbutton").buttonLabel = "Upload Video"; // "Button label text of button on load"
if( $w("#videoClient").hidden ) {
$w("#videoExample").show();
}
else {
$w("#videoExample").hide();}
Hey Dan, just getting to look back at this, glad to hear you solved the main issue with the file type!
@chris-derrell no probs thanks for your help
