JSON callback after file upload - ajax

Question

I have problem trying to upload a file via json/ajax and does not look like the file was uploaded. Only name of the file was displayed in the console output.
My html code as shown below.
<form action="/cgi-bin/upload.cgi" method="post" enctype="multipart/form-data" target="upIFrame">
<input type="file" id="uploadFileName" name="uploadFileName" size="30" >
<input type="button" id="upgradeFile" name="upgradeFile" value="Upload" onclick="ul.load()" />
<iframe id="upIFrame" name="upIFrame" src="#" style="display: none;"></iframe>
</form>
the ul.load() is calling this line below and eventually the transfer.ajax code will call
transfer.ajax({
url:'upload.cgi',
data:{filename: ul.filename},
success: success,
error: error,
async: true
});
ul.filename comes from uploadFileName
and transfer.ajax code shown below
transfer = {
ajax: function(p) {
if (p.url.indexOf('/') == -1) {
p.url = '/cgi-bin/' + p.url;
}
p.type = 'POST';
p.contentType = 'application/json';
p.dataType = 'json';
p.cache = false;
if (p.data != undefined) {
p.data = JSON.stringify(p.data);
}
$.ajax(p);
}
};
the result after viewing in Fire Fox is
JSON
filename "file.tgz"
Source
{"filename":"file.tgz"}
Could some tell me what I did wrong or what I missed?
TIA
I modified the code to the following...
var fd = new FormData();
fd.append("filename",ul.filename);
$.ajax({
url: "/cgi-bin/test.cgi",
type: "POST",
data: fd,
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
beforeSend : function(xhr){
xhr.setRequestHeader('Content-Disposition', 'form-data; name=\"uploadFileName\"; filename=\"' + ul.filename + '\"');
},
});
and the Request Headers in Fire Fox are as
Accept-Encoding gzip, deflate
Accept-Language en-US,en;q=0.5
Content-Disposition form-data; name="uploadFileName"; filename="test.tgz"
Content-Length 157
Content-Type multipart/form-data; boundary=---------------------------20025277823050
X-Requested-With XMLHttpRequest
but the "Post" display the following
Source
-----------------------------20025277823050 Content-Disposition: form-data; name="filename"
test.tgz -----------------------------20025277823050--
How would I include filename="test.tgz"? what's missing?
TIA

Answer 1

Can you try this,
var fd = new FormData();
fd.append("filename",ul.filename);`enter code here`
$.ajax({
url: "/cgi-bin/test.cgi",
type: "POST",
data: fd,
processData: false,
contentType: false,
beforeSend : function(xhr){
xhr.setRequestHeader('Content-Disposition', 'form-data; name=\"' + ul.filename + '\"; filename=\"' + ul.filename + '\"');
}
});
I think name attribute should be as the file name.
Thanks :).