Upload multiple images

[jennis015]

Hi Ally! I hope you can understand although English is not my language.
I have a multi-page form that creates a post and I need to load 6 images with the preview (each image).
But I found that adding a input upload image to the form takes 2.5 seconds between one page and another, even if it’s on the last page. I disable all unnecessary js and css from plugin too.

For it, I decided to leave the original form and redirect to the second form with the loading image. But I can’t associate the post_id in the first form.
Can you help me? In the first form I have 6 steps, it slows down use of jquery string for 10 elements.

the form runs 1.5 seconds slower with a only uploader although I delete my custom Js or php (I tried it because I understand that my code is not optimized, despite my attempts) In this case, for the preview i add 6 input upload.

//FIRST FORM
add_filter('quform_post_process_2', function (array $result, Quform_Form $form) {
    $title = $form->getValue('quform_2_3');
    $content = $form->getValue('quform_2_30');
    
$cat=get_cat_ID( $form->getValue('quform_2_112') );
$estado=get_cat_ID("Nuevo");
$post = array('post_title' => $title,'post_content' => $content,'post_type' => 'product','post_status' => 'pending',);
$user_id = get_current_user_id();
$postId = wp_insert_post($post);
$currentid = $post->ID;

add_post_meta($postId, '_price', $form->getValue('quform_2_11'));
add_post_meta($postId, '_regular_price', $form->getValue('quform_2_11'));
add_post_meta($postId, '_auction_start_price', $form->getValue('quform_2_8'));
add_post_meta($postId, '_auction_reserved_price', $form->getValue('quform_2_10'));
add_post_meta($postId, '_auction_item_condition',  $form->getValue('quform_2_113')); 
    
$categ= $form->getValue('quform_2_112');
$categ1= $form->getValue('quform_2_122');
$categ2= $form->getValue('quform_2_123');
$categ3= $form->getValue('quform_2_124');
wp_set_object_terms($postId, 'auction', 'product_type');
wp_set_object_terms($postId,$categ, 'product_cat');
     if($categ1 != NULL){
 wp_set_object_terms($postId,$categ1, 'product_cat'); };
     if($categ2 != NULL){
 wp_set_object_terms($postId,$categ2, 'product_cat'); };
     if($categ3 != NULL){
 wp_set_object_terms($postId,$categ3, 'product_cat'); };

 return  $result;
}, 10, 2);

//SECOND FORM
add_filter('quform_post_process_7', function (array $result, Quform_Form $form) {
$postId = $form->getValue('quform_7_19');
    foreach($files as $file) {
        $attachId = my_add_file_attachment($file); }
    $file = $form->getValue('quform_7_20');
    if (isset($file[0])) {
        $attachId = my_add_file_attachment($file[0], $postId);
        set_post_thumbnail($postId, $attachId); };
    foreach($files as $file1) {
        $attachId1 = my_add_file_attachment($file1);}
    $file1 = $form->getValue('quform_7_25');
     if (isset($file1[0])) {
        $attachId1 = my_add_file_attachment($file1[0], $postId).',';} ;
    foreach($files as $file2) {
        $attachId2 = my_add_file_attachment($file1);}
    $file2 = $form->getValue('quform_7_26');
 if (isset($file2[0])) {
 $attachId2 = my_add_file_attachment($file2[0], $postId).','; }
foreach($files as $file3) {
$attachId3 = my_add_file_attachment($file3); }
 $file3 = $form->getValue('quform_7_29');
     if (isset($file3[0])) {
        $attachId3 = my_add_file_attachment($file3[0], $postId).','; };
       foreach($files as $file4) {
        $attachId4 = my_add_file_attachment($file4);  }$file4 = $form->getValue('quform_7_31');
         if (isset($file4[0])) {
        $attachId4 = my_add_file_attachment($file4[0], $postId).',';
    };
           foreach($files as $file5) {
        $attachId5 = my_add_file_attachment($file1);
    }
    $file5 = $form->getValue('quform_7_33');
    
     if (isset($file5[0])) {
        $attachId5 = my_add_file_attachment($file5[0], $postId).',';
    };
$attach_total= $attachId1.$attachId2.$attachId3.$attachId4.$attachId5;
$attach_totales=rtrim($attach_total,',');
add_post_meta($postId, '_product_image_gallery', $attach_totales);
 return  $result;
}, 10, 2);

