I need to add different design for upload files button and there i need to get the file name using jquery but my jquery no working to get file name . i need to show file name in different design when i am uploading and main choose file i am using visiblity:hidden so that new design will only show..
Hey, @iBusinessFormul 
Can you share a code example? This might help our community members to troubleshoot along with you.
Thanks! — Jaycee
I did design the layout using richtext editor in Hubspot form. so there I want to show the file name anywhere I want and max upload size 2 MB
here is the code:
<script>
document.addEventListener(‘DOMContentLoaded’, function() {
const fileInput = document.querySelector(‘.hs_file_upload .input .hs-input’);
const fileButton = document.querySelector(‘.hs-richtext’);
const fileNameDisplay = document.querySelector(‘.file-upload-info’);
fileInput.addEventListener(‘change’, function() {
if (fileInput.files.length > 0) {
fileNameDisplay.textContent = fileInput.files[0].name;
} else {
fileNameDisplay.textContent = ‘No file chosen’;
}
});
} else {
console.error(‘File input or button not found’);
}
});
</script>
Okay that I understand. You want a module where a user can upload a file if its less than 2 MB. So I guess the issue you are facing is when a file is uploaded you want to show its name on the module. Am I correct?
I hope this will help you out. Please mark it as Solution Accepted and upvote to help another Community member.
Thanks!
Hi @GRajput @Jaycee_Lewis
yeah, I want to get that name of that file and show to the a custom design that i did cause real choose file option i did hide due to design and that file need to equal or less then 2mb in my hubspot form.how could i acheive this please suggest me waiting for reply !!
thanks
can u please reply !
From where do you want to get file names? Is that directory on any server or something like that?
Please provide some more information so we can help you out.
Thanks!
I want to get file names in my jquery or javascript so that I can assign its on my custom class anywhere in my design . currently its not getting here is my code:
<script>
document.addEventListener(‘DOMContentLoaded’, function() {
const fileInput = document.querySelector(‘.hs_file_upload .input .hs-input’);
const fileButton = document.querySelector(‘.hs-richtext’);
const fileNameDisplay = document.querySelector(‘.file-upload-info’);
if (fileInput && fileButton) {
fileButton.addEventListener(‘click’, function() {
fileInput.click();
});
fileInput.addEventListener(‘change’, function() {
if (fileInput.files.length > 0) {
fileNameDisplay.textContent = fileInput.files[0].name;
} else {
fileNameDisplay.textContent = ‘No file chosen’;
}
});
} else {
console.error(‘File input or button not found’);
}
});
</script>
I did design the layout using richtext editor in hubspot form. so there I just want to show the file name anywhere I want and max upload size 2 mb