PDA

View Full Version : [solved] Help need with form combined with fileupload



ahoekie
21 May 2007, 11:14 AM
I creating a form from normal HTML I'm using ajax to submit the form. However when I don't add a filefield everything goes fine and I can see the AJAX call in firefox along with the posted values. When I add a file field nothing is shown anymore. I expect that I'm doing something wrong but don't know what. :(

Here is the HTML:


<form action="php_scripts/ajaxformtest.php" method="post" enctype="multipart/form-data" class="x-form" id="adminform">
<div class="admin-form">
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
<h3>Dvd Distributeur Toevoegen</h3>
<!-- begin form layout -->
<div class="x-form-label-top" id="container">
<fieldset>
<legend>Algemene Informatie</legend>

<div class="x-form-item">
<label for="title">Titel:</label>
<div class="x-form-element">
<input type="text" size="50" name="title" id="title" />
</div>
</div>

<div class="x-form-item">
<label for="category">Categorie:</label>
<div class="x-form-element">
<select name="category" id="category">
<option value=""></option>
<option value="1">TV Serie</option>
<option value="2">Film</option>
<option value="3">OAV</option>
</select>
</div>
</div>

<div class="x-form-item">
<label for="website">Website:</label>
<div class="x-form-element">
<input type="text" size="50" name="url" id="url" />
</div>
</div>

<div class="x-form-item">
<label for="year">Jaar:</label>
<div class="x-form-element">
<input type="text" size="5" name="year" id="year" />
</div>
</div>

<div class="x-form-item">
<label for="combo-tpl">Anime Studio:</label>
<div class="x-form-element">
<select name="studio" id="studio">
<option value=""></option>
<option value="1">Studio 1</option>
<option value="2">Studio 2</option>
<option value="3">Studio 3</option>
<option value="4">Studio 4</option>
<option value="5">Studio 5</option>
</select>
</div>
</div>

<div class="x-form-item" id="nr_of_episodes">
<label for="episodes">Aantal Afleveringen:</label>
<div class="x-form-element">
<input type="text" size="5" name="episodes" id="episodes" />
</div>
</div>

<div class="x-form-item">
<label for="duration">Lengte per Aflevering / Film:</label>
<div class="x-form-element">
<input type="text" size="5" name="duration" id="duration" />
</div>
</div>
</fieldset>
<fieldset>
<legend>Genres</legend>
<div class="x-form-item">
<div class="section" id="container">

<div class="slot">
<div class="block">
Drag me 1
</div>
<div class="block">
Drag me 2
</div>
<div class="block">
Drag me 3
</div>
</div>

<div class="slot" id="selected-genres">

<div class="block">
Drag me 4
</div>
<div class="block">
Drag me 5
</div>
<div class="block">
Drag me 6
</div>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Pictures</legend>
<div class="x-form-item">
<div class="section" id="container">
<label for="poster">Poster:</label>
<div class="x-form-element">
<input name="fileField" id="fileField" type="file" />
</div>
</div>
</div>
</fieldset>
</div>
</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>
<div id="hidden-genres"></div>
<input type="hidden" name="id" id="id" value="1234" />
</form>


Here is the javascript.




Ext.onReady(function(){

Ext.QuickTips.init();

// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'under';

var submitFormUrl = 'php_scripts/testlogin.php';
var submitFormUrlAjaxEdit = 'php_scripts/ajaxformtest.php?rnd=';

var episodesDiv = Ext.get('nr_of_episodes');

// Set default edit mode off
var editModeOff = true;

// prefent submit without values
var editFirstTime = true;

/// Studio form validation
var title = new Ext.form.TextField({
allowBlank:false
});
title.applyTo('title');

category = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'category',
forceSelection:true,
selectOnFocus:true,
emptyText:'Kies een categorie...',
allowBlank:false,
validator:disableEpisodes
});

function disableEpisodes(field) {
if(field === "Film") {
episodes.setValue('0');
episodesDiv.addClass('hide');
return true;
}
if(field !== "Film") {
episodes.setValue('');
episodesDiv.removeClass('hide');
episodes.clearInvalid();
return true;
}
}

studio = new Ext.form.ComboBox({
mode:'local',
emptyText:'Kies een Anime Studio...',
typeAhead: true,
triggerAction: 'all',
transform:'studio',
forceSelection:true,
selectOnFocus:false,
allowBlank:false
});

var url = new Ext.form.TextField({
vtype:'url'
});
url.applyTo('url');

var year = new Ext.form.TextField({
allowBlank:false,
vtype:'num'
});
year.applyTo('year');

var episodes = new Ext.form.TextField({
allowBlank:false,
vtype:'num'
});
episodes.applyTo('episodes');

var duration = new Ext.form.TextField({
allowBlank:false,
vtype:'num'
});
duration.applyTo('duration');
//File upload input
// initial disable of the form
category.clearInvalid();
studio.clearInvalid();
title.setDisabled(true);
category.setDisabled(true);
studio.setDisabled(true);
url.setDisabled(true);
year.setDisabled(true);
episodes.setDisabled(true);
duration.setDisabled(true);

// Get the form element
adminForm = new Ext.form.BasicForm(Ext.get('adminform'));
adminForm.add(title);
adminForm.add(category);
adminForm.add(studio);
adminForm.add(url);
adminForm.add(year);
adminForm.add(episodes);
adminForm.add(duration);


// Get Id Element
var itemId = document.getElementById('id');

// create toolbar
var tb = new Ext.Toolbar('toolbar');

tb.add('-',{
id:'new-button',
icon: 'images/add.png', // icons can also be specified inline
cls: 'x-btn-icon',
tooltip: '<b>Add New Item</b><br/>Click here to add a new item',
enableToggle: false
}, '-');

tb.add('-',{
id:'clear-button',
icon: 'images/redo.png', // icons can also be specified inline
cls: 'x-btn-icon',
tooltip: '<b>Clear Form</b><br/>Click here to clear your form',
enableToggle: false
}, '-','-');

tb.add({
icon: 'images/file-edit.png', // icons can also be specified inline
cls: 'x-btn-icon',
tooltip: '<b>Edit Item</b><br/>Click here to set edit mode',
enableToggle: true,
toggleHandler: toggleEditMode,
pressed: false
}, '-');

tb.add({
id:'save-button',
icon: 'images/save-alt.png', // icons can also be specified inline
cls: 'x-btn-icon',
tooltip: '<b>Save item</b><br/>Click here to save your item',
enableToggle: false
}, '-');

// Turn edit mode on/off
function toggleEditMode(item, pressed){
if(editModeOff === true) {
title.setDisabled(false);
category.setDisabled(false);
studio.setDisabled(false);
url.setDisabled(false);
year.setDisabled(false);
episodes.setDisabled(false);
duration.setDisabled(false);
editModeOn = false;
} else {
title.setDisabled(true);
category.setDisabled(true);
studio.setDisabled(true);
url.setDisabled(true);
year.setDisabled(true);
episodes.setDisabled(true);
duration.setDisabled(true);
editModeOff = true;
}
editFirstTime = false;
//Ext.example.msg('Button Toggled', 'Button "{0}" was toggled to {1}.', item.text, pressed);
}

Ext.get('new-button').on('click', function(e){
if(itemId.value === 'NEW') {
Ext.MessageBox.confirm('Waarschuwing', 'Je bent al een nieuw Item aan het aanmaken! Wil je het formulier wissen?', clearForm);
} else {
Ext.MessageBox.confirm('Waarschuwing', 'Weet je zeker dat je een nieuw item wilt aanmaken wil aanmaken?', newItem);
}
});

// Confirmation message for save option
Ext.get('save-button').on('click', function(e){
if(adminForm.isValid() && editFirstTime === false) {
Ext.MessageBox.confirm('Bevestig', 'Weet je zeker dat je dit wilt doen?', saveItem);
} else {
Ext.Msg.alert('Fout Melding', 'Niet alle velden zijn correct ingevuld');
}
});

Ext.get('clear-button').on('click', function(e){
Ext.MessageBox.confirm('Bevestig', 'Weet je zeker dat je het formulier wil wissen?', clearForm);
});

Ext.get('save-button').on('click', function(e){
if(adminForm.isValid() && editFirstTime === false) {
Ext.MessageBox.confirm('Bevestig', 'Weet je zeker dat je dit wilt doen?', saveItem);
} else {
Ext.Msg.alert('Fout Melding', 'Niet alle velden zijn correct ingevuld');
}
});

// function new item
function newItem(btn) {
if(btn === 'yes') {
itemId.value = 'NEW';
adminForm.clearInvalid();
adminForm.reset();
}
}

// Save handler
function saveItem(btn) {
if(btn === 'yes') {
if (adminForm.isValid()) {
if(editModeOn === true) {
toggleEditMode();
}
/*
var frmRegister = document.getElementById(adminForm.id);
frmRegister.submit();
*/
getGenres();
adminForm.submit({url:submitFormUrlAjaxEdit+String(Date.parse(Date())/1000),
success:formSubmitSuccess,
failure:formSubmitFailure
});
}
}
}

// form submit success handler
function formSubmitSuccess(form, action) {
Ext.MessageBox.alert('Gelukt', 'De wijzigingen zijn opgeslagen!' );
Ext.MessageBox.confirm('Gelukt', 'De wijzigingen zijn opgeslagen!<br />Wilt u dit scherm sluiten', closeTab);
}

// close tab function
function closeTab(btn) {
if(btn === 'yes') {
// To get the reference to the tab panel simply...
var panel = parent.layout.getRegion('center').getActivePanel();
parent.layout.getRegion('center').remove(panel);
}
}

// form submit failure handler
function formSubmitFailure(form, action) {
Ext.MessageBox.alert('Mislukt', 'Er is iets mis gegaan bij het opslaan van de gegevens!');
}

// clear Form handler
function clearForm(btn) {
if(btn === 'yes') {
adminForm.clearInvalid();
adminForm.reset();
}
}

function getGenres() {
var dropEls = Ext.get('selected-genres').query('.block');
var hiddenGenres = Ext.get('hidden-genres');
for(var i=0; i < dropEls.length;i++) {
hiddenGenres.insertHtml('beforeEnd', '<input type="hidden" name="genres[]" id="genres[]" value="' + dropEls[i].innerHTML + '" />');
}
}
// remove loading box
Ext.get("loading").remove();
});

