One button for file select and upload

Question

I have to create only one button which selects the file and uploads too.. I created one button which selects the file but it doesn't fire the onclick function in the upload button.

For an example I have one hello button which just consoles something but in reality it will do something with the selected file.

    <div class="upload-btn-wrapper">
       <button class="btn" onClick ="hello()">Upload a file</button>
       <input type="file" name="myfile"/>
    </div>



.upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.btn {
  border: 2px solid gray;
  color: gray;
  background-color: white;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 20px;
  font-weight: bold;
}

.upload-btn-wrapper input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}


function hello() {
 console.log("hello");
}

Link for codePen: https://codepen.io/anon/pen/wOmNJw

Answer 1

The input is overriding the button click listener. If you are trying to do something with the file then you should apply a change listener to the input and run a function there. You can do this with or without jquery.

Vanilla JS (No Jquery)

 document.getElementsByName('myfile')[0].addEventListener('change', function(){ hello(this); }); function hello(elem) { console.log('Hello'); console.log('File Name: ', elem.value); } 

 .upload-btn-wrapper { position: relative; overflow: hidden; display: inline-block; } .btn { border: 2px solid gray; color: gray; background-color: white; padding: 8px 20px; border-radius: 8px; font-size: 20px; font-weight: bold; } .upload-btn-wrapper input[type=file] { font-size: 100px; position: absolute; left: 0; top: 0; opacity: 0; } 

 <div class="upload-btn-wrapper"> <button class="btn" onClick ="hello()">Upload a file</button> <input type="file" name="myfile"/> </div> 

With JQuery

 $('input[name="myfile"]').on('change', hello); function hello() { console.log("hello"); } 

 .upload-btn-wrapper { position: relative; overflow: hidden; display: inline-block; } .btn { border: 2px solid gray; color: gray; background-color: white; padding: 8px 20px; border-radius: 8px; font-size: 20px; font-weight: bold; } .upload-btn-wrapper input[type=file] { font-size: 100px; position: absolute; left: 0; top: 0; opacity: 0; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="upload-btn-wrapper"> <button class="btn" onClick ="hello()">Upload a file</button> <input type="file" name="myfile"/> </div> 

Edit: React Example

 // Example class component class InputExample extends React.Component { handleFileChange(e){ console.log('Hello'); console.log('File Name: ', e.target.value); } render() { return ( <input id="upload" ref="upload" type="file" accept="image/*" multiple="false" onChange={(e) => this.handleFileChange(e)}/> ); } } // Render it ReactDOM.render( <InputExample />, document.getElementById("react") ); 

 <div id="react"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 

Answer 2

I maked a few changes in your code and it works:

JS file

function hello() {
  console.log("hello");

    document.querySelector('.upload-btn-wrapper input[type=file]').click();
}

CSS file

.upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.btn {
  border: 2px solid gray;
  color: gray;
  background-color: white;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 20px;
  font-weight: bold;
}

.upload-btn-wrapper input[type=file] {
  font-size: 100px;
  position: absolute;
  opacity: 0;
}

Answer 3

If this is what you are looking for.

 document.getElementById("fileInput").addEventListener("change", function(event, val){ let file = event.target.value; if(!!file){ document.getElementById("inputWrapper").style.display = "none"; document.getElementById("upload").style.display = "block"; } }); 

 .upload-btn-wrapper { position: relative; overflow: hidden; display: inline-block; } .btn { border: 2px solid gray; color: gray; background-color: white; padding: 8px 20px; border-radius: 8px; font-size: 20px; font-weight: bold; } .upload-btn-wrapper input[type=file] { font-size: 100px; position: absolute; left: 0; top: 0; opacity: 0; } 

 <div class="upload-btn-wrapper"> <input type="submit" value="Upload" class="btn" style="display:none" id="upload" /> <div id="inputWrapper"> <span><input type="file" name="myfile" id="fileInput"/></span> <span><button class="btn">Select file</button> </span> </div> </div>