Member help

` ); } } const spinner = ''; form.getFormElem().closest("body").append(spinner); /** * This module is responsible for handling file input fields on the dom. * There are at anytime 1-3 file input fields. * * When user selects a file then module will add another file input field to the dom, * (provided that the LIMIT has not been reached). Also if user deselects a file * input field the module will delete file input field to the bottom (if it is not * the bottom input field) */ const fileInputListModule = (function ($fileInput, $) { const fileInputList = []; const fileInputContainer = formEle.querySelector('.file-input-container'); let incrementor = 0; let $fileError = null; // Initialize the first file input field already on DOM fileInputList.push($fileInput); $fileInput.change(handleChange); /** * Provides a copy of the fileInputList */ function getFileList() { return fileInputList.slice(0); } function setFileError(fileName,errorMsg) { fileName.closest(".mktoFormRow").find(".mktoError").remove(); fileName.parent().after( `` ); fileName[0].classList.add("mktoInvalid"); } function removeFileError(fileName) { $(fileInputContainer).find(".mktoError").remove(); fileName[0]?.classList.remove("mktoInvalid"); } function handleDeleteBtn(e) { const target = e.currentTarget; const $inputEl = $(target.parentNode).closest('.input-upload-wrapper').find('input'); const inputIndex = findIndex($inputEl); if (inputIndex > -1 && LIMIT > 1) { removeInput(inputIndex); } else { // If there's only a single upload field, just remove the delete button target.removeEventListener('click', handleDeleteBtn); target.remove(); $inputEl.removeClass('hideChooseButton'); $inputEl.val(''); } // When the number of input fields reaches the limit and one of them is removed, add // an input field with the Choose File button visible if (fileInputList.every($input => $input.hasClass('hideChooseButton')) || !fileInputList?.length) { addNewInput(false); } // when Upload Required is checked and all input with a file is removed, show the error if (uploadRequired && fileInputList.every($input => !$input.val().length)) { setFileError(fileInputList[fileInputList.length - 1], "This is required") } } function addDeleteBtn(el) { const ariaLabel = "Remove file"; el.parentNode.insertAdjacentHTML('beforeend', `>`); const deleteBtn = el.parentNode.querySelector('button'); if (deleteBtn) { deleteBtn.addEventListener('click', handleDeleteBtn) } } function removeDeleteBtn($el) { const $btn = $el.next(); if($btn.is('button')) { $btn.remove(); } } /** * Adds a new file input to the DOM */ function addNewInput(hideChooseButton = true) { let length = fileInputList.length; let $lastElement = fileInputList[length - 1]; if (hideChooseButton) { $lastElement[0].classList.add("hideChooseButton"); } incrementor += 1; const newInput = `

Upload File

