Post by Mammyth » Tue Mar 20, 2012 6:35 am

How can I get a thumbnail image to show once the end user has uploaded a photo. (Example: End user / customer can upload a photo during the checkout / add to cart process while placing their order for custom printing)

While the little round thinking circle is showing during the upload process, is there a way to have thumbnail shown to the end user once this process is done. So they can see the image they just uploaded.

Is there a way to code that in ?


Thanks

User avatar
Newbie

Posts

Joined
Tue Mar 20, 2012 6:26 am

Post by Mammyth » Wed Mar 21, 2012 3:06 am

Help Please I really would like to be able to see a thumbnail image once a visitor uploads a picture. Not sure exactly how to get the code modified to get the image url.

Please send me some ideas

Thanks in Advance

User avatar
Newbie

Posts

Joined
Tue Mar 20, 2012 6:26 am

Post by uksitebuilder » Wed Mar 21, 2012 4:40 am

Well your first problem is getting the customer to upload when viewing the cart or during checkout as there is no default functionality to do this.

It will most likely require custom coding by a developer ( your best bet is to post on the commercial support forum or contact a partner from the partners page)

ImageImageImageImageImage

For Friendly Professional Support - Click Here


User avatar
Guru Member

Posts

Joined
Thu Jun 09, 2011 11:37 pm
Location - United Kindgom

Post by Mammyth » Wed Mar 21, 2012 3:47 pm

Let me be a little more specific.

Everything is working well - I just want to display the image when the user clicks upload photo.

How can I extract the url to the image in following code

<script type="text/javascript"><!--
new AjaxUpload('#button-option-<?php echo $option['product_option_id']; ?>', {
action: 'index.php?route=product/product/upload',
name: 'file',
autoSubmit: true,
responseType: 'json',
onSubmit: function(file, extension) {
$('#button-option-<?php echo $option['product_option_id']; ?>').after('<img src="catalog/view/theme/default/image/loading_black.gif" class="loading" style="padding-left: 5px;" />');
/*I place this*/
$(".content").html('<img src="' + file + '">' + file + '</img>');
},


Thanks

User avatar
Newbie

Posts

Joined
Tue Mar 20, 2012 6:26 am

Post by uksitebuilder » Thu Mar 22, 2012 12:10 am

after your onSubmit function use

onComplete: function(file, response) {
$(".content").html('<img src="' + file + '">');
}

not sure what else is in .content but you may want to append to it rather than rewrite it completely or put an empty div in it with it's own id for the image uploaded to be displayed in

ImageImageImageImageImage

For Friendly Professional Support - Click Here


User avatar
Guru Member

Posts

Joined
Thu Jun 09, 2011 11:37 pm
Location - United Kindgom

Post by Mammyth » Thu Mar 22, 2012 3:51 am

Thank you for the reply and possible fix. I should have included more details. Here they are.
Right now I can see the file name only. I can only guess that json is what is being sent back.

I pasted the code below that shows what the onComplete function now shows. I have tried a few different vars, one was json.file and it shows a small line of numbers


Thanks



<!--Here is the box for holding the returned image-->
<!--Show Photo Thmub-->
<div class="content" style="width:100px;height:100px;">
Write Something!
</div>
<!--Show Photo Thmub-->
<!---->


<script type="text/javascript"><!--
new AjaxUpload('#button-option-<?php echo $option['product_option_id']; ?>', {
action: 'index.php?route=product/product/upload',
name: 'file',
autoSubmit: true,
responseType: 'json',
onSubmit: function(file, extension) {
$('#button-option-<?php echo $option['product_option_id']; ?>').after('<img src="catalog/view/theme/default/image/loading_black.gif" class="loading" style="padding-left: 5px;" />');
/*I place this*/
$(".content").html('<img src="' + file + '">' + file + '</img>');

},


onComplete: function(file, json) {
$('.error').remove();

if (json.success) {



$('input[name=\'option[<?php echo $option['product_option_id']; ?>]\']').attr('value', json.file);
}

if (json.error) {
$('#option-<?php echo $option['product_option_id']; ?>').after('<span class="error">' + json.error + '</span>');
}

$('.loading').remove();
}


});
//--></script>

User avatar
Newbie

Posts

Joined
Tue Mar 20, 2012 6:26 am

Post by Mammyth » Sun Mar 25, 2012 3:52 am

Any luck or suggestions for me after my most recent details ?

User avatar
Newbie

Posts

Joined
Tue Mar 20, 2012 6:26 am

Post by jonah » Tue Apr 24, 2012 2:07 am

Hi I would also like to achieve this. I'd like to display just a filename or thumb on the product page when they upload an image. Did you manage to find a solution or at least how can I even get the title of the file to show on my product template page?

Thanks for you help :)

Website Design, hosting, seo and online marketing visit: http://www.yorkcreative.co.uk


New member

Posts

Joined
Sun Feb 19, 2012 12:54 am

Post by waga » Fri May 04, 2012 8:27 am

Hi Can I ask which file should modify ??because I am new, I do not know which file I should add or edit.
Please tell me about this I will really appreicate..
REgards
Ken

Newbie

Posts

Joined
Fri May 04, 2012 8:25 am

Post by SpoonIsBad » Tue Jun 05, 2012 2:37 am

Mammyth wrote:Any luck or suggestions for me after my most recent details ?
I've found a way to have it show the thumbnail, although, I wouldn't recommend using it on a live site as it's NOT secure option. Regardless, maybe someone else who better understands the encryption.php file may be able to make use of this:

In prodcuts.php - You'll notice all I've done is circumvent the encryption, because when I was calling json.file (in product.tpl) it would return an encrypted string but never one that would match the actual string of file uploaded on the server. And if I used decrypt, then I would be left with filename.png.null .

Code: Select all

if (($this->request->server['REQUEST_METHOD'] == 'POST') && !isset($json['error'])) {
			if (is_uploaded_file($this->request->files['file']['tmp_name']) && file_exists($this->request->files['file']['tmp_name'])) {
				$file = basename($filename) . '.' . md5(rand());
				
				// Hide the uploaded file name so people can not link to it directly.
				$this->load->library('encryption');
				
				$encryption = new Encryption($this->config->get('config_encryption'));
				
				$json['file'] = $encryption->encrypt($file);
				
				$json['thumb'] = $file; 
				
				move_uploaded_file($this->request->files['file']['tmp_name'], DIR_DOWNLOAD . $file);
			}
						
			$json['success'] = $this->language->get('text_upload');
		}	
		
		$this->response->setOutput(json_encode($json));		
	}

and then in product.tpl - created an empty div to show the results

Code: Select all

<div class="confirm" style="margin-left:3px;margin-top:8px;width:300px;min-height:30px;color:#00CD00;text-shadow: 0px 0px 2px #000000;filter: dropshadow(color=#000000, offx=0, offy=0);">
			 
			</div>
again in product.tpl

Code: Select all

<script type="text/javascript"><!--
new AjaxUpload('#button-option-<?php echo $option['product_option_id']; ?>', {
	action: 'index.php?route=product/product/upload',
	name: 'file',
	autoSubmit: true,
	responseType: 'json',
	onSubmit: function(file, extension) {
		$('#button-option-<?php echo $option['product_option_id']; ?>').after('<img src="catalog/view/theme/default/image/loading.gif" class="loading" style="padding-left: 5px;" />');
	},
	onComplete: function(file, json) {
		$('.error').remove();
		
		if (json.success) {

			$(".confirm").hide().html('<img src="catalog/view/theme/default/image/success.png" style="padding-top:5px;margin-right:5px;" />' + '<div style="position:relative;margin-left:18px;margin-top:-18px;">' + 'successfully uploaded: ' + file + '<br />' + '<img src="download/' + json.thumb + '" style="padding-top:5px;margin-right:5px;height:100px;width:100px;" />' + '</div>').fadeIn('slow');
		}
		
		if (json.error) {
			$('#option-<?php echo $option['product_option_id']; ?>').after('<span class="error">' + json.error + '</span>');
		}
		
		$('.loading').remove();	
	}
});
//--></script>
Like I said, not a secure fix to the problem by any-means, but maybe someone else may find this helpful to expand on.

Best of luck!

www.happybeavertees.com


Newbie

Posts

Joined
Fri Aug 19, 2011 12:52 am
Who is online

Users browsing this forum: No registered users and 27 guests