I'm trying to create a web app based on ExtJS, and I'm working on the file-upload area of the app.

I want users to be able to upload files by copying and pasting them - not just copying and pasting the contents of the file, but the file itself. For example, in Windows, you can choose "Copy" or "Cut" from the Edit menu while a file is selected, then choose "Paste" later and copy or move the file - I'd like users to be able to upload files to my app in the Paste step, by just choosing Paste in their browser.

I've already tried HTML5's drag-and-drop API, but we don't want to use that - we want users to be able to copy/cut and paste files to upload their files (as long as they're smaller than 20 megabytes). If the user copies the path to their file and pastes that directly to the page, telling us where to find the file, that could also work.

Can anyone suggest a way to do this?

I'm trying to create a web app based on ExtJS, and I'm working on the file-upload area of the app.

I want users to be able to upload files by copying and pasting them - not just copying and pasting the contents of the file, but the file itself. For example, in Windows, you can choose "Copy" or "Cut" from the Edit menu while a file is selected, then choose "Paste" later and copy or move the file - I'd like users to be able to upload files to my app in the Paste step, by just choosing Paste in their browser.

I've already tried HTML5's drag-and-drop API, but we don't want to use that - we want users to be able to copy/cut and paste files to upload their files (as long as they're smaller than 20 megabytes). If the user copies the path to their file and pastes that directly to the page, telling us where to find the file, that could also work.

Can anyone suggest a way to do this?

• javascript
• html
• file-upload
• extjs

• 1 The way that Windows handles that is with the system clipboard, which handles the file reference that is used to copy/cut and paste elsewhere. What you would need to know is if the browser window has access to file handles on the clipboard during a copy/cut/paste operation. Another option might be a Flash or Java app to extend the browser. – Jared Farrish Commented Dec 12, 2011 at 1:06
• gotcha you are saying that i need to create a bridge sorta thing that would handle all the operations of cut/copy right – Saransh Sharma Commented Dec 13, 2011 at 18:13

2 Answers 2

The thing is, that you're not able to access the clients filesystem with javascript. There is this new Filesystem API, but this just allows you to create a virtual sandboxed filesystem. I had the same problem, thought about it a while and came up with the following ideas.

1. Flash

   Writing a Flash bridge which access the filesystem and let the javascript municate with it via swliveconnect

   Problem: Flash doesn't have filesystem access either.

2. Java applet

   Same thing as Flash and again with LiveConnect

   In my opinion this could work, but I didn't try it out, because my goal was to get filesystem access on a chromebook. And chromeOS doesn't support Java (at least without some hacking)

3. ActiveX

   I also found some solutions with this. I gave up at the applet part so I didn't try this out either.

As Jared Farrish said, when you copy a file the os just saves the path to the file in the clipboard. Then if you receive the paste event on your webapp just get the string out of the clipboard and forward it to your file bridge.

I've seen that DropBox. allows this to be done (in chrome- didn't seem to work in IE). I didn't do cut and paste specifically, but dragged files into a dropbox page from a local folder, and it uploaded the files. So, this doesnt directly answer your quesiton, but perhaps you can look at how this is done in their code.