Job application page Example
This example is just a demonstration of how there can be many CustUp instances on a single page.
Sorry, added a bit humour :)
Apply for XYZ position at XYZ company
Open the console to see the output of the request after clicking on submit button
The Code
index.html
<form id="job-form">
<label for="firstname">First Name</label>
<input type="" placeholder="Enter Your Yirst name" id="firstname" name="firstname" value="john" />
<label for="lastname">Last Name</label>
<input type="" placeholder="Enter Your Last name" id="lastname" name="lastname" value="doe" />
<label for="country">Country Name</label>
<select name="country" id="country">
<option disabled value="" value="">Select a country name</option>
<option>Argentina</option>
<option>Germany</option>
<option>Nigeria</option>
<option>United Arab Emirates</option>
<option>United States</option>
<option>United Kingdom</option>
</select>
<div className="note">
Don't worry if your country name is not in the list, it's just an example :)
</div>
<label for="state">State/Region</label>
<select name="state" id="state">
<option disabled value="" value="">Select a state/region</option>
<option>Buenos Aires</option>
<option>Berlin</option>
<option>Abuja</option>
<option>Abu Dhabi</option>
<option>Washington, D.C.</option>
<option>London</option>
</select>
<label for="address">Address</label>
<input type="" placeholder="Enter Your Last name" id="address" name="address" value="1234, fake street, fake town, fake city, Fake Country" />
<label for="container-1">Upload your resume/CV</label>
<div id="container-1" style="margin-bottom: 15px;"></div>
<label for="why-work">Why do you want to work at XYZ?</label>
<textarea name="why-wanna-work" rows="10" id="why-work" placeholder="Tell use why you want to work at XYZ..." value="Because I don't wanna starve to death"></textarea>
<label for="prev-comp">Though we have you've added your CV, now list out all the companies you've for</label>
<textarea name="prev-companies-list" rows="10" id="prev-comp" placeholder="List them out here..." value="I will not, read my CV!"></textarea>
<label for="skills-list">Hey, list out your skills too</label>
<textarea name="skills-list" rows="10" id="skills-list" placeholder="List out your skills here..." value="They are all listed in my CV"></textarea>
<label for="container-2">Now upload your **Cover letter** of 10,000 words</label>
<div id="container-2" style="marginBottom: 15px"></div>
<label for="salary">Salary expectation - must be in your local currency and must not be more than your previous salary</label>
<input type="text" id="salary" name="salary" value="$450,000 USD yearly, note I'm not in the USA but my salary must be paid in the USD" placeholder="Enter your salary" />
<label for="container-3">We need to see your face so upload your latest photo</label>
<div id="container-3" style="margin-bottom: 15px;"></div>
<div style='display: "flex", alignItems: "flex-start"'>
<input type="checkbox" id="agree" name="agree" />
<label for="agree">Do you agree to our privacy policy that we will be selling your data to various vendors that will keep following you in your dreams with job notifications?</label>
**Note:** You must agree
</div>
<div style="color: 'red'" id="message"></div>
<button id="submit" type="button">Submit</button>
</form>
The javascript
index.js
import CustUp from 'https://unpkg.com/custup@latest/src/custup.min.js'
// OR if installed via npm
// import CustUp from '/path/to/custup/src/custup.min.js'
// TypeScript
// import CustUp from '/path/to/custup/'
const inst1 = new CustUp({
targetRootElement: "#container-1",
ui_type: "resumeUploaderUI",
allowed_file_types: ["pdf", "docx"],
maximumAllowedFileSize: 5000000,
css_font_name: "Helvetica",
default_styles_override: {
outerContainer: ["custup_outer_contaner", true]
},
disable_scrollbar: true,
})
const inst2 = new CustUp({
targetRootElement: "#container-2",
ui_type: "bare",
allowed_file_types: ["pdf", "docx"],
maximumAllowedFileSize: 5000000,
css_font_name: "Helvetica",
default_styles_override: {
outerContainer: ["custup_outer_contaner", true]
}
})
const inst3 = new CustUp({
targetRootElement: "#container-3",
ui_type: "profilePicture",
allowed_file_types: ["pdf", "docx"],
maximumAllowedFileSize: 5000000,
css_font_name: "Helvetica",
default_styles_override: {
outerContainer: ["custup_outer_contaner", true]
},
allowed_tools: null,
instance_attach: [inst1, inst2],
single_upload: true,
file_upload: {
form_field: "#job-form"
}
})
setInstance1(inst3)
inst3.addEventListener("upload.beforeStart", (ev) => {
const msgCont = document.querySelector("#message")
msgCont.innerHTML = "";
const fd = ev.detail.formData
console.log("event", ev.detail.formData, document.forms['job-form']['state'].value)
fd.forEach((entry) => console.log(entry))
if(document.forms['job-form']['state'].value == "" || document.forms['job-form']['country'].value == "") {
const msg = "Hm it looks like you've not selected one of the country or state, both must be selected";
msgCont.innerHTML = msg;
return [false];
}
})
document.querySelector("#submit").onclick = () => {
inst3.upload();
}
The CSS
index.css
#job-form {
margin-bottom: 20px;
}
#job-form input:not(input[type=checkbox]),select,textarea {
border-radius: 6px;
border: 1px solid grey;
padding: 10px;
width: 100%;
font-size: 110%;
margin-bottom: 10px;
}
#job-form .note {
font-size: 70%;
color: green;
}
#job-form button {
width: 100%;
background-color: rgb(0, 80, 156);
color: white;
padding: 10px;
border: none;
border-radius: 6px;
}
#job-form button:active {
background-color: rgb(0, 100, 192);
}
Loading default Files
These files were loaded automatically after CustUp finished initializing, all the default files except the picture of a man pushing a rock up the mountain is not uploadable, click on the upload button to try it out.
You can also try adding files.
Note: The provided default files can also be Base64, Blob and File file types.
The code
index.js
const instance1 = new CustUp({
targetRootElement: "#default-files",
default_files: [
{file: 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Lamborghini_Urus_19.09.20_JM_%282%29_%28cropped%29.jpg/800px-Lamborghini_Urus_19.09.20_JM_%282%29_%28cropped%29.jpg', isUploadable: false},
{file: 'https://media.istockphoto.com/id/825383494/photo/business-man-pushing-large-stone-up-to-hill-business-heavy-tasks-and-problems-concept.jpg?s=612x612&w=0&k=20&c=wtqvbQ6OIHitRVDPTtoT_1HKUAOgyqa7YzzTMXqGRaQ=', isUploadable: true},
{file: 'https://i0.wp.com/bloody-disgusting.com/wp-content/uploads/2014/05/luvisi16.jpg?resize=600%2C600&ssl=1', isUploadable: false},
]
})
index.html
<!-- ... -->
<div id="default-files"></div>
<!-- ... -->
More examples in progress