Link copied!
September challenge in SPICE 🍁 !
Level 1 experiences
1
Try on the coziest autumn outfit in Spiace and snap a photo 🧣!
{
const file = $refs.activityFile.files[0];
if (!file) {
console.error('No file selected.');
return;
}
if (file.type.startsWith('image/')) {
new Compressor(file, {
quality: 0.8,
maxWidth: 2000,
maxHeight: 2000,
retainExif: true,
mimeType: 'image/jpeg',
success(compressedFile) {
Alpine.store('uploader').uploadFile(compressedFile, $wire, $data);
},
error(err) {
console.error('Compression error:', err.message);
},
});
} else if (file.type.startsWith('video/')) {
const video = document.createElement('video');
video.preload = 'metadata';
video.src = URL.createObjectURL(file);
video.onloadedmetadata = () => {
URL.revokeObjectURL(video.src); // clean up
console.log(video.duration);
if (video.duration > 30) {
Alpine.store('videoUpload').file = file;
Alpine.store('videoUpload').previewUrl = URL.createObjectURL(file);
Alpine.store('uploader').componentId = $wire.__instance.id;
$dispatch('open-modal', {
modal: 'trim-activity-video',
params: {
activityId: 23,
fileName: file.name,
fileSize: file.size
},
fullscreen: true
});
$refs.activityFile.value = ''; // Resetting the activityFile input value since we anyway have it in the store. Reason being, so the user can select the same file again if they choose to close the modal.
} else {
Alpine.store('uploader').uploadFile(file, $wire, $data);
}
}
} else {
console.error('Unsupported file type:', file.type);
}
}"
>
2
Show us the MUST-HAVE autumn decoration you spotted in SPICE!
{
const file = $refs.activityFile.files[0];
if (!file) {
console.error('No file selected.');
return;
}
if (file.type.startsWith('image/')) {
new Compressor(file, {
quality: 0.8,
maxWidth: 2000,
maxHeight: 2000,
retainExif: true,
mimeType: 'image/jpeg',
success(compressedFile) {
Alpine.store('uploader').uploadFile(compressedFile, $wire, $data);
},
error(err) {
console.error('Compression error:', err.message);
},
});
} else if (file.type.startsWith('video/')) {
const video = document.createElement('video');
video.preload = 'metadata';
video.src = URL.createObjectURL(file);
video.onloadedmetadata = () => {
URL.revokeObjectURL(video.src); // clean up
console.log(video.duration);
if (video.duration > 30) {
Alpine.store('videoUpload').file = file;
Alpine.store('videoUpload').previewUrl = URL.createObjectURL(file);
Alpine.store('uploader').componentId = $wire.__instance.id;
$dispatch('open-modal', {
modal: 'trim-activity-video',
params: {
activityId: 30,
fileName: file.name,
fileSize: file.size
},
fullscreen: true
});
$refs.activityFile.value = ''; // Resetting the activityFile input value since we anyway have it in the store. Reason being, so the user can select the same file again if they choose to close the modal.
} else {
Alpine.store('uploader').uploadFile(file, $wire, $data);
}
}
} else {
console.error('Unsupported file type:', file.type);
}
}"
>
Level 2 experiences
Complete Level 1 experiences to unlock