How can I conceal the upload button and still display the names of the files?

Question

How can I conceal the upload button and still display the names of the files?

I created a user-friendly drag and drop zone for uploading multiple files. Users can simply drag their files into the designated drop area and see the file names displayed there. However, I encountered an issue where hiding the standard "Choose file" button using CSS also hides the file names. As a beginner, I'm seeking a simple solution to fix this problem. Thank you!

HTML:

         <div class="drop-area">
            <span class= "drop-area__prompt">Drag Files Here</span>
            <input type="file" name="myFile" class= "drop-area__input">
        </div>

CSS:

.drop-area__input{ 
    display:none;
}

javascript html css file-upload drag-and-drop

Answer 1

Answer №1

It appears to me that utilizing JS is necessary in order to achieve this task. In the example I provided, file upload is initiated by clicking on an emoji. In your situation, you will need to incorporate it into the method that handles drag and 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">Drag files here</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>

Answer 2

It appears to me that utilizing JS is necessary in order to achieve this task. In the example I provided, file upload is initiated by clicking on an emoji. In your situation, you will need to incorporate it into the method that handles drag and 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">Drag files here</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>

How can I conceal the upload button and still display the names of the files?

Answer №1

Similar questions

Looking for assistance with implementing touch gestures on an HTML website?

How to efficiently eliminate redundant entries from an object array using JavaScript or React

Is there a way to obtain the Base64 data following the conversion of a div to an image?

Error encountered: Local HTML file - XMLRequest: Access denied due to network error 0x80070005

Retrieving a String from a Node.js Server using an Ajax POST call

What is the method for specifying the default option in a SELECT Tag and how can the Index of the chosen option be obtained?

Using jQuery to extract the value of an object from an <li> element and updating the class attribute of the <li> element

Unable to collapse the Bootstrap dropdown menu

CSS shimmer effect does not smoothly transition between borders

Having difficulties redirecting with the button's onclick function

Turn off the standard sign in prompt when utilizing the NTLM pass-through method in express-ntlm

Tips for identifying repeating id numbers within a form?

How can I extract the URL from the event listener in Cordova's in-app browser event and then automatically close it once a specific URL is reached?

What is the best way to pass multiple variables to a PHP file with AJAX using a GET request?

In Angular's production build on Webkit/Safari, the left-hand side of the operator '=' must be a reference

Please add color to the space beneath the line in a highchart

Using Bootstrap 5 to beautifully wrap an even quantity of boxes

Developing a basic program that includes iteration, and noticing a small issue that can likely be easily corrected

What is the best way to toggle the display of sibling spans using SCSS?

Tips on invoking a method from a JavaScript object within an AJAX request