I'm trying to enhance the backend of a website to make it easier for the users to update products. I'm moving processes into interactive tooltips so that actions can be performed from the page that displays products, rather than get sent to different page types to make small changes.
I've come unstuck on a section for image upload though. I'm using this section of JS
$(document).ready(function() {
$(".layout-save").click(function(e){
e.preventDefault();
console.log($(this).serialize());
$.ajax({
url: 'product_image_ajax.php?action=save',
type: 'POST',
data: $(this).serialize(), // it will serialize the form data
dataType: 'html'
})
.done(function(data) {
//console.log(data);
})
.fail(function(){
alert('Ajax Submit for Image Save Failed ...');
});
});
});
And the basics of the form are
<form name="image_define" action="http://localhost/jsc/jscadmin/product_image_ajax.php?&products_filter=310&newImg=1&action=save" method="post" enctype="multipart/form-data"><input type="hidden" name="securityToken" value="149cbe8b85ec27c089b867be283dff2e">
<table border="0" width="100%" cellspacing="0" cellpadding="2">
<tbody>
<tr>
<td class="jscBoxContent">or <input type="text" name="imgNewBaseDir" size="20"></td>
</tr>
<tr>
<td class="jscBoxContent"><br><strong>Base image file</strong> <strong class="errorText">(required)</strong><br>An original image must be defined. The original image is assumed to be the smallest when medium or large images are entered.<br><input type="file" name="default_image" size="20" accept="image/jpeg,image/jpg,image/gif,image/png"><br></td>
</tr>
<tr>
<td align="center" class="jscBoxContent"><br><input type="image" src="includes/languages/english/images/buttons/button_save.gif" border="0" alt="Save" title=" Save " class="layout-save" data-newimg="1"> <input id="close-tooltip" type="button" value="Cancel" alt="Cancel" title="Cancel"></td>
</tr>
</tbody></table>
</form>
The actual php generating this HTML is
case 'layout_new':
if ( $action != 'layout_edit' ) {
$imgNameStr .= ( $no_images ) ? "&newImg=1" : '&imgBase='.$products_image_base
. "&imgBaseDir=" . $products_image_directory
. "&imgExtension=" . $default_extension;
$heading[] = array(
'text' => '<strong>' . TEXT_INFO_NEW_PHOTO . '</strong>'
);
}
$contents = array(
'form' => zen_draw_form('image_define', FILENAME_PRODUCTS_IMAGE_AJAX,
'&products_filter=' . $products_filter . $imgNameStr
. '&action=save', 'post', 'enctype="multipart/form-data"')
); //steve check this &products_filter=
// check if this is a master image or if no images exist
if ($no_images) {
$contents[] = array(
'text' => '<strong>' . TEXT_INFO_IMAGE_BASE_NAME . '</strong><br />'
);
$contents[] = array(
'text' => zen_draw_input_field('imgBase', '', 'size="30"')
);
$dir = @dir(DIR_FS_CATALOG_IMAGES);
$dir_info[] = array('id' => '', 'text' => TEXT_INFO_MAIN_DIR);
while ($file = $dir->read()) {
if (is_dir(DIR_FS_CATALOG_IMAGES . $file)
&& strtoupper($file) != 'CVS'
&& $file != "."
&& $file != ".."
&& $file != 'original'
&& $file != 'medium'
&& $file != 'large') {
$dir_info[] = array('id' => $file . '/', 'text' => $file);
}
}
$contents[] = array('
text' => '<br /><strong>' . TEXT_INFO_BASE_DIR . '</strong><br />' . TEXT_INFO_NEW_DIR
);
$contents[] = array(
'text' => TEXT_INFO_IMAGE_DIR . zen_draw_pull_down_menu('imgBaseDir', $dir_info, "")
);
$contents[] = array(
'text' => TEXT_INFO_OR.' ' . zen_draw_input_field('imgNewBaseDir', '', 'size="20"')
);
} else if ($action != 'layout_edit') {
$contents[] = array(
'text' => '<strong>' . TEXT_INFO_IMAGE_SUFFIX . '</strong><br />' . TEXT_INFO_USE_AUTO_SUFFIX . '<br />'
);
$contents[] = array(
'text' => zen_draw_input_field('imgSuffix', $selected_image_suffix, 'size="10"')
);
}
// -----
// Set up the "acceptable" file types for the form, depending on whether or not the active product
// currently has an image defined.
//
if ($no_images) {
$accept = 'image/jpeg,image/jpg,image/gif,image/png';
} else {
switch (strtolower($products_image_extension)) {
case '.gif':
$accept = 'image/gif';
break;
case '.png':
$accept = 'image/png';
break;
case '.jpg': //-Fall-through ...
case '.jpeg':
$accept = 'image/jpeg,image/jpg';
break;
default:
$accept = 'image/jpeg,/image/jpg,image/gif,image/png';
break;
}
}
$file_parms = 'accept="' . $accept . '"';
// Image fields
if ( $action == 'layout_new' ) {// display warning on edit screen that the default file must be filled in
//-------------------------
$contents[] = array(
'text' => '<br /><strong>' . TEXT_INFO_DEFAULT_IMAGE . '</strong> <strong class="errorText">(required)</strong><br />'
. TEXT_INFO_DEFAULT_IMAGE_HELP . '<br />'
. zen_draw_input_field('default_image', '', 'size="20" ' . $file_parms, false, 'file') . '<br />' . $pInfo->products_image
);
} else {
$contents[] = array(
'text' => '<br /><strong>' . TEXT_INFO_DEFAULT_IMAGE . '</strong><br />'
. TEXT_INFO_DEFAULT_IMAGE_HELP . '<br />'
. zen_draw_input_field('default_image', '', 'size="20" '. $file_parms, false, 'file') . '<br />' . $pInfo->products_image
);
}
When the form is submitted,
console.log($(this).serialize());
is empty, and thus the image isn't updated.
Is there any special process for managing image uploads via an AJAX call as I don't understand why the original form works fine until I try to submit without a page reload. (Note, I know tables are outdated, and they will be removed once the core process is working)
