Page 1 of 1
Photo Upload End User How to show a Thumbnail After upload
Posted: Tue Mar 20, 2012 6:35 am
by Mammyth
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
Re: Photo Upload End User How to show a Thumbnail After uplo
Posted: Wed Mar 21, 2012 3:06 am
by Mammyth
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
Re: Photo Upload End User How to show a Thumbnail After uplo
Posted: Wed Mar 21, 2012 4:40 am
by uksitebuilder
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)
Re: Photo Upload End User How to show a Thumbnail After uplo
Posted: Wed Mar 21, 2012 3:47 pm
by Mammyth
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
Re: Photo Upload End User How to show a Thumbnail After uplo
Posted: Thu Mar 22, 2012 12:10 am
by uksitebuilder
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
Re: Photo Upload End User How to show a Thumbnail After uplo
Posted: Thu Mar 22, 2012 3:51 am
by Mammyth
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>
Re: Photo Upload End User How to show a Thumbnail After uplo
Posted: Sun Mar 25, 2012 3:52 am
by Mammyth
Any luck or suggestions for me after my most recent details ?
Re: Photo Upload End User How to show a Thumbnail After uplo
Posted: Tue Apr 24, 2012 2:07 am
by jonah
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
Re: Photo Upload End User How to show a Thumbnail After uplo
Posted: Fri May 04, 2012 8:27 am
by waga
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
Re: Photo Upload End User How to show a Thumbnail After uplo
Posted: Tue Jun 05, 2012 2:37 am
by SpoonIsBad
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!