Download file from input type file javascript

Question

I am creating a web app in which I want my user to download the file which they are selected in input type="file"

here is my html

<input type='file' id='fieldID' onchange="return ValidateFileUpload('fieldID')"/>

now my JS

function ValidateFileUpload(ID) {

    var fuData = $('#' + ID);
    var FileUploadPath = fuData[0].value;

    //To check if user upload any file
    if (FileUploadPath == '') {

    } else {
        var Extension = FileUploadPath.substring(
            FileUploadPath.lastIndexOf('.') + 1).toLowerCase();

        //The file uploaded is an image

        if (Extension == "gif" || Extension == "png" || Extension == "bmp"
            || Extension == "jpeg" || Extension == "jpg" || Extension == "pdf" || Extension == "ppt" || Extension == "pptx" || Extension == "doc" ||Extension == "docx"
            || Extension == "xls" || Extension == "xlsx") {

            var file = $('#' + ID)[0].files[0];
            var filename = $('#' + ID)[0].files[0].name;
            var blob = new Blob([file]);
            var url = URL.createObjectURL(blob);

            $(this).attr({ 'download': FileUploadPath, 'href': url });
            filename = "";
        }

        //The file upload is NOT an image
        else {
            alert("Document is not the correct format: pdf,ppt,pptx,doc,docx,xls,xlsx and txt are the only document types allowed for upload. Please try again.");

        }
    }
}

but I am not able to download the selected file, can you please help me out to download the file selected in file upload

Are you trying to upload this file to your server? Your current terminology makes no sense as it implies you want the user to download a file they already have. — Rory McCrossan
– Rory McCrossan, Commented Oct 16, 2018 at 7:56

Nuno Dias · Accepted Answer · 2019-07-02 08:23:05Z

4

This should do the trick.

<script>
    function DownloadFile() {
        file = input.files[0];
        fr = new FileReader();
        fr.readAsDataURL(file);

        var blob = new Blob([file], { type: "application/pdf" });

        var objectURL = window.URL.createObjectURL(blob);
        console.log(objectURL);

        if (navigator.appVersion.toString().indexOf('.NET') > 0) {
            window.navigator.msSaveOrOpenBlob(blob, 'myFileName.pdf');
        } else {
            var link = document.createElement('a');
            link.href = objectURL;
            link.download = "myFileName.pdf";
            document.body.appendChild(link);
            link.click();
            link.remove();
        }
    }
</script>

<input type="file" id="input" />
<input type='button' value='Download' onclick='DownloadFile();'>

Check: https://utilitiesforprogrammers.blogspot.com/2019/01/download-file-from-input-type-file.html

edited Jul 2, 2019 at 8:23

answered Jan 16, 2019 at 9:22

Nuno Dias

1265 bronze badges

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

4 Comments

Jerin Stephen Over a year ago

hi @Nuno i tries this example. and i read the code theoretically it should work but it is not working for me do you have any idea why it is not work out. also i tried the href link in the url it is not working

Nuno Dias Over a year ago

The input id was wrong (my bad). I also changed the script and added code to work in IE.

Jerin Stephen Over a year ago

i am using firefox 67.0.4 (64-bit) it is not working and in IE , i tried to upload pdf and try to open it . it is not opening it says some error in the file

Nuno Dias Over a year ago

The problem is the click in firefox in JS ... do this: ... link.download = "myFileName.pdf"; document.body.appendChild(link); link.click(); link.remove(); ... i alter the code also :)

Collectives™ on Stack Overflow

Download file from input type file javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related