diff --git a/docs/apply/index.html b/docs/apply/index.html
index f44088e..9c96f36 100644
--- a/docs/apply/index.html
+++ b/docs/apply/index.html
@@ -29,8 +29,12 @@ Apply to Open Gallery
-
-
+
+
+
+
diff --git a/docs/apply/script.js b/docs/apply/script.js
index d44edd8..f136ad6 100644
--- a/docs/apply/script.js
+++ b/docs/apply/script.js
@@ -1,3 +1,53 @@
+const allowedTypes = ['image/jpeg', 'image/png', 'image/webp'];
+
+function showThumbnailPreview(files) {
+ const previewContainer = document.getElementById('image-preview');
+ previewContainer.innerHTML = '';
+ validateImages(files);
+
+ for (const file of files) {
+ if (!file.type.startsWith('image/')) continue;
+
+ const img = document.createElement('img');
+ img.classList.add('w-24', 'h-24', 'object-cover', 'rounded-md', 'border', 'border-gray-300');
+ img.file = file;
+ previewContainer.appendChild(img);
+
+ const reader = new FileReader();
+ reader.onload = (e) => {
+ img.src = e.target.result;
+ }
+ reader.readAsDataURL(file);
+ }
+}
+
+
+function validateImages(files) {
+ if (files.length === 0 || files.length > 5) {
+ showToast('Upload at least one image and no more than five.');
+ return false;
+ }
+
+ for(const file of files){
+ if(!allowedTypes.includes(file.type)) {
+ showToast(`${file.name} must be JPG, PNG or WEBP.`);
+ return false;
+ }
+
+ if(file.size > 5 * 1024 * 1024) {
+ showToast(`${file.name} file must be less than 5MB.`);
+ return false;
+ }
+ }
+ return true;
+}
+
+function resetForm(form) {
+ form.reset();
+ document.getElementById('image_files').value = '';
+ document.getElementById('image-preview').innerHTML = '';
+}
+
function showToast(message) {
const toast = document.getElementById('toast');
toast.textContent = message;
@@ -7,37 +57,53 @@ function showToast(message) {
}, 3000);
}
+document.getElementById('image_files').addEventListener('change', function(e) {
+ if (e.target.files.length > 0) {
+ showThumbnailPreview(e.target.files);
+ }
+});
+
document.getElementById('application-form').addEventListener('submit', async function(e){
e.preventDefault();
+ const uploadedFiles = e.target.image_files.files;
+ if(!validateImages(uploadedFiles)) {
+ return;
+ }
const form = e.target;
const url = 'https://open-gallery-backend-fqg5epekaah2e9da.centralus-01.azurewebsites.net/api/artist-application';
- const payload = {
+ const artistPayload = {
name: form.name.value.trim(),
email: form.email.value.trim(),
location: form.location.value.trim(),
portfolio: form.portfolio.value.trim(),
- image_links: form.image_links.value.trim(),
website: form.website.value.trim()
}
- console.log('Submitting application:', payload);
+
try {
- const response = await fetch(url, {
+ const applicationResponse = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
- body: JSON.stringify(payload)
+ body: JSON.stringify(artistPayload)
});
- if (!response.ok) {
- const errorText = await response.text();
+ if(!applicationResponse.ok) {
+ const errorText = await applicationResponse.text();
+ resetForm(form);
showToast(errorText);
- } else {
- showToast('Application submitted successfully');
- form.reset();
+ return;
}
+
+ const { applicationId } = await applicationResponse.json();
+ await uploadToBlobStorage(applicationId, uploadedFiles);
+
+ // finalize application with backend
+
+ showToast('Application submitted successfully!');
+ resetForm(form);
} catch (error) {
- showToast('Application failed... please try again later');
+ showToast('Application failed. Please try again later');
}
})
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 2b449c1..c091025 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -74,6 +74,9 @@
Welcome to Open Gallery
Privacy Policy
+
+
+