Skip to content

Commit e6d9186

Browse files
girishpanchal30girishpanchal30
committed
fix: replace image in image cropper field
1 parent 201841d commit e6d9186

File tree

1 file changed

+62
-25
lines changed

1 file changed

+62
-25
lines changed

‎js/file-upload.js‎

Lines changed: 62 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -38,13 +38,14 @@ jQuery(function($) {
3838
var image_id = e.image.id;
3939
var data_name = e.data_name;
4040
var input_type = e.input_type;
41+
const file_input = e.file_input;
4142

4243
if (input_type === 'cropper') {
4344

4445
field_meta = ppom_get_field_meta_by_id(data_name);
4546
// console.log('ppom',field_meta)
4647
if (field_meta.legacy_cropper === undefined) {
47-
ppom_show_cropped_preview(data_name, image_url, image_id);
48+
ppom_show_cropped_preview(data_name, image_url, image_id, file_input);
4849
// hiding the filelist-{data_name} when preview enabled
4950
$(`#filelist-${data_name}`).hide();
5051
// hide the file upload area too
@@ -82,8 +83,15 @@ jQuery(function($) {
8283
cropp_preview_container.find('.croppie-container').each(function(i, croppie_dom) {
8384

8485
var image_id = jQuery(croppie_dom).attr('data-image_id');
86+
const croppie_container = jQuery('.ppom-croppie-preview-' + image_id);
87+
const image_url = jQuery(croppie_dom).find('img').attr('src');
8588
$(croppie_dom).croppie('destroy');
8689
const viewport = {'width': v_width, 'height': v_height};
90+
91+
file_list_preview_containers[data_name]['croppie'][image_id] = croppie_container;
92+
file_list_preview_containers[data_name]['image_id'] = image_id;
93+
file_list_preview_containers[data_name]['image_url'] = image_url;
94+
8795
ppom_set_croppie_options(data_name, viewport, image_id);
8896
});
8997

@@ -257,7 +265,7 @@ function save_edited_photo(img_id, photo_url) {
257265
}
258266

259267
// Cropping image with Croppie
260-
function ppom_show_cropped_preview(file_name, image_url, image_id) {
268+
function ppom_show_cropped_preview(file_name, image_url, image_id, file_input) {
261269

262270
var cropp_preview_container = jQuery(".ppom-croppie-wrapper-" + file_name);
263271
// Enable size option
@@ -272,14 +280,24 @@ function ppom_show_cropped_preview(file_name, image_url, image_id) {
272280
// Change preview image
273281
jQuery('<a/>')
274282
.addClass('btn ' + image_id)
275-
.attr('href', '#')
283+
.attr('href', 'javascript:;')
284+
.attr('id', 'selectfiles-' + file_name + '-' + image_id)
285+
.attr('data-field-name', file_name)
286+
.attr('data-image-id', image_id)
276287
.html('Change image')
277288
.appendTo(cropp_preview_container)
278289
.click(function(e){
279290
e.preventDefault();
280-
location.reload();
281291
});
282292

293+
const file_inputs = {
294+
...file_input,
295+
data_name: file_name + '-' + image_id,
296+
is_change_image: true,
297+
original_data_name: file_name,
298+
}
299+
ppom_setup_file_upload_input(file_inputs);
300+
283301

284302
// file_list_preview_containers[file_name]['croppie'] = cropp_preview_container.find('.ppom-croppie-preview');
285303

@@ -338,12 +356,22 @@ function ppom_reset_cropping_preview(file_name) {
338356
// Attach FILE API with DOM
339357
function ppom_setup_file_upload_input(file_input) {
340358

341-
const file_data_name = file_input.data_name;
342-
if ( plupload_instances[file_data_name] !== undefined ) {
359+
const file_inputs = file_input;
360+
const parts = file_input.data_name.split('-');
361+
const [file_data_name, file_id ] = parts;
362+
let data_name = file_data_name;
363+
364+
if ( file_id !== undefined ) {
365+
data_name = file_data_name + '-' + file_id;
366+
}
367+
368+
if ( plupload_instances[data_name] !== undefined ) {
343369
return;
344370
}
345371

346-
field_file_count[file_data_name] = 0;
372+
if ( ! field_file_count.hasOwnProperty( file_data_name ) ) {
373+
field_file_count[file_data_name] = 0;
374+
}
347375
file_list_preview_containers[file_data_name] = jQuery('#filelist-' + file_data_name);
348376

349377
// Energy pack
@@ -363,7 +391,7 @@ function ppom_setup_file_upload_input(file_input) {
363391

364392
plupload_instances[file_data_name] = new plupload.Uploader({
365393
runtimes: ppom_file_vars.plupload_runtime,
366-
browse_button: 'selectfiles-' + file_data_name, // you can pass in id...
394+
browse_button: 'selectfiles-' + data_name, // you can pass in id...
367395
container: 'ppom-file-container-' + file_data_name, // ... or DOM Element itself
368396
drop_element: 'ppom-file-container-' + file_data_name,
369397
url: ppom_file_vars.ajaxurl,
@@ -447,12 +475,24 @@ function ppom_setup_file_upload_input(file_input) {
447475
// img.load(file.getSource());
448476
// });
449477

478+
if ( file_id !== undefined ) {
479+
--field_file_count[file_data_name];
480+
}
481+
450482
if ((field_file_count[file_data_name] + files_added) > plupload_instances[file_data_name].settings.max_file_count) {
451483
alert(plupload_instances[file_data_name].settings.max_file_count + ppom_file_vars.mesage_max_files_limit);
452484
}
453485
else {
454486

455-
plupload.each(files, function(file) {
487+
if ( file_id !== undefined ) {
488+
489+
jQuery('.ppom-croppie-preview-' + file_id).hide(500).remove();
490+
jQuery(`.btn.${file_id}`).hide(500).remove();
491+
jQuery("#u_i_c_" + file_id).hide(500).remove();
492+
jQuery(`input[name="ppom[fields][${file_data_name}][${file_data_name}][cropped]"`).hide(500).remove();
493+
}
494+
495+
plupload.each(files, function (file) {
456496

457497
if (file.type.indexOf("image") !== -1 && file.type !== 'image/photoshop') {
458498
const img = new moxie.image.Image();
@@ -463,33 +503,29 @@ function ppom_setup_file_upload_input(file_input) {
463503

464504
let aspect_ratio = Math.max(img_width, img_height) / Math.min(img_width, img_height);
465505

466-
if (img_width >= parseFloat(file_input.max_img_w) || img_width <= parseFloat(file_input.min_img_w)) {
467-
plupload_instances[file_data_name].stop();
468-
plupload_instances[file_data_name].removeFile(file);
469-
alert(img_dim_errormsg);
470-
}
471-
else if (img_height >= parseFloat(file_input.max_img_h) || img_height <= parseFloat(file_input.min_img_h)) {
472-
plupload_instances[file_data_name].stop();
473-
plupload_instances[file_data_name].removeFile(file);
506+
if (
507+
img_width >= parseFloat(file_input.max_img_w) ||
508+
img_width <= parseFloat(file_input.min_img_w) ||
509+
img_height >= parseFloat(file_input.max_img_h) ||
510+
img_height <= parseFloat(file_input.min_img_h)
511+
) {
512+
up.removeFile(file);
474513
alert(img_dim_errormsg);
475-
}
476-
else {
514+
} else {
477515
field_file_count[file_data_name]++;
478516
// Code to add pending file details, if you want
479517
add_thumb_box(file, file_list_preview_containers[file_data_name], up);
480-
setTimeout('plupload_instances[\'' + file_data_name + '\'].start()', 100);
518+
up.start();
481519
}
482520
};
483521
img.load(file.getSource());
484-
}
485-
else {
522+
} else {
486523
field_file_count[file_data_name]++;
487524
// Code to add pending file details, if you want
488525
add_thumb_box(file, file_list_preview_containers[file_data_name], up);
489-
setTimeout('plupload_instances[\'' + file_data_name + '\'].start()', 100);
526+
up.start();
490527
}
491528

492-
493529
// Energy pack
494530
if ( bar ) {
495531
bar.removeAttribute('hidden');
@@ -553,7 +589,8 @@ function ppom_setup_file_upload_input(file_input) {
553589
input_type: file_input.type,
554590
image_url: obj_resp.file_url,
555591
image_resp: obj_resp,
556-
time: new Date()
592+
time: new Date(),
593+
file_input: file_inputs,
557594
});
558595

559596

0 commit comments

Comments
 (0)