aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes file upload with Drag and Drop facility Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "file upload with Drag and Drop facility" Watch "file upload with Drag and Drop facility" New topic
Author

file upload with Drag and Drop facility

Anuranjan Arya
Greenhorn

Joined: Jun 10, 2009
Posts: 17
Hi,
I am working on a project in which i have to upload audio file on the server.
I am able to it with the help of <input type='file'> but i want to apply drag and drop method in my webpage.
Can you give me any idea regarding how to apply Drag and Drop option to my webpage
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61437
    
  67

Please take the time to choose the correct forum for your posts. This forum is for questions on JSP. For more information, please read this.

This post has been moved to a more appropriate forum.

[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61437
    
  67

jQuery UI has a drag-and-drop library, but I don't really see how it applies to file uploads.
amit punekar
Ranch Hand

Joined: May 14, 2004
Posts: 514
Hi,
As Bear mentioned you can use the jQuery to implement drag and drop. In addition to this you can include the <input type="file"> within a <div> which is hidden in the page. Upon dropping the file in Droppable area you can initialize the file input with required attribute. I have never tried this but would have tried this if needs to implement this use case.

Regards,
Amit
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61437
    
  67

amit punekar wrote: Upon dropping the file in Droppable area ...

What file? There is no way that the page can see anything to do with the client file system, so what "file" are you talking about?
amit punekar
Ranch Hand

Joined: May 14, 2004
Posts: 514
Hello,
I did not mean physical file. I meant the draggable object that represents the file on file system.
I was thinking about this approach based on
1) If we use <input type="file">, then we do browse and select some file to upload. I am not sure how the filename is passed to the fileupload APIs ( I only know about Apache commons ServletFileUpload has parseRequest() method that does that)
2) Then I thought if we could hide the <input type="file"> and simulate populating that filename(which we populate by clicking the default Browse button in the control) by dropping draggable file object ( not physical file but something that would represent the file).
3) On w3schools.com, I tried to find if there is any attribute that conveys the filename to the server side but I think this is not the case and instead the MIME request is used to do so. But could not say more as I am not sure how it works exactly.

Please correct me if I am wrong.

Thanks,
Amit
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61437
    
  67

You are making no sense at all.
amit punekar wrote:1) If we use <input type="file">, then we do browse and select some file to upload.

So you are saying that in order to pick a file to pass to an invisible file input, you'd create a visible file input to pick it? What's the point?
amit punekar
Ranch Hand

Joined: May 14, 2004
Posts: 514
Hi,
No, I was trying to say that make the <input type="file"> invisible and then use drag-drop to set the value of it.

Regards,
Amit
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61437
    
  67

But my point is that there's no way to create draggables that represent anything meaningful. Please think things through before posting solutions that cannot work.
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15299
    
    6

Actually, there is some way to do this, but it might be browser dependent. I know that Confluence allows you to drag a file from your computer onto the browser on a specific wiki page, and a file upload is automatically triggered and the file is uploaded. Watch this video at about 1:50 mark.

http://www.atlassian.com/software/confluence/videos/overview.jsp

It could be flash, I really don't know. But something is possible.


GenRocket - Experts at Building Test Data
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61437
    
  67

Sure this could be done with signed applets, flash or ActiveX. But not without any of those technologies.
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15299
    
    6

Bear Bibeault wrote:Sure this could be done with signed applets, flash or ActiveX. But not without any of those technologies.


It is actually done via Google Gears or a Firefox plugin created by Atlassian. Unfortunately, both are out of date for current browser versions. Google Gears is no longer maintained in lue of HTML 5 and the FF plugin only works with versions < 3.6.
amit punekar
Ranch Hand

Joined: May 14, 2004
Posts: 514
Okay,
I had mentioned in my post it was just my thought and would not know if it is appropriate or working solution.
Anyways thanks for pointing it out , henceforth I will make sure to post the approaches those I have tried and worked.

Regards,
Amit
Mark E Hansen
Ranch Hand

Joined: Apr 01, 2009
Posts: 645
amit punekar wrote:Okay,
I had mentioned in my post it was just my thought and would not know if it is appropriate or working solution.
Anyways thanks for pointing it out , henceforth I will make sure to post the approaches those I have tried and worked.

Regards,
Amit


Amit: I hope all participants in this forum are encouraged to participate freely. In your case, you made it clear that you were only throwing ideas into the conversation and you didn't know whether or not they would actually work. Personally, I see value in this, and hope it is not the policy of this site to stifle such a free exchange of ideas.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61437
    
  67

Amit, it's fine to throw out ideas, just be sure that there's some basis for possibility. It's just not possible for the client (without Applet, ActiveX etc) to deal with files on the client. This is a security measure. Imagine the nightmare if any web site could start affecting the file system of the users who visit it.
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15299
    
    6

Bear Bibeault wrote:Amit, it's fine to throw out ideas, just be sure that there's some basis for possibility. It's just not possible for the client (without Applet, ActiveX etc) to deal with files on the client. This is a security measure. Imagine the nightmare if any web site could start affecting the file system of the users who visit it.


Interesting, I didn't read it this way. Look, if I drag a file into the browser, the browser can know the path of the file (just like the file input element can know) and relay that back to the server via a POST. This is different than the browser pushing something out to the client file system.

But you're right, you need a 3rd party something to make this work.
amit punekar
Ranch Hand

Joined: May 14, 2004
Posts: 514
Hello,
Mark :
I am noway discouraged by this conversation. Reason for hanging out on Javaranch is the encouragement and knowledge we get by participating in various forums.
Bear is a very experienced and knowledgeable person and I have lot of respect for him. He has already helped me on couple of issues through JavaRanch.
Hence just wanted to say in my post that his suggestion is noted and will try to implement it.

Bear:
Thanks for your kind words and suggestion once again.

Regards,
Amit
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61437
    
  67

Yes, my intention was not to try and limit ideas, but to point out why that approach would not work. If it came across as discouraging, that was not my intention.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: file upload with Drag and Drop facility