winstall icon indicating copy to clipboard operation
winstall copied to clipboard

Add a button to download all selected app installers

Open stevennyman opened this issue 4 years ago • 6 comments

It would be helpful to have a button to download installers for all selected apps at the same time (even if they can't be zipped into one file, it would be fine they were automatically downloaded separately).

stevennyman avatar May 22 '20 16:05 stevennyman

Hi @stevennyman , if I understand this correctly, you want a button where the script is generated, so that it can download all the files executable, either one by one or all contained in a zip folder.

So there are a couple of observations for this feature:

  • CORS: This is more likely to cause an issue because it will try to trigger all the requests inside the application domain, to overcome this issue as a temporary solution, the user will have to install a plugin on the browser to enable CORS.
  • If the files are downloaded one by one, most likely the browser will stop the execution because of security reasons and will flag the actions as popups/windows being opened.

I think the most viable way of doing this is to implement the function to download all executable files in a single zip file, but since the user can select multiple apps, this might be a slow process since some apps are lightweight but other are really huge (talking about ~70MB range), if that's the case, we need to tell the user that the process is running but it cannot leave the page until the process is finished.

After doing some research and tests, this is the solution I came up with:

  • JSZip: This is a library to create a zip file, the package is available in npm => npm install jszip --save
  • file-saver: A library to save a file in JS and download it, the package is available in npm => npm install file-saver --save
  • axios: Axios is library to make HTTP requests, is robust and performs really well, available in npm => npm install axios --save

This is a design I made, but it can be redesigned per guidelines:

download_installers

After applying some code the final result is this:

zip folder zip folder content

@MehediH Let me know what you think, so I can submit a pull request for review for these changes.

pelonchasva avatar May 28 '20 04:05 pelonchasva

@pelonchasva very cool! (I hadn’t originally focused on the idea of creating a zip file because of the CORS limitation). I thought a possible workaround to the browser stopping execution would be to set a small iframe to each download URL and let the browser initiate the download when it can’t show it as a webpage, though that wouldn’t be a very clean way of downloading the installers.

stevennyman avatar May 28 '20 07:05 stevennyman

@pelonchasva This is awesome! However, I am not sure the .zip is the best way to go since we will be downloading each of the installers from our domain and as you said, will lead to CORS-related issues.

I think the better option would be to just download the installers one-by-one, even though we will have to deal with the "multiple download" warning on browsers. After all, the main purpose of the application is to supplement the use of Windows Package Manager, and so I think it would be best not to deal with creating the zip, etc.

And if we were to implement a .zip download, I would ideally like to have a different page for this experience, with a progress bar that details each of the steps. Downloading the installers would take time depending on the server speeds, and the process could take a lot of time depending on network speed. As a result, we will need visual components that keep the user informed about what is going on.

Please let me know what you think.

MehediH avatar May 28 '20 09:05 MehediH

@MehediH Yeah I agree, that's why I mentioned that if the zip approach is implemented, we just need to warn the user that it is going to work if they use the CORS plugin on their browser and the problem will be somehow solved, on my tests, it worked 8 out of 10 times.

Download the installer one by one and try to overcome the browser restriction is actually more difficult, but this is of course based on my experience. If you know another way to make it happen, I will be glad to help.

Also I agree with you, this should be either on a separate page or component that shows a progress bar or description of what is happening.

pelonchasva avatar May 29 '20 23:05 pelonchasva

I think, knowing the constraints and what is allowed, we should leave this off for now. I am going to be working on building a proper API first and making some significant changes to the app soon, so it might be a better idea to look into this after I am done with that.

For now, I believe it is out of scope for what we are trying to solve. I really appreciate your feedback and work though!

MehediH avatar May 29 '20 23:05 MehediH

Yes I agree, this should be off for now.

And no worries, if any case, the implementation I made is already in my local repo, so it won't get lost.

Regards!

pelonchasva avatar Jun 02 '20 01:06 pelonchasva