Skip to content

Instantly share code, notes, and snippets.

@Crocoblock
Forked from dislokacia/text_after_upload.js
Last active June 22, 2024 20:37
Show Gist options
  • Save Crocoblock/0ac9f6c1e7e83ab5baa2f4f4890dc6e5 to your computer and use it in GitHub Desktop.
Save Crocoblock/0ac9f6c1e7e83ab5baa2f4f4890dc6e5 to your computer and use it in GitHub Desktop.
JetFormbuilder media field text after upload
<script>
document.addEventListener( 'DOMContentLoaded', function() {
const {
addAction,
} = window.JetPlugins.hooks;
const textChoose = 'Choose File';
const textUpload = 'File Uploaded';
function getFileNames( fileList ) {
if ( ! fileList.length ) {
return '';
}
let names = [];
for ( const file of fileList ) {
if ( file.name ) {
names.push( file.name );
}
}
return names.join( ', ' );
}
addAction(
'jet.fb.input.makeReactive',
'set-upload-labels',
function( input ) {
if ( input?.nodes?.length < 1 ) {
return;
}
if ( ! input.nodes[0].classList.contains( 'jet-form-builder-file-upload__input' ) ) {
return;
}
const $ = jQuery;
const upload = $( input.nodes[0] );
const fields = $( input.nodes[0].closest( '.jet-form-builder-file-upload__fields' ) );
fields.append( `<input type="button" class="addfile" value="${textChoose}"/>` );
fields.append( `<label class="labeladdfile">${textChoose}</label></div>` );
const labelAdd = fields.find( '.labeladdfile' );
const buttonAdd = fields.find( '.addfile' );
$( input.nodes[0] ).css( 'display', 'none' );
buttonAdd.click( function () {
upload.trigger( 'click' );
} );
input.value.watch( function() {
if ( this.current.length ){
buttonAdd.attr( 'value', textUpload );
labelAdd.html( getFileNames( this.current ) || textUpload );
} else {
labelAdd.html( textChoose );
buttonAdd.attr( 'value', textChoose );
}
} )
}
);
} );
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment