Changeset 14005 for trunk/web


Ignore:
Timestamp:
Feb 10, 2013, 6:33:04 PM (10 years ago)
Author:
jordan
Message:

In Web Client, use jQuery.ajax() to upload files

If we use FormData? and jQuery.ajax() calls to upload a torrent,
we can stop bundling the jquery.form.js module. In addition, this
simplifies passing arguments in the headers s.t. rpc-server.c doesn't
have to look for the CSRF token as one of the multiparts.

This changes the upload POST behavior, so give it a new name (upload2).
The old function (upload) will be deprecated but kept until 2.90 so
that third-party web clients using the old POST semantics will have
time to update.

Bug #5290 <https://trac.transmissionbt.com/ticket/5290>

Location:
trunk/web
Files:
2 added
2 deleted
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/web/index.html

    r14003 r14005  
    2222                <script type="text/javascript" src="./javascript/jquery/jquery.transmenu.min.js"></script>
    2323                <script type="text/javascript" src="./javascript/jquery/jquery.contextmenu.min.js"></script>
    24                 <script type="text/javascript" src="./javascript/jquery/jquery.form.min.js"></script>
    2524                <script type="text/javascript" src="./javascript/jquery/json2.min.js"></script>
    2625                <script type="text/javascript" src="./javascript/common.js"></script>
     
    292291                                                <label for="torrent_upload_url">Or enter a URL:</label>
    293292                                                        <input type="url" id="torrent_upload_url"/>
     293                                                <label id='add-dialog-folder-label' for="add-dialog-folder-input">Destination folder:</label>
     294                                                        <input type="text" id="add-dialog-folder-input"/>
    294295                                                        <input type="checkbox" id="torrent_auto_start" />
    295296                                                <label for="torrent_auto_start" id="auto_start_label">Start when added</label>
  • trunk/web/javascript/jquery/Makefile.am

    r13075 r14005  
    55  jquery.min.js \
    66  jquery.contextmenu.min.js \
    7   jquery.form.js \
    8   jquery.form.min.js \
    97  jquery.transmenu.min.js \
    108  json2.min.js
  • trunk/web/javascript/remote.js

    r14003 r14005  
    125125        },
    126126
     127        getFreeSpace: function(dir, callback, context) {
     128                var remote = this;
     129                var o = {
     130                        method: 'free-space',
     131                        arguments: { path: dir }
     132                };
     133                this.sendRequest(o, function(response) {
     134                        var args = response['arguments'];
     135                        callback.call (context, args.path, args['size-bytes']);
     136                });
     137        },
     138
    127139        changeFileCommand: function(torrentId, fileIndices, command) {
    128140                var remote = this,
  • trunk/web/javascript/transmission.js

    r14003 r14005  
    223223                $('#unlimited_download_rate').selectMenuItem();
    224224                $('#unlimited_upload_rate').selectMenuItem();
     225        },
     226
     227        /****
     228        *****
     229        ****/
     230
     231        updateFreeSpaceInAddDialog: function()
     232        {
     233                var formdir = $('input#add-dialog-folder-input').val();
     234                this.remote.getFreeSpace (formdir, this.onFreeSpaceResponse, this);
     235        },
     236
     237        onFreeSpaceResponse: function(dir, bytes)
     238        {
     239                var e, str, formdir;
     240
     241                formdir = $('input#add-dialog-folder-input').val();
     242                if (formdir == dir)
     243                {
     244                        e = $('label#add-dialog-folder-label');
     245                        if (bytes > 0)
     246                                str = '  <i>(' + Transmission.fmt.size(bytes) + ' Free)</i>';
     247                        else
     248                                str = '';
     249                        e.html ('Destination folder' + str + ':');
     250                }
    225251        },
    226252
     
    873899        /*
    874900         * Select a torrent file to upload
    875          * FIXME
    876901         */
    877902        uploadTorrentFile: function(confirmed)
    878903        {
    879                 // Display the upload dialog
    880                 if (! confirmed) {
    881                         $('input#torrent_upload_file').attr('value', '');
    882                         $('input#torrent_upload_url').attr('value', '');
    883                         $('input#torrent_auto_start').attr('checked', this.shouldAddedTorrentsStart());
     904                var formData,
     905                    fileInput   = $('input#torrent_upload_file'),
     906                    folderInput = $('input#add-dialog-folder-input'),
     907                    startInput  = $('input#torrent_auto_start'),
     908                    urlInput    = $('input#torrent_upload_url');
     909
     910                if (!confirmed)
     911                {
     912                        // update the upload dialog's fields
     913                        fileInput.attr('value', '');
     914                        urlInput.attr('value', '');
     915                        startInput.attr('checked', this.shouldAddedTorrentsStart());
     916                        folderInput.attr('value', $("#download-dir").val());
     917                        folderInput.change($.proxy(this.updateFreeSpaceInAddDialog,this));
     918                        this.updateFreeSpaceInAddDialog();
     919
     920                        // show the dialog
    884921                        $('#upload_container').show();
    885                         $('#torrent_upload_url').focus();
    886 
    887                 // Submit the upload form
    888                 } else {
    889                         var args = {};
    890                         var remote = this.remote;
    891                         var paused = !$('#torrent_auto_start').is(':checked');
    892                         if ('' != $('#torrent_upload_url').val()) {
    893                                 remote.addTorrentByUrl($('#torrent_upload_url').val(), { paused: paused });
    894                         } else {
    895                                 args.url = '../upload?paused=' + paused;
    896                                 args.type = 'POST';
    897                                 args.data = { 'X-Transmission-Session-Id' : remote._token };
    898                                 args.dataType = 'xml';
    899                                 args.iframe = true;
    900                                 $('#torrent_upload_form').ajaxSubmit(args);
    901                         }
     922                        urlInput.focus();
     923                }
     924                else
     925                {
     926                        formData = new FormData ();
     927                        jQuery.each(fileInput[0].files, function(i, file) {
     928                                formData.append ('file-'+i, file);
     929                        });
     930                        $.ajax ({
     931                                url: '../upload2',
     932                                data: formData,
     933                                headers : {
     934                                        'X-Transmission-Session-Id':        this.remote._token,
     935                                        'X-Transmission-Add-Paused':        !startInput.is(':checked'),
     936                                        'X-Transmission-Add-Download-Dir':  folderInput.val(),
     937                                        'X-Transmission-Add-URL':           urlInput.val()
     938                                },
     939                                cache: false,
     940                                contentType: false,
     941                                processData: false,
     942                                type: 'POST'
     943                        });
    902944                }
    903945        },
Note: See TracChangeset for help on using the changeset viewer.