Question

I need an upload system which uploads to a specific preset URL based on its filetype, for example:

images will be uploaded to “exampleserver.com/upload/image” and videos will be uploaded to “exampleserver.com/upload/video”.

I had a look at http://blueimp.github.com/jQuery-File-Upload/ but I couldn’t manage to modify the code (might be lack of experience in JQuery plugins)

The upload system does need to support multiple file selection and be cross-browser compatible (with the exception of IE6).

Any suggestions or modifications to the code of the Jquery file upload plugin mentioned above are greatly appreciated.

EDIT: the server where images and videos are uploaded to are NOT mine, they are Facebook’s.

Answer 1

For this to work your client’s need to have HTML5 support, File, FileList and Blob. You can see a demo how this works.

Changing the settings in the uploader is quite simple: (documentation find “Options” )

$('#fileupload').fileupload(
    'option',
    'url',
    '/path/to/upload/handler.json'
);

I would suggest you submit images and videos to the same locations and make the check on the server side. That will make your life much easier.

Edit:
Here is how you can check the extension and submit images and videos to different scripts:

function checkFileExtension(file) {
    var extension = file.name.split('.').pop().toLowerCase();
    var image_extensions = ['gif', 'png', 'jpg', 'jpeg'];
    var video_extensions = ['mp4', 'avi', 'wmv'];
    // The file extension is not in the array
    if ($.inArray(extension, image_extensions) >= 0)
        return "image";
    else if ($.inArray(extension, video_extensions) >= 0)
        return "video";
    else
        return "notAllowed";
}

// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload({
    // This is triggered when you drag'n'drop a file over the uploader
    drop:  function (e, data) {
        $.each(data.files, function (index, file) {
            // The file doesn't pass checkFileExtension, return an error
            var extension = checkFileExtension(file);
            if (extension != "image" && extension != "video") {
                // Print an error message in the UI
                file.error = "File extension not allowed!";
            }
        });
    },
    // This is triggered when you click a button and select files from a list.
    change:function (e, data) {
        $.each(data.files, function (index, file) {
            // The file doesn't pass checkFileExtension, return an error
            var extension = checkFileExtension(file);
            if (extension != "image" && extension != "video") {
                // Print an error message in the UI
                file.error = "File extension not allowed!";
            }
        });
    },
    // This is triggered on every file in the queue when you click "Upload"
    submit: function (e, data) {
        // The file is an image - submit those to
        if (checkFileExtension(data.files[0]) == "image") {
            $('#fileupload').fileupload(
                'option',
                'url',
                '/upload/images'
            );
        }
        // The file is a video.
        else if(checkFileExtension(data.files[0]) == "video"){
            $('#fileupload').fileupload(
                'option',
                'url',
                '/upload/videos'
            );
        }
        // The file is not a video/image - don't submit the file.
        else {
            return false;
        }
    }
});