` $lastElement.parent().after(newInput); const $lastEle = $lastElement.parent().next().find('input'); $lastEle.change(handleChange); fileInputList.push($lastEle); if (!$lastElement.next().is('button')) { addDeleteBtn($lastElement[0]); } } /** * removes input field from the list and DOM * * @param {number} index */ function removeInput(index) { const $input = fileInputList[index]; $input.off("change"); $input.parent().remove(); fileInputList.splice(index, 1); } function findIndex($input) { let length = fileInputList.length; let index = -1; fileInputList.forEach((fileInput, i) => { if ($input.prop("id") && ($input.prop("id") === (fileInput).prop("id"))) { index = i; } }) return index; } function findIndexByFileName(name) { let length = fileInputList.length; let index = -1; for (let i = 0; i < length; i++) { if ($input.val() === name) { index = i; } } return index; } /** * Handles on change event for all file input fields created by module */ function handleChange(event) { const $fileInput = $(event.target); const length = fileInputList.length; const index = findIndex($fileInput); const lastPossibleIndex = length - 1; const $lastEle = fileInputList[length - 1]; // When adding a file if ($fileInput.val()) { const fileSize = $fileInput[0].files[0]?.size / 1024 / 1024; // in MiB const fileExtension = $fileInput[0].files[0]?.name?.split('.').pop().toLowerCase(); if (fileSize > 30) { setFileError($fileInput, "Your file exceeds the maximum size limit of 30MB. Please select a smaller file"); document.querySelector('.mktoButton').disabled = true; return false; } else if(fileSize < 30) { if(fileExtension ==='pdf' || fileExtension ==='doc' || fileExtension ==='docx' || fileExtension ==='ppt' || fileExtension ==='pptx' ) { removeFileError($fileInput); document.querySelector('.mktoButton').disabled = false; } else { setFileError($fileInput,"You can upload pdf, doc, docx, ppt, pptx file types. Jpeg, jpg, png, gif, and txt file formats are not permitted. Please select another file"); document.querySelector('.mktoButton').disabled = true; return false; } } else { removeFileError($fileInput); document.querySelector('.mktoButton').disabled = false; // Proceed further } if (length < LIMIT && index === lastPossibleIndex) { addNewInput(); } if (LIMIT === length) { $lastEle[0]?.classList.add(HIDE_CHOOSE_BUTTON); addDeleteBtn($lastEle[0]); } } else { // When removing a file // when Upload Required is checked and all input with a file is removed, show the error if (uploadRequired && fileInputList.every($input => !$input.val().length)) { setFileError($lastEle, "This is required") } if (LIMIT > 1) { removeInput(index); } else { // If the LIMIT is only 1, re-enable the Choose File button and remove the delete button $fileInput.removeClass(HIDE_CHOOSE_BUTTON); removeDeleteBtn($fileInput); } // If the limit is reached and one of the input is removed, add an input with the Choose File // button enabled if (fileInputList.every($input => $input.hasClass(HIDE_CHOOSE_BUTTON)) || !fileInputList?.length) { addNewInput(false); } } } return { getFileList: getFileList, findIndexByFileName: findIndexByFileName, setFileError: setFileError, removeFileError: removeFileError, }; })(jQuery("#uploadFileInput"), jQuery); //on submit make call to create assets in DAM and then submit Marketo form in success $(document).on( "click", "button[type='submit'].mktoButton", function (event) { //stop submit the form, we will post it manually. event.preventDefault(); const getPath = "\/bin\/mercer\u002Ddotcom\/services\/rfp_upload.attachment.json"; let $submitButton = $(this); let fileList = fileInputListModule.getFileList(); // if user did not select any files const inputsWithFileUpload = fileList.filter($fileupload => $fileupload.hasClass(HIDE_CHOOSE_BUTTON)) const uploadfiles = inputsWithFileUpload.length && inputsWithFileUpload.every($fileInput => $fileInput?.[0]?.files?.length); if (form.validate() && !uploadfiles && !uploadRequired) { form.submit(); } else { // If Upload Required is checked and no file is added if (uploadRequired && !uploadfiles) { fileList.forEach(function ($fileInput) { if(!$fileInput.prop("files")?.[0]) { $fileInput.addClass('mktoInvalid') } else { $fileInput.removeClass('mktoInvalid') } }); const fileInputList = fileInputListModule.getFileList(); fileInputListModule.setFileError(fileInputList[fileInputList.length - 1], "This is required") return; } // If any of the required form fields is not filled out if (!form.validate()) { return; } document.querySelector(".overlay").style.display = "block"; // Get the file input data let data = new FormData(); fileList?.forEach(function ($fileInput, index) { if ($fileInput?.[0]?.files?.length) { data.append("file" + index, $fileInput.prop("files")[0]); } }); let $assetPathFolder = ""; if ($assetPathFolder) { data.append("damUploadPath", $assetPathFolder); } $.ajax({ type: "POST", enctype: "multipart/form-data", url: getPath, data: data, dataType: "json", processData: false, contentType: false, cache: false, timeout: 600000, success: function (data) { // Find all the hidden form fiels for the uploaded file url const formEl = form.getFormElem()[0]; const hiddenFileUrlInput1 = formEl.querySelector("input[name='uploadedDocumentURL']") const hiddenFileUrlInput2 = formEl.querySelector("input[name='uploadeddocumenturl2']") const hiddenFileUrlInput3 = formEl.querySelector("input[name='uploadeddocumenturl3']") const hiddenFileInputs = { 0: hiddenFileUrlInput1, 1: hiddenFileUrlInput2, 2: hiddenFileUrlInput3, } const uploadedFilePaths = (Object.values(data) || []).map(file => file); // Assign the uploaded files to the hidden input value uploadedFilePaths.forEach((fileName, index) => { if(hiddenFileInputs[index] && fileName) { hiddenFileInputs[index].value = fileName } }) form.submit(); document.querySelector(".overlay").style.display = "none"; }, error: function (e) { // let data = JSON.parse(e); // If a file failed to upload // An error occured on the server document.querySelector(".overlay").style.display = "none"; setTimeout(() => { alert( "Oops. Your upload failed. Please try again." ); }, 1000); }, }); } // end of else } ); // end on submit }); // end marketo form load } }

Thank you for contacting Mercer Super.

Download (PDF) now