Upload file using JS with one click

Question

I'm trying to upload a file with one click.

I can select the file, but just can't get it to upload to a specific location on the server with one click. Need help with the remainder.

Html:

<form>
<input type="file" id="real-file" class="displaynone"/>
<button id="custom-button" class="button-input-3">Upload file</button>
</form>

JS:

<script type="text/javascript">
const realFileBtn = document.getElementById("real-file");
const customBtn = document.getElementById("custom-button");
customBtn.addEventListener("click", function() {
realFileBtn.click();
});
</script>

My apologies. I'm relatively new to this and feeling my way. Any assistance you can provide would be greatly appreciated. Thanks.

Look into adding an onchange event to the file input, and do the submission there. — ray
– ray, Commented Mar 28, 2020 at 4:45
Thank you for that. Can you please provide an example of the line of code I need to include? — Bainn
– Bainn, Commented Mar 28, 2020 at 4:52

Evert · Accepted Answer · 2020-03-28 04:52:18Z

1

Browsers do not allow javascript to initiate the file dialog. The user must click the button. This is a security precaution to prevent tricking users from performing this action.

answered Mar 28, 2020 at 4:52

Evert

101k18 gold badges136 silver badges221 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Bainn Over a year ago

Thank you. That makes sense. Can you offer a line of code I can include?

Evert Over a year ago

No, because what you're trying to achieve is not allowed by browsers. If there were some workaround, it would be treated as a security bug in browsers. You should re-think this part of the application and consider a different UX.

ray Over a year ago

I think you've misunderstood what OP is asking. (Either that or I have.)

Evert Over a year ago

@rayhatfield perhaps i have, i just don't think it's possible to automatically trigger a 'click' on a file upload

ray Over a year ago

Agreed. But OP is either asking how to customize the look of the file button or how to automatically submit the form when a file is chosen, both of which are fairly straightforward. I don't think programmatically triggering the file chooser is the issue.

ray · Accepted Answer · 2020-03-28 05:34:25Z

I would start with something like this. You don't need a bunch of javascript to make one button programmatically click another. Let some clever css do all the lifting. (I've annotated the css with explanations, but I'm happy to elaborate if anything needs clarification.)

This snippet gets you to a point where a change to the file input triggers your function and you have a reference to the input, and by extension its file(s) and form. Do whatever you need to do from there.

function handleFileChange ({target}) {
  if (target.files.length) {
    // do something with the form.
    // target.form.submit() or whatever
    console.log(target.files);
  }
}

const fileInput = document.querySelector('input');
fileInput.addEventListener('change', handleFileChange);

form {
  /* provides positioning context for the file input (below) */
  position: relative;
  
  /* purely cosmetic */
  background: #0099ff;
  color: white;
  font-weight: bold;
  font-size: 3rem;
}

form div {
  /* purely cosmetic */
  padding: 3rem;
  text-align: center;
  font-family: sans-serif;
  
  /*
  allows clicks to pass through the text
  element and hit the file input instead
  */
  pointer-events: none;
}

input[type=file] {
  /* hides the file input while leaving it clickable */
  opacity: 0;
  
  /*
   positions the file input to occupy the entire
   container, so no matter where you click it triggers
   the file chooser
  */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
}

<form>
  <input type="file" name="some-file" />
  <div>Upload a file</div>
</form>

Collectives™ on Stack Overflow

Upload file using JS with one click

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related