mirror of
https://github.com/codex-storage/deluge.git
synced 2025-01-13 04:54:23 +00:00
[#2769] [WebUI] Simplified torrent file upload UX
Previously, the process for uploading a file in the Web-UI required three steps. Click 'File' to open the 'Add from File' window. Click 'Browse' to select the file. Finally, click 'Add' to upload the file. These steps have been combined into one, making the process much easier. Now, clicking 'File' opens the file browser directly. After a file is selected, it is uploaded automatically.
This commit is contained in:
Benjamin Dykstra
Calum Lind
parent
d4535c6164
commit
005db434f8
@ -32,8 +32,35 @@
|
||||
|
||||
Ext.namespace('Deluge.add');
|
||||
|
||||
Deluge.add.AddWindow = Ext.extend(Deluge.add.Window, {
|
||||
// This override allows file upload buttons to contain icons
|
||||
Ext.override(Ext.ux.form.FileUploadField, {
|
||||
onRender : function(ct, position){
|
||||
Ext.ux.form.FileUploadField.superclass.onRender.call(this, ct, position);
|
||||
|
||||
this.wrap = this.el.wrap({cls:'x-form-field-wrap x-form-file-wrap'});
|
||||
this.el.addClass('x-form-file-text');
|
||||
this.el.dom.removeAttribute('name');
|
||||
this.createFileInput();
|
||||
|
||||
var btnCfg = Ext.applyIf(this.buttonCfg || {}, {
|
||||
text: this.buttonText
|
||||
});
|
||||
this.button = new Ext.Button(Ext.apply(btnCfg, {
|
||||
renderTo: this.wrap,
|
||||
cls: 'x-form-file-btn' + (btnCfg.iconCls ? ' x-btn-text-icon' : '')
|
||||
}));
|
||||
|
||||
if(this.buttonOnly){
|
||||
this.el.hide();
|
||||
this.wrap.setWidth(this.button.getEl().getWidth());
|
||||
}
|
||||
|
||||
this.bindListeners();
|
||||
this.resizeEl = this.positionEl = this.wrap;
|
||||
}
|
||||
});
|
||||
|
||||
Deluge.add.AddWindow = Ext.extend(Deluge.add.Window, {
|
||||
title: _('Add Torrents'),
|
||||
layout: 'border',
|
||||
width: 470,
|
||||
@ -94,10 +121,25 @@ Deluge.add.AddWindow = Ext.extend(Deluge.add.Window, {
|
||||
margins: '5 5 5 5',
|
||||
bbar: new Ext.Toolbar({
|
||||
items: [{
|
||||
iconCls: 'x-deluge-add-file',
|
||||
text: _('File'),
|
||||
handler: this.onFile,
|
||||
scope: this
|
||||
id: 'fileUploadForm',
|
||||
xtype: 'form',
|
||||
layout: 'fit',
|
||||
baseCls: 'x-plain',
|
||||
fileUpload: true,
|
||||
items: [{
|
||||
buttonOnly: true,
|
||||
xtype: 'fileuploadfield',
|
||||
id: 'torrentFile',
|
||||
name: 'file',
|
||||
buttonCfg: {
|
||||
iconCls: 'x-deluge-add-file',
|
||||
text: _('File')
|
||||
},
|
||||
listeners: {
|
||||
scope: this,
|
||||
'fileselected': this.onFileSelected
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
text: _('Url'),
|
||||
iconCls: 'icon-add-url',
|
||||
@ -117,6 +159,7 @@ Deluge.add.AddWindow = Ext.extend(Deluge.add.Window, {
|
||||
})
|
||||
});
|
||||
|
||||
this.fileUploadForm = Ext.getCmp('fileUploadForm').getForm();
|
||||
this.optionsPanel = this.add(new Deluge.add.OptionsPanel());
|
||||
this.on('hide', this.onHide, this);
|
||||
this.on('show', this.onShow, this);
|
||||
@ -125,6 +168,8 @@ Deluge.add.AddWindow = Ext.extend(Deluge.add.Window, {
|
||||
clear: function() {
|
||||
this.list.getStore().removeAll();
|
||||
this.optionsPanel.clear();
|
||||
// Reset upload form so handler fires when a canceled file is reselected
|
||||
this.fileUploadForm.reset();
|
||||
},
|
||||
|
||||
onAddClick: function() {
|
||||
@ -141,7 +186,7 @@ Deluge.add.AddWindow = Ext.extend(Deluge.add.Window, {
|
||||
deluge.client.web.add_torrents(torrents, {
|
||||
success: function(result) {
|
||||
}
|
||||
})
|
||||
});
|
||||
this.clear();
|
||||
this.hide();
|
||||
},
|
||||
@ -188,15 +233,41 @@ Deluge.add.AddWindow = Ext.extend(Deluge.add.Window, {
|
||||
this.url.on('add', this.onTorrentAdd, this);
|
||||
}
|
||||
|
||||
if (!this.file) {
|
||||
this.file = new Deluge.add.FileWindow();
|
||||
this.file.on('beforeadd', this.onTorrentBeforeAdd, this);
|
||||
this.file.on('add', this.onTorrentAdd, this);
|
||||
}
|
||||
|
||||
this.optionsPanel.form.getDefaults();
|
||||
},
|
||||
|
||||
onFileSelected: function() {
|
||||
if (this.fileUploadForm.isValid()) {
|
||||
this.torrentId = this.createTorrentId();
|
||||
this.fileUploadForm.submit({
|
||||
url: deluge.config.base + 'upload',
|
||||
waitMsg: _('Uploading your torrent...'),
|
||||
success: this.onUploadSuccess,
|
||||
scope: this
|
||||
});
|
||||
var name = this.fileUploadForm.findField('torrentFile').value;
|
||||
name = name.split('\\').slice(-1)[0];
|
||||
this.onTorrentBeforeAdd(this.torrentId, name);
|
||||
}
|
||||
},
|
||||
|
||||
onUploadSuccess: function(fp, upload) {
|
||||
if (upload.result.success) {
|
||||
var filename = upload.result.files[0];
|
||||
this.fileUploadForm.findField('torrentFile').setValue('');
|
||||
deluge.client.web.get_torrent_info(filename, {
|
||||
success: this.onGotInfo,
|
||||
scope: this,
|
||||
filename: filename
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
onGotInfo: function(info, obj, response, request) {
|
||||
info.filename = request.options.filename;
|
||||
this.onTorrentAdd(this.torrentId, info);
|
||||
},
|
||||
|
||||
onTorrentBeforeAdd: function(torrentId, text) {
|
||||
var store = this.list.getStore();
|
||||
store.loadData([[torrentId, null, text]], true);
|
||||
|
||||
@ -1,117 +0,0 @@
|
||||
/*!
|
||||
* Deluge.add.File.js
|
||||
*
|
||||
* Copyright (c) Damien Churchill 2009-2010 <damoxc@gmail.com>
|
||||
*
|
||||
* This program is free software; you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation; either version 3, or (at your option)
|
||||
* any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, write to:
|
||||
* The Free Software Foundation, Inc.,
|
||||
* 51 Franklin Street, Fifth Floor
|
||||
* Boston, MA 02110-1301, USA.
|
||||
*
|
||||
* In addition, as a special exception, the copyright holders give
|
||||
* permission to link the code of portions of this program with the OpenSSL
|
||||
* library.
|
||||
* You must obey the GNU General Public License in all respects for all of
|
||||
* the code used other than OpenSSL. If you modify file(s) with this
|
||||
* exception, you may extend this exception to your version of the file(s),
|
||||
* but you are not obligated to do so. If you do not wish to do so, delete
|
||||
* this exception statement from your version. If you delete this exception
|
||||
* statement from all source files in the program, then also delete it here.
|
||||
*/
|
||||
Ext.ns('Deluge.add');
|
||||
|
||||
/**
|
||||
* @class Deluge.add.FileWindow
|
||||
* @extends Deluge.add.Window
|
||||
*/
|
||||
Deluge.add.FileWindow = Ext.extend(Deluge.add.Window, {
|
||||
|
||||
title: _('Add from File'),
|
||||
layout: 'fit',
|
||||
width: 350,
|
||||
height: 115,
|
||||
modal: true,
|
||||
plain: true,
|
||||
buttonAlign: 'center',
|
||||
closeAction: 'hide',
|
||||
bodyStyle: 'padding: 10px 5px;',
|
||||
iconCls: 'x-deluge-add-file',
|
||||
|
||||
initComponent: function() {
|
||||
Deluge.add.FileWindow.superclass.initComponent.call(this);
|
||||
this.addButton(_('Add'), this.onAddClick, this);
|
||||
|
||||
this.form = this.add({
|
||||
xtype: 'form',
|
||||
baseCls: 'x-plain',
|
||||
labelWidth: 35,
|
||||
autoHeight: true,
|
||||
fileUpload: true,
|
||||
items: [{
|
||||
xtype: 'fileuploadfield',
|
||||
id: 'torrentFile',
|
||||
width: 280,
|
||||
height: 24,
|
||||
emptyText: _('Select a torrent'),
|
||||
fieldLabel: _('File'),
|
||||
name: 'file',
|
||||
buttonCfg: {
|
||||
text: _('Browse') + '...'
|
||||
}
|
||||
}]
|
||||
});
|
||||
},
|
||||
|
||||
// private
|
||||
onAddClick: function(field, e) {
|
||||
if (this.form.getForm().isValid()) {
|
||||
this.torrentId = this.createTorrentId();
|
||||
this.form.getForm().submit({
|
||||
url: deluge.config.base + 'upload',
|
||||
waitMsg: _('Uploading your torrent...'),
|
||||
failure: this.onUploadFailure,
|
||||
success: this.onUploadSuccess,
|
||||
scope: this
|
||||
});
|
||||
var name = this.form.getForm().findField('torrentFile').value;
|
||||
name = name.split('\\').slice(-1)[0];
|
||||
this.fireEvent('beforeadd', this.torrentId, name);
|
||||
}
|
||||
},
|
||||
|
||||
// private
|
||||
onGotInfo: function(info, obj, response, request) {
|
||||
info['filename'] = request.options.filename;
|
||||
this.fireEvent('add', this.torrentId, info);
|
||||
},
|
||||
|
||||
// private
|
||||
onUploadFailure: function(form, action) {
|
||||
this.hide();
|
||||
},
|
||||
|
||||
// private
|
||||
onUploadSuccess: function(fp, upload) {
|
||||
this.hide();
|
||||
if (upload.result.success) {
|
||||
var filename = upload.result.files[0];
|
||||
this.form.getForm().findField('torrentFile').setValue('');
|
||||
deluge.client.web.get_torrent_info(filename, {
|
||||
success: this.onGotInfo,
|
||||
scope: this,
|
||||
filename: filename
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user