隐藏文件上传按钮但显示文件名？

Question

I made a simple drag and drop zone for multiple file uploads. I want the user to just drag their files into the drop zone and have the file names be displayed there. I hid the standard "Choose file" button by setting 'display: none' in CSS. But that also hides the file names. Is there a simple way to fix this? I'm a beginner. Thank you!

HTML:

         <div class="drop-area">
            <span class= "drop-area__prompt">Dateien hier her ziehen</span>
            <input type="file" name="myFile" class= "drop-area__input">
        </div>

CSS:

.drop-area__input{ 
    display:none;
}

Answer 1

It seems to me, there is no way to do it without using JS. In my example, file upload triggered by the click on emoji. In your case, you have to put it in the method where you handle drag&drop.

 let fileUpload = document.getElementById('fileUpload'); let fileName = document.getElementById('fileName'); fileUpload.addEventListener('change', function(){ if(this.files.length) fileName.innerText = this.files[0].name; else fileName.innerText = ''; });

 <div class="drop-area"> <span class= "drop-area__prompt">Dateien hier her ziehen</span> <span id="fileName"></span> <label> <img height="30" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/237/outbox-tray_1f4e4.png"/> <input id="fileUpload" type="file" name="myFile" class= "drop-area__input" style="display:none;"> </label> </div>