Pdf.js: Feature request: support drag and drop for opening local PDF

[iamCristYe]

Could you please add support for drag a PDF into the view to open it?

[lalagias]

I want to contribute to this issue! Could I have a bit more context, about how to implement this feature and what exactly do you want to achieve?

[iamCristYe]

@lalagias Hey! Thank you for replying! By drag and drop, I mean to open a PDF a by drag a PDF into the PDF.js tab and drop it, like in https://smallpdf.com/compress-pdf or https://www.w3schools.com/html/html5_draganddrop.asp

[lalagias]

@iamCristYe So do you want a UI solution to your issue like smallpdf.com and the ability to drag-drop the PDF? Also, the drag and drop feature is getting handled in Firefox Browser.

[iamCristYe]

@lalagias Yes. Note that actually I'm using PDF.js in Chrome/Edge.

[lalagias]

@iamCristYe Is that the feature you asked for? Any feedback could be really useful, I'm trying to contribute to this project and I like your request.

[iamCristYe]

This looks great! @lalagias

[lalagias]

@timvandermeij can we talk about how I should proceed this UI solution?

[timvandermeij]

I'm thinking that for the UI we don't have to do much actually. For users it would be easiest to stay close to how Firefox currently handles this. If you open a new tab for example and drag a file onto it, it will open the file in that tab without any additional UI. For PDF.js we could do the same: the entire viewer could have an invisible drag-'n-drop zone so you can just drag the file into the viewer.

[lalagias]

@timvandermeij so we are dropping the UI solution and we are going to replace it with a Mozilla-like solution, for Chrome/Edge, I agree 100%. Although the solution we are discussing, it has implemented by pdf.js or it is implemented within Mozilla browser?

Furthermore, the use case that we want to handle is to open a pdf with pdf.js and the entire viewer will be a drag'n'drop zone so if we drag'n'drop a new pdf file there it will reload and render the new one.

So, firstly I should try to make a drag'n'drop zone and then try to fetch the new pdf?

[timvandermeij]

It's not really a Mozilla-specific solution, but I think it's how browsers and operating systems handle this in general. For example in IDEs you can also drop a file and it will be opened without any additional UI. I think that's nice because it keeps it simple and if we do that it will also be closer to the behavior users expect.

[lalagias]

You are 100% right, about the user experience. The OS, browser and even IDEs solution you mentioned is by far the most appropriate for this feature request.

So, I want to contribute to this feature, should I proceed and try to figure out a way to implement this?

[iamCristYe]

@lalagias I think you should proceed

[lalagias]

@timvandermeij Hello, currently I have set the drop zone with a div element in the viewer.html file, and I have written some drag functions to test it out in a dragNdrop.js file.

I think I need to implement the Open File functionality to the drag'n'drop zone.

How should I proceed?
My thoughts, at the moment, are either find and use the Open File functionality or somehow try to call the right functions to process the new dropped file.

[timvandermeij]

I think you can use https://github.com/mozilla/pdf.js/blob/master/web/app.js#L701 for that.

[lalagias]

@timvandermeij The functionality is done, and I have made a pull request. The branch is called Drag'N'Drop.
Could a reviewer help me with my pull request?