0

I have a input type[file] component.After the user browses and selects a file i need to download the selected file by clicking a button.

function download(){
...
}

<input type='file' id='file1'>
<button type='button' onclick='download()'></button>

Thanks, Nawaz Ahmed

Nawaz Ahmed
  • 37
  • 8
  • 1
    Do you want to upload or download? – Alexander Jun 28 '17 at 07:40
  • 2
    Imagine you are the user, you select the file in browser. So it must already be on your computer to select it. So you might mean upload (to the server) instead of download? – caramba Jun 28 '17 at 07:41
  • download @Alexander – Nawaz Ahmed Jun 28 '17 at 07:41
  • @NawazAhmed why do you need download option ? – Rakesh Soni Jun 28 '17 at 07:41
  • It's Like review page @caramba.So in the final step i need to do that so – Nawaz Ahmed Jun 28 '17 at 07:42
  • useless actions ?!! – Spring Jun 28 '17 at 07:43
  • @NawazAhmed That means you have already uploaded that file ? if yes then you can simply give anchor tag with link to that file and add 'download' attribute to anchor tag – Rakesh Soni Jun 28 '17 at 07:43
  • in the first tab i will select a file..so if the user wants to know the selected file in 12th tab ..it needs to be downloaded @Rakesh Soni – Nawaz Ahmed Jun 28 '17 at 07:44
  • 1
    Either way. If you want to download something it must be on the server first. If it is on the server you do not need an `` cause this is needed to upload files to the server. To download, you just need a link with the path to the file. – caramba Jun 28 '17 at 07:45
  • 1
    for review purpose you should show preview of file to user instead of giving option to download file and then review – Rakesh Soni Jun 28 '17 at 07:47
  • The file, that user select using by `` control, already exist on client machine.. The control allows to **upload** files from client to server. See details on [w3schools](https://www.w3schools.com/tags/att_input_type.asp). – Alexander Jun 28 '17 at 07:49
  • See https://stackoverflow.com/questions/25395727 that might help you – Rakesh Soni Jun 28 '17 at 07:49
  • its an requirement of user :( ... @Rakesh Soni – Nawaz Ahmed Jun 28 '17 at 07:50
  • @caramba one could argue that once in an `` the user did *upload* the file to the browser's memory. You can create Files from scratch in a webpage, the action to save it is often called *"download"* (while it may be an Malapropism) – Kaiido Jun 28 '17 at 07:50
  • @Kaiido good point (of view), didn't think about that! – caramba Jun 28 '17 at 07:52
  • To OP, there are already a lot of posts explaining you how to do it. e.g https://stackoverflow.com/questions/25547475/save-to-local-file-from-blob The File object you've got in your input is a Blob, so same options will work. Also you might be interested in a library like [FileSaver.js](https://github.com/eligrey/FileSaver.js/) for cross-browser issues. – Kaiido Jun 28 '17 at 07:53
  • Possible duplicate of [Save to Local File from Blob](https://stackoverflow.com/questions/25547475/save-to-local-file-from-blob) – Kaiido Jun 28 '17 at 07:54
  • Check [**my answer**](https://stackoverflow.com/questions/1066452/easiest-way-to-open-a-download-window-without-navigating-away-from-the-page/43523297#43523297) on how to [download a file with JS](https://stackoverflow.com/questions/1066452/easiest-way-to-open-a-download-window-without-navigating-away-from-the-page) it will surely give you a solution. – cнŝdk Jun 28 '17 at 08:07

1 Answers1

1

window.onload = function() {
      var txt = document.getElementById('txt');
      txt.value = window.onload + '';
      document.getElementById('link').onclick = function(code) {
        this.href = 'data:text/plain;charset=utf-8,'
          + encodeURIComponent(txt.value);
      };
    };
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="txtWrap">
      <textarea id="txt"></textarea>
    </div>

    <a href="" id="link" download="code.txt">Download Above Code</a>

may be you can find some idea from here , i am not sure that i am right or wrong according to your question.

R.K.Bhardwaj
  • 1,998
  • 1
  • 12
  • 21