Page MenuHomePhabricator

Download button redirects the new generated video instead of downloading.
Closed, ResolvedPublic

Description

The download button redirects the newly generated (cropped, trimmed, rotated) video instead of popping up the download dialog box.

Tested in Mozilla and Google Chrome.

Repos:
VideoCutTool-front-end: https://github.com/gopavasanth/video-cut-tool-front-end/
VideoCutTool-back-end: https://github.com/gopavasanth/video-cut-tool-back-end/

The download button code is here: https://github.com/gopavasanth/video-cut-tool-front-end/blob/master/src/components/home.js#L997

Event Timeline

hi! I would like to work on this task. Can you also post some screenshots of the problem or maybe some link where I can see the issue?

@Nikitrain: See the VideoCutTool project tag on the right and click it to get to https://phabricator.wikimedia.org/project/profile/4054/ - why screenshots? :)

Thanks, @Nikitrain for showing your interest to work on this task.

Steps to reproduce this:

Download_Button.png (670×1 px, 269 KB)

On clicking this Download button, the newly generated video is redirecting and playing in the browsers Instead of actually downloading.

Also, if you are working on this task, Please assign yourself to this task.

Nikitrain claimed this task.

Hey @Gopavasanth need a little guidance here I am unable to figure out what's causing the button to misbehave can you maybe guide me where should I look

Hi @Nikitrain, did you reproduce the bug locally? Are you able to see the "Download" button? If yes probably the code might have to change somewhere here.

Also, see here this works fine to download the videos but the same code is not working for us in VideoCutTool.

hope you got it :)

Hi @Nikitrain, did you reproduce the bug locally?

I tried to, by downloading the "video-cut-tool-front-end" repository and running npm install and npm start command but it doesn't show anything other than a favicon and VedioCutTool in the tab. What might I be doing wrong?

Hi @Nikitrain, did you reproduce the bug locally?

I tried to, by downloading the "video-cut-tool-front-end" repository and running npm install and npm start command but it doesn't show anything other than a favicon and VedioCutTool in the tab. What might I be doing wrong?

To run VideoCutTool locally see this.

In src/App.js change <Route exact path="/video-cut-tool-front-end/" component={home} /> to <Route exact path="/" component={home} />

@Gopavasanth I think the problem in the link is the same as in this question https://stackoverflow.com/questions/50694881/how-to-download-file-in-react-js and thus can't be resolved by changing code in the front end, what do you think?

@Gopavasanth the new tab which contains the newly generated video also have the download option in the player. Also, the file can be downloaded directly from the download button by right-clicking on it and choosing the save link as option. I couldn't find any way to resolve it through front end.

@Gopavasanth the new tab which contains the newly generated video also has the download option in the player. Also, the file can be downloaded directly from the download button by right-clicking on it and choosing the save link as option. I couldn't find any way to resolve it through the front end.

Yes, users can download the video in this way but, Making this download button into working might help the users a lot :)

I would like to work on this task could someone please assign me. Thanks

You are welcome to work on the task, since i am not working on it right now :)

I have solved the issue and created a PR in both the repositories. Here are the links to my PR's https://github.com/gopavasanth/video-cut-tool-back-end/pull/3, https://github.com/gopavasanth/video-cut-tool-front-end/pull/4. So, please review it. Thanks

Amazing work @Abhishekbvs, Thank you :)