Upload file on external server

Posted in xn--kfs74mzzid01b.com edit by cfz on January 8th, 2009

In my webportal we have a functionality of uploading presentations. Till now, on click of 'Upload Presentations' on my local page, we used to open a new page in another window and that uploading application was on external server. I.e. suppose my server is www.xxx.xom, the other server is www.yyy.xom. Hence we used to give the full URL with appended parameters to open the window, and the upload functionality was accomplished in that application.

But now the external app has a primitive UI and we're moving to a new UI with ExtJS. Hence to match the UI, I'm trying to include a ExtJS upload window inside my application, and once the user selects the files to be uploaded and all, I'll do a POST to the external server. I tested this through a normal HTML page on my local server and doing a POST to the external server, and it worked fine. So now I'm trying to accomplish this with ExtJS.

This is the HTML page on my local server which works perfectly to POST on external server. (I have removed some validations and dummified the URL.)
<%@page language="java" contentType="text/html;charset=UTF-8"%>

Upload Presentation

Add New Presentation

Find:

Name Presentation:

Slide Size:

So to code this functionality in my local webpage using Window and FormPanel, I'm using this code:
Ext.get(getNetuiTagName("uploadPresentationBtn",this)).on('click', function(e){
openUploader();
});

var ulDialogTest;
var ulFormTest;

function openUploader()
{
ulDialogTest = new Ext.Window({
layout: 'fit',
height: 400,
width: 500,
minHeight: 50,
minWidth: 100,
modal: true,
shadow: true,
collapsible: true,
closable: true,
title: "Upload a Presentation",
resizable: true,
bodyBorder: false,
buttons: [{text: "Upload", handler: submitAjaxReq },
{text: "Cancel", handler: function() {ulDialogTest.hide();} }],
keys: [{key: 27, fn: function() {ulDialogTest.hide();}, scope: this}],
items: [
ulFormTest = new Ext.form.FormPanel({
id: 'ulFormID',
defaultType: 'textfield',
title: 'Upload a Document',
items: [{fieldLabel: 'Select File', name: 'file1', inputType: 'file'},
{fieldLabel: 'Name of Presentation:', name: 'description', inputType: 'text'},
{fieldLabel: 'Slide Size:', name: 'dimension', inputType: 'text'}
]
})
]
});
ulDialogTest.show();
}

function submitAjaxReq()
{
ulDialogTest.hide();
Ext.Ajax.request({
url: 'http://test.testupload.com/upload/uploader.jsp',
params: {
owner: '2103009',
file1: ulFormTest.getForm().findField('file1').getValue() ,
description: ulFormTest.getForm().findField('description').getV alue(),
dimension: ulFormTest.getForm().findField('dimension').getVal ue()
},
method: "POST",
timeout: 15000,
waitMsg:'Executing Request...',
isUpload: true,
headers: {'Content-type':'multipart/form-data'},
success: processSuccessResponse,
failure: processFailureResponse
});
ulDialogTest.destroy();
ulFormTest.destroy();
}

function processSuccessResponse(e){
alert('success');
alert(e.responseText);
}

function processFailureResponse(e){
alert('failure');
alert(e.responseText);
}

Here in the above code, if I give a URL to be on my local system it does work fine. But when I point to the external server URL, it fails due to some security reasons of ExtJS/ JS/ Browser.

This is the error I get in FF:
[Exception... "'Permission denied to call method XMLHttpRequest.open' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "" data: no]
Line 0

Can you please help me out how can I accomplish this functionality??
Any help will be appreciated. Thank you!

-Jay

Thanks @RWaters.

Yeah I did some study on the web about this Ajax submit on external server, and came across the reasons to keep this security restrictions. Problem is that I cant make any changes on the external server. That is managed by a different team and is used by various applications other than mine. So I need to manage it on my end.

For example, suppose I do a normal html form submit. I'll have a new UI as per my new specs which is based on ExtJS look and feel. It would work good till I submit the form. After that, the external server will redirect the page to another page which serves as a confirmation page. But the confirmation page is having a different UI and I dont want it to display on my window. Instead I want to be able to catch that response and i would like to display my own confirmation page based on the response. How would I be able to do that? Can you please give me an approach of how to catch a response after doing a normal Html submit?

The approach which first came to my mind was take the inputs into a form and copy those values into fields inside a hidden iFrame and then submit the form inside the iFrame. But first problem in this was it doesn't let me copy the File field inside a file field in another form due to security restrictions. Second issue is how would i know that the response has been recieved.

Thank you so much for the help.

-Jay

This is a security limitation with Ajax requests. You will not be able to use Ajax to submit a form to a server on a different domain. You can use a standard form submit or load a page from that server with an Ext interface that uses Ajax.

#If you have any other info about this subject , Please add it free.#

Upload file on external server

Archives

Meta