JetFormbuilder - Media field new functions + New design (Code exmaples added)

[Lonsdale201]

@girafffee Sorry, I couldn't stand it. :)

I'm not the only one who would be happy if the look of the media field could be partially customized and if additional functionality could be added to the field.

The new features below would be nice to have in the future:

Limit file size for example: minimum 500*500px image must be More customization drag n drop function

EXTRA

https://github.com/Crocoblock/suggestions/issues/6311 - JetFormbuilder - Enchantments (Code examples added)

With the following code, except for Drag n Drop (for now), you have the possibility to customize the look of the media field and you can specify an image size checker

Please note that these codes are "activated" after the page is loaded, this means that if there is no match in the dom because you use a separate script to call the form, or dynamic visibility, it will not be applied. It can be solved with mutationobserve or e.g. delegation code. In my project, there is no such thing, that's why it was not included. For jetpoup, there is no problem, because they are already in the dom, so the script will be valid for the included form (if you use it)

*1, Full New media upload design + image size checker (Min or equal 500500px image can upload) . Only support single image upload!**

/ This is a full custom upload button with upload restriction. The uploaded image must min(or equal) 500500px height and width, This script will create a new upload button (div, not buttom html element) Dont forget you need to add your own class name for the media upload field, and you will need replace your Classname, or use mine : media_button Example image: https://prnt.sc/d3INFRfwFLz3

This code will add a new button + parent div, and also a new container "jfb--maincontainer" */

<script>
function addUploadButton() {
  let fileUploadFields = document.querySelectorAll('.jet-form-builder-file-upload__fields');
  if (!fileUploadFields.length) {
    return;
  }
  fileUploadFields.forEach(function(fileUploadField) {
    const parentElement = fileUploadField.parentElement;
    parentElement.classList.add('jfb--maincontainer');

    // create a new container--myfileupload class
    const container = document.createElement('div');
    container.classList.add('container--myfileupload');
    fileUploadField.parentElement.appendChild(container);

    // here create a new upload button uploadButton elemet
    const uploadButton = document.createElement('div');
    uploadButton.textContent = 'Upload'; /* Owerwrite the button text here */
    uploadButton.classList.add('myfileupload--input');
    // The new  uploadButton add to the  container--myfileupload class
    container.appendChild(uploadButton);

    const fileInput = fileUploadField.querySelector('.jet-form-builder-file-upload__input');
    uploadButton.addEventListener('click', function(event) {
      event.preventDefault();
      fileInput.click();
    });
    fileInput.addEventListener('change', function() {
      let file = fileInput.files[0];
      let reader = new FileReader();
      reader.addEventListener('load', function() {
        let image = new Image();
        image.addEventListener('load', function() {
          if (image.width < 500 || image.height < 500) {
  window.alert('This image not met the  required size min - 500*500px '); /* Overwrite the message */
  fileInput.value = '';
  let fileElement = document.querySelector('.jet-form-builder-file-upload__file');
  let removeButton = fileElement.children[1];
  removeButton.click();
          } else {
            const originalButton = fileUploadField.querySelector('.media_button'); /* This is a custom class name for the media field. You can add your own class name here: https://prnt.sc/d3INFRfwFLz3  note: this is required! */
            if (originalButton) {
 let wfdId = originalButton.getAttribute('wfd-id');
              if (wfdId) {
                uploadButton.setAttribute('wfd-id', wfdId);
              }
            }
          }
        });
        image.src = reader.result;
      });
      reader.readAsDataURL(file);
    });
    const originalButton = fileUploadField.querySelector('.media_button');  /* This is a custom class name for the media field. You can add your own class name here: https://prnt.sc/d3INFRfwFLz3  note: this is required! */
    uploadButton.setAttribute('data-max_size', originalButton.getAttribute('data-max_size'));
        uploadButton.setAttribute('accept', originalButton.getAttribute('accept')); /* Delete this line if you dont set the MIME types */
    uploadButton.setAttribute('data-form_id', originalButton.getAttribute('data-form_id'));
  });
}

window.addEventListener('DOMContentLoaded', addUploadButton);
</script>

<style>

    .jfb--maincontainer::after {
  font-family: "Font Awesome 5 Free";
        font-weight: 900;
  content: "\f382"; /* Font awesome unicode, but you can use other, like svg, image etc.. */
  font-size: 36px;
  color: #333;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
        display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
}

    .jet-form-builder-file-upload__message small {
display: none; /* use the field desciprtion to inform the max file size limit  */
}

.jet-form-builder-file-upload__content {
    max-height: 1024px;
    max-width: 1024px;
    z-index: 2;
    }   