Richard
21 May 2007, 12:29 PM
Read http://extjs.com/forum/showthread.php?t=6076 (Form FF fileUpload)

This could possibly be your problem.

naneng
21 May 2007, 8:20 PM
I creating a simple mail form + multiple attachment files (idea from gmail).
After you pressed Send button, it will generate a log file (YYYY-MM-DD.txt).
See it for posting values.

I'm newbie in Javascript + Ext JS but pleasure to share.

Give it a try :)

ahoekie
22 May 2007, 2:02 PM
Thanks Naneng! I will look into it and try it! :D

ahoekie
23 May 2007, 9:24 AM
Naneng Thanks for the example it helped me solve the issue. Appearantly there is nothing wrong with my script. I was just focusing on the POST values display in firefox but you can't see them there. Your little php script helped me see that the file indeed was uploaded....

I feel kinda stupid because I could have done that myself....

OK for everyone the save handlers that worked for me:



adminForm = new Ext.form.BasicForm(Ext.get('adminform'), {fileUpload:true}); // this one is important you have to say that the forms contain files

function saveItem(btn) {
if(btn === 'yes') {
if (adminForm.isValid()) {
if(editModeOn === true) {
toggleEditMode();
}
/*
var frmRegister = document.getElementById(adminForm.id);
frmRegister.submit();
*/
getGenres();
adminForm.submit({url:submitFormUrlAjaxEdit+String(Date.parse(Date())/1000),
success:formSubmitSuccess,
failure:formSubmitFailure
});
}
}
}


Nanengs solution also worked:


adminForm = new Ext.form.BasicForm(Ext.get('adminform')); // no need to mention that the forms contain files yahoo takes over directly
function saveItem(btn) {
if(btn === 'yes') {
if (adminForm.isValid()) {
if(editModeOn === true) {
toggleEditMode();
}
/*
var frmRegister = document.getElementById(adminForm.id);
frmRegister.submit();
*/
getGenres();
// The FIRST argument is form.
// The SECOND argument is true to indicate file upload.
// The THIRD argument to true to prevent IE from throwing domain security errors,
// when uploading files in applications over SSL and using IE.
YAHOO.util.Connect.setForm(document.body.getElementsByTagName('FORM')['adminform'],
true, true);
YAHOO.util.Connect.asyncRequest('POST', submitFormUrlAjaxEdit,
{upload: formSubmitSuccess, failure: formSubmitFailure}); }
}
}


I want to thank Naneng for helping me! and I hope this post will also help some others struggling with this issue