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)
First thing is ,the reason of your "serialize" data is not displaying is , you are not serialize to form data , you are serialize to the button . If you want serialize work you can try this way
$(document).ready(function(){
$(".layout-save").click(function(e){
console.log($('form').serialize())
})
})
2nd thing is you can not get file data just using serialize() You can try this way to send file using ajax
$(document).ready(function(){
let file
$('input[name="default_image"]').change(function(){
file = $('input[name="default_image"]').prop('files')[0]
})
$(".layout-save").click(function(e){
let inputvalu = $('input[name="imgNewBaseDir"]').val()
var form_data = new FormData();
form_data.append('imgNewBaseDir' , inputvalu )
if(file)
form_data.set('default_image' , file , file.name )
alert(inputvalu)
$.ajax({
url: "product_image_ajax.php?action=save",
type: 'post',
cache: false,
contentType: false,
processData: false,
data: form_data,
})
.done(function(data) {
//console.log(data);
})
.fail(function(){
alert('Ajax Submit for Image Save Failed ...');
});
})
})
Check it js fiddle Hope it will help you