View Full Version : Can't upload file. Need help.

12 Jun 2012, 7:41 AM
Hi, everyone. I'm using extjs 4.1 I have to upload file using extjs(xtype: 'filefield' component and ajax.request) and WCF-service to put its into database. Extjs Dialog
<pre id="line1"><span>items: [{
<span id="line2593"></span> xtype: 'form',
<span id="line2594"></span> Id: 'UploadFileDialogForm',
<span id="line2595"></span> border: false,
<span id="line2596"></span> bodyStyle: 'padding:10px;',
<span id="line2597"></span> labelWidth: 70,
<span id="line2598"></span> listeners: {
<span id="line2599"></span> render: {
<span id="line2600"></span> fn: function (source) {
<span id="line2601"></span> Controls.UploadFileDialogForm = this.getForm()
<span id="line2602"></span> }
<span id="line2603"></span> }
<span id="line2604"></span> },
<span id="line2605"></span> items: [{
<span id="line2606"></span> id: 'FilePath',
<span id="line2607"></span> fieldLabel: 'Select a file',
<span id="line2608"></span> name: 'stream',
<span id="line2609"></span> labelStyle: 'text-align:right;',
<span id="line2610"></span> anchor: '100%',
<span id="line2611"></span> buttonText: 'Browse...',
<span id="line2612"></span> allowBlank: false,
<span id="line2613"></span> xtype: 'filefield'
<span id="line2614"></span> }]
<span id="line2615"></span> }],
<span id="line2616"></span> buttons: [{
<span id="line2617"></span> tooltip: 'Upload file.',
<span id="line2618"></span> text: 'Ok',
<span id="line2619"></span> listeners: {
<span id="line2620"></span> click: {
<span id="line2621"></span> fn: function (source, extEvent) {
<span id="line2622"></span> var el = Ext.getCmp("FoldersTree");
<span id="line2623"></span> var mod = el.getSelectionModel();
<span id="line2624"></span> if (mod.hasSelection() == 0) {
<span id="line2625"></span> Controls.UploadFileDialog.hide();
<span id="line2626"></span> Ext.Msg.show({
<span id="line2627"></span> title: 'Select folder.',
<span id="line2628"></span> msg: 'Please, select folder to upload file.',
<span id="line2629"></span> buttons: Ext.Msg.OK,
<span id="line2630"></span> });
<span id="line2631"></span> }
<span id="line2632"></span> else {
<span id="line2633"></span> var FilePathItem = Ext.getCmp("FilePath");
<span id="line2634"></span> var sel = mod.getSelection();
<span id="line2635"></span> var folder = sel[0];
<span id="line2636"></span> var fileName = FilePathItem.getRawValue();
<span id="line2637"></span> var slashIndex = fileName.lastIndexOf('\\') + 1;
<span id="line2638"></span> var sendingFileName = fileName.substring(slashIndex);
<span id="line2639"></span> Ext.Ajax.request({
<span id="line2640"></span> url: 'Services/TrialLibrary.svc/UploadFile/' + folder.data.id + '/' + sendingFileName,
<span id="line2641"></span> method: 'POST',
<span id="line2642"></span> waitMsg: 'Please wait...',
<span id="line2643"></span> waitTitle: 'Submiting data',
<span id="line2644"></span> form: 'UploadFileDialogForm',
<span id="line2645"></span> headers: {
<span id="line2646"></span> 'Content-Type': 'multipart/form-data'
<span id="line2647"></span> },
<span id="line2648"></span> failure: ErrorDialog,
<span id="line2649"></span> success: function () {
<span id="line2650"></span> Controls.UploadFileDialog.hide();
<span id="line2651"></span> Controls.DocumentsGrid.store.load();
<span id="line2652"></span> }
<span id="line2653"></span> })
<span id="line2654"></span> }
<span id="line2655"></span> }
<span id="line2656"></span> }
<span id="line2657"></span> },
<span id="line2658"></span> xtype: 'button'
<span id="line2659"></span> }</span></pre>&nbsp; The service
public void UploadFile(string folderId, string fileName, Stream stream) { //putting into DB }

But Length of stream = 0, folderId and fileName are right. I tried to change method, RequestFormat, Content-Type. Maybe somebody can help me. Thanks

13 Jun 2012, 4:40 AM
Use the form's submit method instead of Ext.Ajax.request.

2 Oct 2012, 7:09 PM
So why not use Ext.Ajax.request()? form.submit() is blocking isn't it? And wouldn't an async ajax POST be non-blocking?