CODEWITHSUNDEEP
javascriptphpjquery
Robert Dean Pantino
Robert Dean Pantino

Reputation: 284

How to download the content/image/data of input type file?

I wanna know how to download the data/content/image in an input type file

Note: It doesnt have to be submitted. just a direct download from a button in which he can be able to download the content of an input type file

How can i do this?

sample code

$(".downloadupinvoice").click(function(){
   var file = document.getElementById('id-input-file-2').files[0];

   //Put some code here to produce a file ?
   window.location=window.URL.createObjectURL(file);
})

i cant seem to preview the file but it is not downloading also i notice in the address bar that it display like this

blob:69c7ee1a-ba44-4234-9216-68b3c86b9c96

Upvotes: 5

Views: 16752

Answers (1)

Robert Dean Pantino
Robert Dean Pantino

Reputation: 284

Finally got it.

$(".downloadupaddinvoice").click(function(){
        var filename = $('#id-input-file-2').val();

        if (filename == "" || filename == null) {
            alert('Error');
        }else {
            var file = document.getElementById('id-input-file-2').files[0];      
            var filename = document.getElementById('id-input-file-2').files[0].name;      
            var blob = new Blob([file]);
            var url  = URL.createObjectURL(blob);

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

    })

This is the where the anchor tag :)

<a class="help-button col-sm-4 downloadupaddinvoice"  title="Download uploaded invoice" download><i class="icon-download-alt"></i></a>

Hope it might help in the future..

Upvotes: 13

Related Questions