.myfileupload--input {
cursor: pointer;

background-color:  #ff5757;
font-family: "Outfit";
font-size: 18px;
font-weight: 600;
border-style: solid;
border-color:  #ff5757;
border-radius: 0;
width: 150px;
color: white;
padding: 10px;
text-align: center;
margin: auto;
}

.jet-form-builder-file-upload__fields .media_button{
display: none;
}

.jfb--maincontainer{
background-color: #efefef;
padding: 25px;
border: dashed 1px #ff5757;
display: flex;
flex-direction: column;
align-items: center;
}
.jet-form-builder-file-upload__input {
padding: 15px;
background-color: #ff5757;
}

    .jet-form-builder-file-upload__file {
    width: 150px !important;
        height: 125px !important;
        margin-bottom: 15px !important;
        margin-right: 0px !important;
    }

    .jet-form-builder-file-upload__file {
background-image: none !important;
        background-color: unset !important;
    }

    .jet-form-builder-file-upload__file-invalid-marker {
        display: none!important;
    }
</style>

*2, Image size checker (not include new button) Global version (apply every media field) - restrict - Max or equal 1024px1024px can upload**

<script>
/* 
Only work with single image upload, not gallery !
RULE = If the uploaded image bigger than 1024px*1024px cant upload. (accept only lower, or equal)
this is a global script run with every media field
*/
function checkFileSize() {
let fileUploadField = document.querySelector('.jet-form-builder-file-upload__fields');
const fileInput = fileUploadField.querySelector('.jet-form-builder-file-upload__input');
fileInput.addEventListener('change', function() {
let file = fileInput.files[0];
let reader = new FileReader();
reader.addEventListener('load', function() {
let image = new Image();
image.addEventListener('load', function() {
if (image.width > 1024 || image.height > 1024) {
  window.alert('The uploaded image size too BIG, choose smaller');
  fileInput.value = '';
  let fileElement = document.querySelector('.jet-form-builder-file-upload__file');
  let removeButton = fileElement.children[1];
  removeButton.click();
}
});
image.src = reader.result;
});
reader.readAsDataURL(file);
});
}

window.addEventListener('DOMContentLoaded', checkFileSize);    

</script>

*3, Image size checker (not include new button) Global version (apply every media field) - restrict - min or equal 500500px can upload**

<script>
/* 
Only work with single image upload, not gallery !
RULE = If the uploaded image size not MININMUM (greater or equal) 500*500px cant upload.

*/
function checkFileSize() {
let fileUploadField = document.querySelector('.jet-form-builder-file-upload__fields');
const fileInput = fileUploadField.querySelector('.jet-form-builder-file-upload__input');
fileInput.addEventListener('change', function() {
let file = fileInput.files[0];
let reader = new FileReader();
reader.addEventListener('load', function() {
let image = new Image();
image.addEventListener('load', function() {
if (image.width < 500 || image.height < 500) {
window.alert('The image size too small, choose another.');
fileInput.value = '';
let fileElement = document.querySelector('.jet-form-builder-file-upload__file');
let removeButton = fileElement.children[1];
removeButton.click();
}
});
image.src = reader.result;
});
reader.readAsDataURL(file);
});
}

window.addEventListener('DOMContentLoaded', checkFileSize);    

</script>

*4, Image size checker (not include new button) Single target version restrict - Max or equal 1024px1024px can upload**

<script>
/* 
Only work with single image upload, not gallery !

RULE = If the uploaded image bigger than 1024px*1024px cant upload. (accept only lower, or equal)

This scirpt only work with these upload fields id: [id="my-media-field"]

The only thing you need to do is replace the ID you entered for your media field in the code here: FORM FIELD NAME

Example image: https://prnt.sc/LVHpgVn9uJvN
*/

function checkFileSize() {
  let fileUploadField = document.querySelector('input#my-media-field'); /* replace the  #my-media-field or use this */
  fileUploadField.addEventListener('change', function() {
    let file = fileUploadField.files[0];
    let reader = new FileReader();
    reader.addEventListener('load', function() {
      let image = new Image();
      image.addEventListener('load', function() {
        if (image.width > 1024 || image.height > 1024) {
          window.alert('The uploaded image size too BIG, choose smaller'); /* overwrite the massage here */
          fileUploadField.value = '';
          let fileElement = document.querySelector('.jet-form-builder-file-upload__file');
          let removeButton = fileElement.children[1];
          removeButton.click();
        }
      });
      image.src = reader.result;
    });
    reader.readAsDataURL(file);
  });
}

window.addEventListener('DOMContentLoaded', checkFileSize);  
</script>

[Galph]

Thank you for creating this! I really like the image uploader. We just need Croco to add similar functionality to the form and also add the ability to crop an image before it is saved for profile pictures.