Hi everyone,
i am wondering how to be able to upload a file using extjs, php and a mysql db...
I have a form(called register) with several fields, one of them happens to be a FileUploadField (i want to upload a picture associated to the form).
Anyway, when i submit my form i launch the following function :
function create(){
Ext.Ajax.request({
waitMsg: 'Please wait...',
url: 'registration.php',
action:'submit',
params: {task: "create" , name:form_name.getValue(), lastname:form_lastname.getValue(),picture:form_pic ture.getValue()},
success: function(response){
var result=eval(response.responseText);
switch(result){
case 1:
Ext.MessageBox.alert('Congratulations','You are ow registered');
register.getForm().reset();
break;
default:
Ext.MessageBox.alert('Warning','warning');
break;
}
},
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('error','could not connect to the database. retry later');
}
});
}
The thing is that i get well the name of the picture, but not the picture itself, it doesn't seem to be transfered to my server...
I am sure i am wrong around this getValue() thing, but i don't know how to solve it...
Anyone to give me a hand please ?
Thanks
So are the fields all children of the same form?
The thing is that i don't know how to combine the register.getForm().submit() and to pass some parameters in the function as :
params :{task :"create", date_added:form_date_added.getValue().format('Y-m-d')}
could you give me an example please ?
(light) working php to upload an image - you figure out how to insert it into your db.
$target_path = "images/";
$fileName = basename( $_FILES['image']['name']);
$target_path = $target_path .$fileName;
if(move_uploaded_file($_FILES['image']['tmp_name'], $target_path)) {
echo "{success: true, imgPath : '" . $target_path . "', fileName : '$fileName'}";
}
else{
echo "{ success: false, msg : 'There was an error!'}";
}
?>
try fileUpload : true on your form and use the form's submit method.
are they all in one form?
This is an upload panel that uses the Ext file upload field (see examples for the source)
ImageUploadPanel = function (config) {
var win;
var form;
var previewPanel;
var fileField;
return {
init : function(config) {
fileField = new Ext.form.FileUploadField({
width : 350,
emptyText : 'Select an image',
fieldLabel : 'Image',
name : 'image',
buttonCfg : {
text : '',
iconCls : 'upload-icon'
},
listeners : {
fileselected : {
scope : this,
fn : this.submit
}
},
getValue : function() {
return(this.manualValue);
Saving large collection of PICTURES--on the internet::
So I want to be able to UPLOAD them (preferably a place that focuses on this issue, thus allowing mass uploads or drag and drop), and then the site will let
http://answers.google.com/answers/threadview/id/776396.htmlHOME |
Windows XP: Font Settings for Welcome Screen::
(tisme: Could you upload a picture somewhere on the internet and let me know I appreciate your time and effort on this issue. If anything is unclear,
http://answers.google.com/answers/threadview?id=375261HOME |
}
});
if (! win) {
form = new Ext.form.FormPanel({
fileUpload : true,
labelWidth : 50,
height : 50,
width : 475,
region : 'north',
border : false,
bodyStyle : 'padding: 10px; background-color: #DFE8F6',
items : fileField
});
previewPanel = new Ext.Panel({
html : 'preview area',
region : 'center',
width : 475,
autoScroll : true,
bodyStyle : 'padding: 10px; background-color: #DFE8F6',
border : false
});
win = new Ext.Window({
width : 500,
height : 400,
layout : 'border',
title : 'Please Select an image to upload.',
border : false,
resizable : false,
movable : false,
modal : true,
closeAction : 'hide',
autoScroll : true,
items : [
form,
previewPanel
],
buttons : [
{
text : 'Save',
handler : function() {
//console.info('fileField.getValue() = ' + fileField.getValue());
this.saveCallback(fileField.getValue());
this.hide.defer(100);
},
scope : this
},
{
text : 'Cancel',
handler : this.hide,
scope : this
}
]
});
}
},
show : function(config) {
config = config {};
this.init(config);
this.saveCallback = config.saveCallback Ext.emptyFn;
win.show();
if (config.reset) {
this.reset();
}
},
hide : function() {
win.hide();
},
reset : function() {
form.getForm().reset();
previewPanel.body.update('Please upload an image.');
},
submit : function() {
win.el.mask('please wait...', 'x-mask-loading');
form.form.submit({
url : 'imageUploader.php',
success : function(form, result) {
//console.info(result);
fileField.manualValue = result.result.fileName;
previewPanel.body.fadeOut({
callback : function() {
win.el.unmask();
Ext.MesssageBox.alert(result.result.fileName);
}
});
},
failure : function(form, result) {
win.el.unmask('please wait...', 'x-mask-loading');
previewPanel.body.update('Please upload an interaction process PNG, JPG or GIF.');
},
scope : this
});
}
}
}();
 Heres my question?
 Why would someone get bored with doing IT for 10 years?
|
Upload issue