[Résolu] Preview (thumbnail size) of an uploaded image in CRED form workaround

[Auteur]

Publications

[mcjS]

I am trying to: finding a workaround for displaying thumbnails uploaded images in a new cred form

I visited this URL's:
1. https://toolset.com/forums/topic/cred-edit-form-and-thumbnail-preview/
2. https://toolset.com/forums/topic/cred-upload-image-preview-and-html-email-notification/
3. https://toolset.com/forums/topic/cred-edit-form-and-thumbnail-preview/

I expected to see: an preview image or thumbnail after uploading

Instead, I got: still the filename after uploading

I did found a solution for the updating cred form for my custom post type with:
https://toolset.com/forums/topic/how-to-style-forms-with-cred-1-3/

My question, I tried above 3 examples to get something done like the last url. How to do this?

[Waqas Supporter Languages: Anglais (English ) Timezone: Asia/Karachi (GMT+05:00)]

With the version of CRED you are using, this is the default behaviour that when use an image field with Edit CRED form - it displays the preview of the image (thumbnail).

However, for some investigation purposes, can you please try this with a standard theme of Word Press (i.e. Twenty Fifteen or earlier)? Just to ensure if it's related to your particular theme or plugin itself has an issue.

Also if possible, please provide a URL to examine this online or some screen shots explaining the issue will also be helpful.

Please let me know if I can help you with anything related.

[mcjS]

"Edit CRED form - it displays the preview of the image (thumbnail)."

Sorry I meant CREATE CRED form. There is only displaying the file name. I'm searching for a possibility to show an image when creating the form and uploading an image. (multiple)

I was happy to find instructions about the CSS to resize the image in an EDIT cred form.
(from https://toolset.com/forums/topic/how-to-style-forms-with-cred-1-3/)
Now I'm searching for something simular (and showing) an image when uploading at a NEW cred form.

Do you have a suggestion?

[Waqas Supporter Languages: Anglais (English ) Timezone: Asia/Karachi (GMT+05:00)]

Please consider using following JavaScript:

jQuery(document).ready(function($){
  $(".wpt-repetitive").on("change", function(e){    
    $("input[type=file]").each(function(i){
      	var tmppath = URL.createObjectURL(this.files[0]);
	    var h = '<img src="'+tmppath+'" width="50">';
      
      	$(this).next().html(h);
    });
  });
});

Please add this in the JS editor of your "Create" CRED form and save your form. I have tested this thoroughly at hidden link which you can see it working there also.

I hope the code is self-explanatory and should work fine.

Please let me know if it works or not, or if I can help you with anything related.

[mcjS]

Thank you so much! It's working 😀

[Waqas Supporter Languages: Anglais (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thank you for your feedback, I am glad that I could be of some help to you 🙂

Can you please mark this thread as resolved? so we can close this matter, thanks.

[mcjS]

.