jDrop file uploader

0 comments

Download

Latest version 1.2

How To Use

Inside your HTML document, add in a reference to jQuery and jDrop in the head tag.
Inside the body tag you can specify a custom UI. Add a button for Selecting Files, Beginning Upload and Cancel Upload (optional). Also, if you want, add an html5 drag/drop area. Buttons do not have to be a button or input element, they can be any stand-alone element as long as it contains an ID.
    <!DOCTYPE html>
    <html>
        <head>
            <title>
                Some Page Title
            </title>
            <script src="jquery-1.9.1.min.js"></script>
            <script src="jdrop-1.0.2.min.js"></script>
        </head>
        <body>
            <button id="btSelectFile">Choose File</button>
            <button id="btBeginUpload">Upload</button>
        </body>
    </html>
Now in jQuery, instantiate the jDrop object and set the parameters that you require. All element references should be jQuery objects.
The following contains the bare minimum required to upload a file:
    $(function () {

        /// Fires when the page has loaded

        /// instantiate jDrop file uploader

        var myFileUploader = new jDrop({
            uploadButton: $("#btUpload"), /* Button that will begin the upload */
            selectButton: $("#btSelectFiles"), /* Button used to select files */
            serverURL: 'Upload.aspx'  /* URL to post the files to */
        });

        myFileUploader.create(); /* Create the file uploader */

    });

    
Alternativly, you are able to do the same thing this way:
    $(function () {

        /// Fires when the page has loaded

        /// instantiate jDrop file uploader

        var myFileUploader = new jDrop();

        myFileUploader.uploadButton = $("#btUpload");
        myFileUploader.selectButton  = $("#btSelectFiles");
        myFileUploader.serverURL = 'Upload.aspx';

        myFileUploader.create(); 

    });

    
The next example specified all the available parameters:
    $(function () {

        /// Fires when the page has loaded

        /// instantiate jDrop file uploader

        var myFileUploader = new jDrop({
            uploadButton: $("#btUpload"), /* Button that will begin the upload */
            selectButton: $("#btSelectFiles"), /* Button used to select files */
            cancelButton: $("#btCancel"), /* Aborts the file upload */
            dropArea: $("#dvDropArea"), /* Area for dropping files */
            serverURL: 'Upload.aspx',  /* URL to post the files to */
            allowMultiple: true,  /* Allow selecting multiple files for browsers that support it */
            noHTML5: function () {
                ///  This function will get called if the users browser does not support HTML5 file uploads. 
                $("#dvDropArea").html('Drag / Drop not supported');
            },
            noHTML5UploadStart: function () {
                ///  This function will get called when upload begins if users browser does not support HTML5 uploading. 
            },
            filesSelected: function (files) {

                ///  Gets called when users selects files. Client validation can be done here. 
                ///Array of file objects

                /// files that you do not want to be sent to server for processing, set its valid flag to false i.e. file.valid = false;
                /// fileObject will be null for legacy uploads

            },
            uploadError: function (errorDetails) {
                /// Fires if an error occours during the upload 
                /// Description of the error 

                alert(errorDetails);

            },
            uploadAbort: function (abortDetails) {
                /// Fires if the user aborts the upload
                /// Description of the Abort 
            },
            uploadProgress: function (progressDetails) {
                /// Gets called during HTML5 upload with progress information
                ///

                /* Example Usage :
                if (progressDetails.lengthComputable) {
                    var bytesTotal = progressDetails.total,
                         bytesLoaded = progressDetails.loaded;

                    var percent = (bytesLoaded * 100) / bytesTotal;
                }
                */

            },
            uploadComplete: function (files) {
            
                /// Fires when the file upload is complete
                /// Array of uploaded files 

            },
            dropEnter: function () {
                /// Fires when a users mouse enters the drop area
            },
            dropExit: function () {
                /// Fires when the users mouse leaves the drop area
            },
            dropOver: function () {
                /// Fires when a users mouse moves over the drop area
            },
            fileDrop: function () {
                /// Fires when a user drops a file in the drop area
            }

        });

        myFileUploader.create(); /* Create the file uploader */

    });


    
You must return jSON with file information from the server.
The server then receives two collections, a file collection and an ID collection. The ID collection is used to associate files and their status.
Processing on the server is dependent on what server code you use, but it must return jSON specifying details of the uploaded file as below:
    [{ "id": 1, "name": "withered tree.jpg", "type": "image/jpeg", "size": "43519", "status": "Uploaded" }]
    
Server processing example in C# as below.
    var output = "[";
    string myIDS = Request.Form[0];
    string[] ids = myIDS.Split(',');
    int count = 0;
    HttpFileCollection PostedFiles = Request.Files;

    if (PostedFiles.Count > 0)
    {
        for (var i = 0; i < PostedFiles.Count; i++)
        {
            HttpPostedFile PostedFile = PostedFiles[i];

            /// TODO: save the file to the server

            if (output != "[")
            {
                output += ",";
            }

            output += "{ \"id\": " + ids[count] + ", \"name\": \"" + PostedFile.FileName + 
                "\", \"type\": \"" + PostedFile.ContentType + "\", \"size\": \"" + 
                PostedFile.ContentLength + "\", \"status\": \"Uploaded\" }";

            count++;


        }
        output += "]";
        Response.Write(output);
    }
    



Comments


Leave a Comment