So i'm using a joomla component (rsformspro) that produces dynamic input(file type) fields into a html form.
I have a listener which checks the file selected is landscape and below a certain filesize. When the file doesn't meet the requirements. The file value is cleared(value =''). This works.
i also have an add file button. The script won't fire on this button after a new input field has been added to the dom.
i have used jquery on function with change. Which works, as far as my script runs. but the resetting of value doesn't work. i know i'm 99% of the way. just need the last part to reset the current input field field. html below:
<div class="formBody" style="background-size: cover;">
<div class="rsfp-field-multiple-plus" style="background-size: cover;"><input type="file" name="form[image_upload_gallery][]" id="image_upload_gallery" data-rsfp-skip-ajax="true" class="rsform-upload-box" data-rsfp-minfiles="1" data-rsfp-maxfiles="20" data-rsfp-exts="["jpeg","jpg","png","gif","zip"]"></div><button type="button" class="rsfp-field-multiple-plus-button" data-rsfp-maxfiles="20" data-rsfp-formid="4" onclick="RSFormPro.addMoreFiles(this);">Add another file</button>
<span class="formValidation"><span id="component47" class="formNoError">Invalid Input</span></span>
<p class="formDescription"></p>
<div class="rsfp-field-multiple-plus" style="background-size: cover;"><input type="file" name="form[image_upload_gallery][]" id="image_upload_gallery" data-rsfp-skip-ajax="true" class="rsform-upload-box" data-rsfp-minfiles="1" data-rsfp-maxfiles="20" data-rsfp-exts="["jpeg","jpg","png","gif","zip"]"></div></div>
image of input field "Image upload Gallery"
Below is the jquery/javascript:
/*testing second image capture for the gallery field */
var file_holder2 = jQuery(".formBody input:file").on('change',function (e) {
var file, img;
var widescreen = 16/9;
var standard = 4/3;
console.log('image upscript script is active value of file is: '+jQuery('input[type=file]').val());
if ((file = this.files[0])) {
//alert('filesize is'+file.size);
img = new Image();
img.onload = function () {
var userRatio = this.width / this.height;
if(userRatio == widescreen && this.width > 600 && file.size < 1002400)//make sure image is 16/9, width less than 600 px & filesize less than 1mb
{
//all is ok and it can be uploaded.
}else{
alert("Please make sure your image is:\n 1: Landscape (16:9 ratio).\n 1024px x 768px is recommended (jpeg or PNG)\n 2: No more than 1mb in size.\n 3: Width must be 600px minimum.\n\n Please try again with another image \filename is :"+this.value);
//jQuery(this).closest('div').remove();
//jQuery(this).hide();
//file.value='';
file_holder2.val('');
//file_holder2.value = '';
//jQuery(this).val('');
//this.files[0].value='';
//this.value=null;
}
};
img.src = _URL.createObjectURL(file);
}
});
This is inside a doc ready function.
The above script works for the 1st file field. But when a second is added. The script doesn't fire.
When i add a second parameter 'rsform-upload-box' to the on change function like below:
var file_holder2 = jQuery(".formBody input:file").on('change','rsform-upload-box',function (e) {
Then the script doesn't fire.
So just need to know what i need to make any newly added input value set to null.
