All geek questions in one place

How can I let the user upload multiple files at the click of a button?

So, I have an httpd server that has links to a bunch of files. Suppose a user selects three files from a list of files to download, and they are located at:

mysite.com/file1 mysite.com/file2 mysite.com/file3

When they click the download button, I want them to download these three files from the links above.

My download button looks something like this:

 var downloadButton = new Ext.Button({ text: "Download", handler: function(){ //download the three files here } });
+11
source share
9 answers

The best way to do this is to pin your files and a link to them:

Another solution can be found here: How to make a link open multiple pages when clicked

In what condition is the following indicated:

HTML:

 <a href="#" class="yourlink">Download</a>

JS:

 $('a.yourlink').click(function(e) { e.preventDefault(); window.open('mysite.com/file1'); window.open('mysite.com/file2'); window.open('mysite.com/file3'); });

Having said that, I’ll change it to a zip file anyway, since this implementation requires JavaScript and can sometimes be blocked as pop-ups.

+14
source

It was a method that worked better for me and did not open new tabs, but simply loaded the necessary files / images:

 var filesForDownload = []; filesForDownload( { path: "/path/file1.txt", name: "file1.txt" } ); filesForDownload( { path: "/path/file2.jpg", name: "file2.jpg" } ); filesForDownload( { path: "/path/file3.png", name: "file3.png" } ); filesForDownload( { path: "/path/file4.txt", name: "file4.txt" } ); $jq('input.downloadAll').click( function( e ) { e.preventDefault(); var temporaryDownloadLink = document.createElement("a"); temporaryDownloadLink.style.display = 'none'; document.body.appendChild( temporaryDownloadLink ); for( var n = 0; n < filesForDownload.length; n++ ) { var download = filesForDownload[n]; temporaryDownloadLink.setAttribute( 'href', download.path ); temporaryDownloadLink.setAttribute( 'download', download.name ); temporaryDownloadLink.click(); } document.body.removeChild( temporaryDownloadLink ); } );
+10
source

You can:

  • Lock the selected files and return one archived file.
  • Open several pop-up windows, each of which asks for a download.

Note. Option 1 is objectively better.

Edit Three options were found: fooobar.com/questions/79075 / ...

+2
source 
  <!DOCTYPE html> <html ng-app='app'> <head> <title> </title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" href="style.css"> </head> <body ng-cloack> <div class="container" ng-controller='FirstCtrl'> <table class="table table-bordered table-downloads"> <thead> <tr> <th>Select</th> <th>File name</th> <th>Downloads</th> </tr> </thead> <tbody> <tr ng-repeat = 'tableData in tableDatas'> <td> <div class="checkbox"> <input type="checkbox" name="{{tableData.name}}" id="{{tableData.name}}" value="{{tableData.name}}" ng-model= 'tableData.checked' ng-change="selected()"> </div> </td> <td>{{tableData.fileName}}</td> <td> <a target="_self" id="download-{{tableData.name}}" ng-href="{{tableData.filePath}}" class="btn btn-success pull-right downloadable" download>download</a> </td> </tr> </tbody> </table> <a class="btn btn-success pull-right" ng-click='downloadAll()'>download selected</a> <p>{{selectedone}}</p> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="script.js"></script> </body> </html> app.js var app = angular.module('app', []); app.controller('FirstCtrl', ['$scope','$http', '$filter', function($scope, $http, $filter){ $scope.tableDatas = [ {name: 'value1', fileName:'file1', filePath: 'data/file1.txt', selected: true}, {name: 'value2', fileName:'file2', filePath: 'data/file2.txt', selected: true}, {name: 'value3', fileName:'file3', filePath: 'data/file3.txt', selected: false}, {name: 'value4', fileName:'file4', filePath: 'data/file4.txt', selected: true}, {name: 'value5', fileName:'file5', filePath: 'data/file5.txt', selected: true}, {name: 'value6', fileName:'file6', filePath: 'data/file6.txt', selected: false}, ]; $scope.application = []; $scope.selected = function() { $scope.application = $filter('filter')($scope.tableDatas, { checked: true }); } $scope.downloadAll = function(){ $scope.selectedone = []; angular.forEach($scope.application,function(val){ $scope.selectedone.push(val.name); $scope.id = val.name; angular.element('#'+val.name).closest('tr').find('.downloadable')[0].click(); }); } }]);

plunger example: https://plnkr.co/edit/XynXRS7c742JPfCA3IpE?p=preview

+1
source

I solved it differently using window.location. It works in Chrome, which, fortunately, is the only browser I had to support. Maybe someone will come in handy. I originally used Dan's answer, which also needed a timeout, which I used here, or it downloaded only one file.

 var linkArray = []; linkArray.push("http://example.com/downloadablefile1"); linkArray.push("http://example.com/downloadablefile2"); linkArray.push("http://example.com/downloadablefile3"); function (linkArray) { for (var i = 0; i < linkArray.length; i++) { setTimeout(function (path) { window.location = path; }, 200 + i * 200, linkArray[i]); } };
+1
source

You can do this by creating mouse events and sending them to the button. Sourse.

 hrefList=['mysite.com/1.jpg', 'mysite.com/2.mp4', 'mysite.com/3.gif']; buttonDownloadAll=document.createElement('a'); buttonDownloadAll.innerText='Download all'; buttonDownloadAll.href=''; buttonDownloadAll.download=false; downloadFunc=function(){ buttonDownloadAll.setAttribute('onclick', ''); buttonDownloadAll.download=true; for(var i=0; i<hrefList.length-1; i++){ buttonDownloadAll.href=hrefList[i]; var clickEvent = document.createEvent('MouseEvent'); clickEvent.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); buttonDownloadAll.dispatchEvent(clickEvent); } buttonDownloadAll.setAttribute('onclick', 'downloadFunc()'); buttonDownloadAll.download=false; buttonDownloadAll.href=''; }; buttonDownloadAll.setAttribute('onclick', 'downloadFunc()'); document.body.appendChild(buttonDownloadAll);
0
source

This works in all browsers (IE11, Firefox, Microsoft Edge, Chrome and Chrome Mobile). My documents are in several selected items. Browsers seem to have problems when you try to do it too fast ... So I used a timeout.

 <select class="document"> <option val="word.docx">some word document</option> </select> //user clicks a download button to download all selected documents $('#downloadDocumentsButton').click(function () { var interval = 1000; //select elements have class name of "document" $('.document').each(function (index, element) { var doc = $(element).val(); if (doc) { setTimeout(function () { window.location = doc; }, interval * (index + 1)); } }); });

This solution uses promises:

 function downloadDocs(docs) { docs[0].then(function (result) { if (result.web) { window.open(result.doc); } else { window.location = result.doc; } if (docs.length > 1) { setTimeout(function () { return downloadDocs(docs.slice(1)); }, 2000); } }); } $('#downloadDocumentsButton').click(function () { var files = []; $('.document').each(function (index, element) { var doc = $(element).val(); var ext = doc.split('.')[doc.split('.').length - 1]; if (doc && $.inArray(ext, docTypes) > -1) { files.unshift(Promise.resolve({ doc: doc, web: false })); } else if (doc && ($.inArray(ext, webTypes) > -1 || ext.includes('?'))) { files.push(Promise.resolve({ doc: doc, web: true })); } }); downloadDocs(files); });
0
source

I like that the execution of the click() a event of an element inside for loop for to load multiple files only works for a limited number of files (in my case 10 files). The only reason that made sense to me was the speed of the event downloads.

The solution that worked for me was to slow down the click() event. I achieved this using the source code below.

 var urls = [ 'http://example.com/file1', 'http://example.com/file2', 'http://example.com/file3' ] var interval = setInterval(download, 300, urls); function download(urls) { var url = urls.pop(); var a = document.createElement("a"); a.setAttribute('href', url); a.setAttribute('download', ''); a.setAttribute('target', '_blank'); a.click(); if (urls.length == 0) { clearInterval(interval); } }

I execute a click() load event every 300 ms. When there are no more files to load urls.length == 0 then I execute clearInterval for the interval function.

0
source

Dan solution worked for me until yesterday. Firefox version 65 Quantum seems to have problems with multiple requests and does not allow multiple downloads in this way.

0
source

Source: https://habr.com/ru/post/952530/

More articles:


All Articles