Uploading multiple local files via a web browser

Discussion in 'Web Design and Development' started by Doctor Q, Sep 28, 2006.

  1. Doctor Q Administrator

    Doctor Q

    Staff Member

    Joined:
    Sep 19, 2002
    Location:
    Los Angeles
    #1
    I am creating an application that will require users to upload sets of files from their local computer to the server. Imagine, for example, that it's a photo-stitching service. (That's not what it is, but it's easier to explain.)

    The tough requirement is that the user can use nothing but a web browser -- no other client-side application or software that doesn't come with the operating system or the web browser. This is to make it universally available.

    As they use a web form, can I prevent them from having to repeatedly click a Browse button, navigate to a file, select it, click OK, and click Upload, once for each file? Assuming the files to be uploaded reside in a single folder, I'd rather let them multi-select files after browsing once, let them browse to the folder rather than to each individual file, or let them drag and drop collections of files into the web browser window, the way FTP clients allow you to initiate multiple uploads.

    I control all server-side processes and can put whatever software I like on the server.

    Is there a way to do this with only browser-based technology? I can use Javascript, AJAX, Java applets, or any other technology supported by major web browsers.
     
  2. Kunimodi macrumors member

    Joined:
    Sep 8, 2006
    Location:
    Ashland, OR, USA
    #2
    Hello, Doctor Q. Using the normal HTML file input form element it is not possible. However, you can accomplish this using a Java applet. You can allow them to drag and drop of files from their desktop like this:
    Code:
    import java.awt.dnd.*;
    import javax.swing.*;
    
    public class DnDApplet extends JApplet  {
        JLabel label;
        
        public void init() {
            getContentPane().add(label = new JLabel("Drop?"));
            new DropTarget(this, new DropTargetAdapter() {
                public void drop(DropTargetDropEvent event) {
                    event.acceptDrop(DnDConstants.ACTION_COPY_OR_MOVE);
                    DnDApplet.this.label.setText("Got drop type: " + event.getTransferable().getTransferDataFlavors()[0].getHumanPresentableName());
                    event.getDropTargetContext().dropComplete(true);
                }
            });
        }
    }
    However, to actually transfer these files, you'll need explicitly higher security permissions from their machine.
     
  3. Doctor Q thread starter Administrator

    Doctor Q

    Staff Member

    Joined:
    Sep 19, 2002
    Location:
    Los Angeles
    #3
    Thanks. That type of solution is within the realm of possibilities. I know Internet Explorer has many settings for the security settings in zones (Internet, Local intranet, etc.). I hope suitable settings there would be enough.

    I'm not what this would entail for other platforms, however.

    Another possible approach: Can WebDAV help me?
     
  4. ValGor macrumors newbie

    Joined:
    Feb 20, 2005
    #4
    This might be what you are looking for: (google all the way :)

    http://www.radinks.com/upload/demo.php

    It's java signed applet. Of course it will require certificate and that certificate will have to be updated once in a year or two and applet resigned. Otherwise it works ..


    Have fun
     
  5. fall3n macrumors 6502

    Joined:
    Aug 17, 2006
    #5
    I'm no guru on this kind of stuff, but I've seen sites where you can upload a zip and it'll extract the file and all that jazz. Perhaps you can look into that as an alternative?
     
  6. Doctor Q thread starter Administrator

    Doctor Q

    Staff Member

    Joined:
    Sep 19, 2002
    Location:
    Los Angeles
    #6
    Thanks, ValGor. I'll check it out.

    I ruled that one out because that would require the use of a separate "zipping" application beforehand. Mac OS X makes it easy to create an "archive" out of a folder, but that's platform specific.
     
  7. Kunimodi macrumors member

    Joined:
    Sep 8, 2006
    Location:
    Ashland, OR, USA
    #7
    As Valgor indicated, a signed Java applet can do these things. It is quite easy to create a self signed applet and in any modern browser with normal security settings (on an operating system with Java installer) users can easily elect to trust your applet. The process is like this. Let's say you start with a program that shows a file chooser:
    Code:
    import java.io.*;
    import javax.swing.*;
    
    public class LocalChooser extends JApplet {
        public void start() {
            JFileChooser chooser = new JFileChooser();
            chooser.setMultiSelectionEnabled(true);
            if (chooser.showOpenDialog(this) == JFileChooser.APPROVE_OPTION) {
                StringBuilder sb = new StringBuilder("<html>");
                File[] files = chooser.getSelectedFiles();
                for (File file : files) {
                    sb.append(file.getName()).append(' ').append(file.length()).append(" bytes<br>");
                }
                sb.append("</html>");
                getContentPane().add(new JLabel(sb.toString()));
            }
        }
    }
    Compile this and package the resulting class into a jar file:
    Code:
    jar cvf LocalChooser.jar LocalChooser.class
    Now you'll want to create a key using keytool:
    Code:
    keytool -genkey
    Save yourself $100+/year and make a self signed certificate using this key:
    Code:
    keytool -selfcert
    Now simply sign your jar using your certificate:
    Code:
    jarsigner LocalChooser.jar mykey
    ('mykey' is the default alias for the previous commands; you can specify it if necessary.) It will now work.

    When you use WebDAV without a thirdparty program, it ends up just mounted on your filesystem much like a NFS or SMB mount. Probably the most interesting thing you can do with it is provide custom handlers. An example of this is the Subversion WebDAV interface for Apache. This is not trivial work to do correctly and client WebDAV support can be flakey.

    An alternative would be FTP. On mainframes FTP handlers are a pretty normal type of IPC method. Open upload into a certain directory, an RPG program is trigger and so forth. I wouldn't recommend this method however. :)

    For simplicity, I think the zip handling suggestion is a good one. It would be the easiest to implement and all major platforms (including Windows) support creating zip archives. It does involve more work for the user though.
     
  8. Doctor Q thread starter Administrator

    Doctor Q

    Staff Member

    Joined:
    Sep 19, 2002
    Location:
    Los Angeles
    #8
    Thanks, Kunimodi. I may try creating my own signed Java Applet as you suggest.
     

Share This Page