function my_add_file_attachment($file, $parentPostId = 0){
    require_once ABSPATH . 'wp-admin/includes/image.php';
    $filename = $file['name'];
    $path = $file['path'];
    $wpFiletype = wp_check_filetype($filename);
    $attachment = array(
        'guid' => $file['url'],
        'post_mime_type' => $wpFiletype['type'],
        'post_title' => preg_replace('/\.[^.]+$/', '', $filename),
        'post_content' => '',
        'post_status' => 'inherit'
    );
    $attachId = wp_insert_attachment($attachment, $path, $parentPostId);
    $attachData = wp_generate_attachment_metadata($attachId, $path);
    wp_update_attachment_metadata($attachId, $attachData);
    return $attachId;
}

And i add this custom js

jQuery(function ($) {
    var fieldId = '7_20',
        fieldId1 = '7_25',fieldId2 = '7_26',fieldId3 = '7_29',fieldId4 = '7_31',fieldId5 = '7_33',

   $field = $('.quform-field-' + fieldId),
        $field1 = $('.quform-field-' + fieldId1),
		$field2 = $('.quform-field-' + fieldId2),
		$field3 = $('.quform-field-' + fieldId3),
		$field4 = $('.quform-field-' + fieldId4),
		$field5 = $('.quform-field-' + fieldId5),

	
        $preview = $('<img class=\"imageThumb\" />').hide().appendTo('.quform-input-'+fieldId);
        $preview1 = $('<img class=\"imageThumb\" />').hide().appendTo('.quform-input-'+fieldId1);
		$preview2 = $('<img class=\"imageThumb\" />').hide().appendTo('.quform-input-'+fieldId2);
		$preview3 = $('<img class=\"imageThumb\" />').hide().appendTo('.quform-input-'+fieldId3);
		$preview4 = $('<img class=\"imageThumb\" />').hide().appendTo('.quform-input-'+fieldId4);
		$preview5 = $('<img class=\"imageThumb\" />').hide().appendTo('.quform-input-'+fieldId5);

		$field.change(function () {readURL(this, $preview); });
		$field1.change(function () {readURL(this, $preview1); });
		$field2.change(function () {readURL(this, $preview2); });
		$field3.change(function () {readURL(this, $preview3); });
		$field4.change(function () {readURL(this, $preview4); });
		$field5.change(function () {readURL(this, $preview5); });
	    $close = $field.closest('.quform-element');
	    $close1 = $field1.closest('.quform-element');
		$close2 = $field2.closest('.quform-element');
		$close3 = $field3.closest('.quform-element');
		$close4 = $field4.closest('.quform-element');
		$close5 = $field5.closest('.quform-element');

		
	    $close.on('click', function (e) {readURL($('.quform-field-' + fieldId)[0], $preview);
		});
		$close1.on('click', function (e) {readURL($('.quform-field-' + fieldId1)[0], $preview1); 
		});
		$close2.on('click', function (e) {readURL($('.quform-field-' + fieldId2)[0], $preview2); 
		});
		$close3.on('click', function (e) {readURL($('.quform-field-' + fieldId3)[0], $preview3); 
		});
		$close4.on('click', function (e) {readURL($('.quform-field-' + fieldId4)[0], $preview4); 
		});
		$close5.on('click', function (e) {readURL($('.quform-field-' + fieldId5)[0], $preview5); 
		});

	
    function readURL(input, $preview) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $preview.attr('src', e.target.result).show();
            };
            reader.readAsDataURL(input.files[0]);
        } else {
            $preview.removeAttr('src').hide();
        }
    }
    

});

• This topic was modified 4 years, 5 months ago by jennis015.

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[jennis015]

HI Ally. Thanks this code works!
*Could the delay just be down to the browser uploading the image?
the delay that i detect is caused by the button of image. You can see, the times between page and page with 0 button, 1 button o more buttons.
I look forward to this functionality (muitiple previews) in your great plugin!
Thank you!

Attachments:

You must be logged in to view attached files.

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[Author]

Posts