Write PDF files from Web-App to USB-Stick

Question

I am concerned with the feasibility of this: On a pre-configured machine I will have a Web-Application pre-installed, next to an Apache-Suite. So client and server are the same!

In this Web-Application Users can drag and drop PDF-Files to an USB-Icon.
Then the Web-App should write the dropped PDF to an attached USB-Stick.

I have never done something like this (writing to USB), so I am fairly insecure. And I am well aware of the browser-restrictions concerning JavaScript and Filesystem-Access, but...

after researching a bit I found out, that there might be some possible and
relevant (I'm a Web-Platform-Guy) solutions to this:

• Make a "Chrome App" with USB-Permission (does this really work?)
• Use PHP to find the USB and then write to it (how would that work under Windows?)
• Use some Flash as middle man (not preferred)

Now I'd like to know:

1. Has anyone some good experience with before mentioned possibilities?
2. Has anybody ever done something similar? Did it work? Which path did you choose?
3. How would I know which drive the USB is mounted, and how would I get sure?
4. What other possible solutions to this problem are there?

Celesta

Should the file be saved on the user's USB or a USB where the server is running? – Oneal

The server would run on the machine. The files would be written to changing/different USB sticks. Every user gets an USB stick as giveaway. – Celesta

What technology is running on the server? Given that you are running a server on the same machine that the USB stick is going to plugged into, your server code could do the filesystem access easily. Without knowing the technology of the back-end, you aren't likely to get any suggested code though. Keep in mind that security is a big concern with this kind of app. Since people can plug a USB stick of their own into this machine that could be a problem unless you lock down the permissions on the machine. – Anastice

@mcgraphix: Let's say that the USB-security-issue is not an issue here. The USB sticks would be provided by trusted staff. As per server-technology I would like to either use PHP or JavaScript (Node) – so one of the common web-techs for backends. – Celesta

You could accomplish this with any server technology. If going with Javascript, you could use ExpressJS for your web app framework (expressjs.com) and NodeJS has a built-in module for writing files (nodejs.org/api/fs.html). But if you are hoping that someone is going to provide you the exact code to accomplish your whole project, you will likely find that nobody is going to do that. Try to solve your problem with the suggestions here and then post specific questions based on any roadblocks or trouble you run into. – Anastice

@mcgraphix: Thank you for your comment. I am not hoping nor expecting that someone writes it for me – on the contrary I would like to make that experience myself. Nevertheless I was just insecure with the feasibility of this issue. Your comment and the answers of Jared and Pawel are what I was hoping for. The insecurity resulted from me knowing the restrictions of the browser<>javascript<>filesystem-triangle and my research on how to do it with PHP, which didn't end promising. So thanks :) – Celesta

Answer 1

You have a website ('client-side' user interface) and a back-end server ('server-side') running on the same machine. This gives you 2 options:

1. Client-side: Download a file through the browser via HTTP GET and let the user choose where they save it.
2. Server-side: Build your USB interactions into the back-end (Node.js) code, as @mcgraphix suggests.

Interacting with the USB on the server-side provides the most flexibility. Furthermore, there are a number of libraries that you can leverage. Head to npmjs.org and consider, among others, the following Node.js server-side packages:

• usb-detection
• usb

With the server-side approach, initiate a Webservice request when the user completes the drag & drop action on the client, and implement the USB interaction within the server (Express.js or similar) method which services the request.

Hist

Thank you very much for your answer which gives me the most confidence in accomplishing this. You get the bounty, because a) your first option (and it's creative simplicity), which I didn't even think of and b) the relevance to Node.js and c) the useful links and the little concept-paragraph. Hopefully it's really as good, as it sounds :) – Celesta

Answer 2

If the letter of the stick is known then writing a file from PHP will be simple

file_put_contents( 'E:\\folder\\file.pdf', $data );

Update

You can read a list of drives into a dropdown and allow a user to select a default drive to write to

https://mcmap.net/q/1469490/-how-to-get-system-drives-through-php-duplicate

Phocine

Thank for your answer. If this really works this easy in PHP – which I will test in the future – I'll provide another little bounty for you, just for the straight-forwardness of your answer :) – Celesta

Answer 3

Your question is more an architecture question than a code specific question.

Your web app (if you insist on a web app) should have two major components, a server side component that can be given arbitrary commands, and a client side component (javascript using XMLHttpRequest) that can make requests to the server side component to execute said arbitrary commands.

So your server side component, the component that serves your web page should have some server side code that can write your pdf to the file system, it should probably generate the pdf file as well rather than doing that on the web browser.

Which technology you use is up to you, whether that's PHP, .Net, Node.js etc...

The general gist is you want a server side framework that deals with HTTP requests, in your case probably a post request from the client side containing the encoded pdf, and responds accordingly. Bind a particular http route to trigger your save logic.

Your http post request to the server will contain your payload which is the pdf file to a particular path, e.g. http://localhost/savepdf that whichever technology stack http listens to (you'll need to configure that)

Your server side component should read the incoming data, decode it as appropriate then make a file system request to write the received payload to disk.

Kakapo

Hi Daniel, thanks for your answer. I most likely would insist in a Web-App, because that's where I have the most experience. That being said, the routing or the general Application-Architecture is no Hocus Pocus to me – but the file system request part is where I lack some understanding and have no experience. – Celesta

Well it depends entirely on which OS your server runs (looks like Windows judging by your question) and on which technology stack you want to use. If it was C#.Net for example you'd use binarywriter to write the contents to disk. All you need to do is pick which technology you want to use, look at the documentation and look for documentation on file system operations. – Kakapo