10

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?

Brighid McDonnell
  • 4,293
  • 4
  • 36
  • 61
Saransh Sharma
  • 121
  • 1
  • 9
  • 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 Dec 12 '11 at 01: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 Dec 13 '11 at 18:13

2 Answers2

5

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 communicate 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.

Community
  • 1
  • 1
Dominic
  • 3,353
  • 36
  • 47
  • well thank you for the help i was wondering about the things i am going to use because i am gonna build it in html 5 is it right to do that! – Saransh Sharma Dec 13 '11 at 18:15
  • oh here is the problem that if there is already an api in html5 which supports copy/paste event like so in that case i need that bridge – Saransh Sharma Dec 13 '11 at 18:39
  • With the paste event of the Clipboard API you just get the absolute path to the file. To actually access the file you need a file bridge. – Dominic Dec 13 '11 at 18:55
-1

I've seen that DropBox.com 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.

Brady Moritz
  • 8,624
  • 8
  • 66
  • 100