PDA

View Full Version : Using forms for file uploads



Ex_Soft
18 Jun 2010, 12:19 AM
I test this (http://www.javabeat.net/articles/163-ext-js-30-cookbook-7.html) example (from Ext JS 3.0 Cookbook):


Ext.BLANK_IMAGE_URL = "../images/s.gif";

Ext.onReady(function() {
Ext.QuickTips.init();

var
picBox = {
columnWidth: "100 px",
bodyStyle: "padding: 10px",
items: [{
xtype: "box",
autoEl: {
tag: "div",
html: '<img id="pic" src="' + Ext.BLANK_IMAGE_URL + '" class="img-contact" />'
}
}]
},
picFiles = {
columnWidth: .65,
layout: "form",
labelAlign: "top",
items: [{
xtype: "textfield",
fieldLabel: "Current",
labelSeparator: "",
name: "currPic",
id: "currPic",
readOnly: true,
disabled: true,
anchor: "100%"
}, {
xtype: "textfield",
fieldLabel: "New (JPG or PNG only)",
labelSeparator: "",
name: "newPic",
id: "newPic",
style: "width: 300px",
inputType: "file",
allowBlank: false
}]
},
pictUploadForm = new Ext.FormPanel({
frame: true,
title: "Change Picture",
bodyStyle: "padding: 5px",
width: 420,
layout: "column",
url: "contact-picture.aspx",
method: "POST",
fileUpload: true,
items: [picBox, picFiles],
buttons: [{
text: "Upload Picture",
handler: function() {
var
theForm = pictUploadForm.getForm();

if (!theForm.isValid())
{
Ext.MessageBox.alert("Change Picture", "Please select a picture");
return;
}

if (!validateFileExtension(Ext.getDom("newPic").value))
{
Ext.MessageBox.alert("Change Picture", "Only JPG or PNG, please.");
return;
}

theForm.submit({
params: { act: "setPicture", id: "contact1" },
waitMsg: "Uploading picture"
})
}
}, {
text: "Cancel"
}]
});

pictUploadForm.on({
actioncomplete: function(form, action) {
if (action.type == "load")
{
var
pic = action.result.data;

Ext.getDom("pic").src = pic.file;
Ext.getCmp("currPic").setValue(pic.file);
}

if (action.type == "submit")
{
var
pic = action.result.data;

Ext.getDom("pic").src = pic.file;
Ext.getCmp("currPic").setValue(pic.file);
Ext.getDom("newPic").value = "";
}
}
});

pictUploadForm.render(document.body);
pictUploadForm.getForm().load({ params: { act: "getPicture", id: "contact1" }, waitMsg: "Loading" });
});

function validateFileExtension(fileName)
{
var
exp = /^.*\.(jpg|JPG|png|PNG)$/;

return exp.test(fileName);
}
1. In IE7 error is occured "Invalid argument" at ext-all-debug.js


setWidth : function(width, animate){
var me = this;
width = me.adjustWidth(width);
==> !animate || !me.anim ?
==> me.dom.style.width = me.addUnits(width) :
==> me.anim({width : {to : width}}, me.preanim(arguments, 1));
return me;
}
2. In IE7 only buttons "Upload picture" && "Cancel" are visible.
3. Load. Server send


{"success":"true","data ":{"contactId":"contact id","file":"./img/27265.gif"}}
but


actioncomplete: function(form, action) {
if (action.type == "load")
{
var
pic = action.result.data;

Ext.getDom("pic").src = pic.file;
Ext.getCmp("currPic").setValue(pic.file);
}
isn't occured and pic.src isn't changed.
4. Upload. Server send


{"success":"true","data ":{"contactId":"contact id","file":"./download/user.png"}}
but
4.1. Browser (FF 3.6.3) offer me to save contact-picture.aspx
4.2.

actioncomplete: function(form, action) {
if (action.type == "submit")
{
var
pic = action.result.data;

Ext.getDom("pic").src = pic.file;
Ext.getCmp("currPic").setValue(pic.file);
Ext.getDom("newPic").value = "";
}
isn't occured and pic.src isn't changed.
Is this example incorrect?

P.S. ExtJS ver.3.2.1