Our site www.viart.com site is operated by latest Viart Shop 5 with default Clear design
Topic Information
dmOZ
dmOZ
If your system is configured to allow users to either upload their profile image or create their own products, the system currently displays the internal server path to the image after the upload is complete.
 
I am not keen on displaying to the user, under normal circumstances, the path the image and to mitigate that i have changed the HTML templates field property to be HIDDEN
 
Instead I would like to get it to display a thumbnail preview of the uploaded image. I havent been able to get this to work.
 
Can anyone help?
 
dmOZ
dmOZ
OK -- So i did some digging and have asked for a quote from Viart to implement this functionality across all points in the system where a user may be able to upload an image.
 
In the meantime, looks like a change at some point in the user_upload.html file which causes the pop-up window to automatically close if the upload is successful. This bit was a pain to find !!
 
The user_upload.php code does have in there code to display a "Image <image name> successfully uploaded" message to be displayed.
 
However, in the HTML page there is an automatic call to closeWindow() once the upload completes.
 
 
In my research I found that 2x files need to be modified to show a preview back on the calling page once the upload is complete. Its not as pretty as it should be, but it works OK.
 
1. block_user_profile.html
--> add into the section personal_image_block a new IMG tag and give the tag a unique ID
eg.
<img id="personal_image_preview" src="" border="0" width="100" height="75" alt="" />
 
1. block_user_profile.html
--> make the 'personal_image" text box HIDDEN.
Its still required as its part of the form submission, but the user doesnt need to see the filename since it may be renamed during upload due to duplicates
 
2. Add a line to profile.js inside the setFilepath 'if' statement to set the source of the img tag.
 
eg. document.getElementById("personal_image_preview").src = filepath;