Post by mash0028 » Sat Apr 02, 2016 4:57 pm

Hello everyone,

Hopefully someone is also interested on what I am doing.

I have uploaded this extension:

http://www.opencart.com/index.php?route ... rch=avatar

It working great!!! as always... but I want to customize it so that photo is just one click upload like social media (FB).

Screen Shot 2016-04-02 at 4.54.00 PM.png

Screen Shot 2016-04-02 at 4.54.00 PM.png (42.75 KiB) Viewed 1763 times

Just one click upload.

Then I plan it to place also in my Module/Account Right-side Panel.
Screen Shot 2016-04-02 at 4.55.29 PM.png

Screen Shot 2016-04-02 at 4.55.29 PM.png (60.94 KiB) Viewed 1763 times

It was successfully uploaded in Account/edit after save.

but module/account dont have a save function. I a planning to put a save function also via Javascript but no luck.

I dont have an idea how to save an image. hoping someone have an idea.

New member

Posts

Joined
Fri Jul 24, 2015 3:36 pm

Post by IP_CAM » Mon Apr 04, 2016 3:17 am

it already exists, for cheap, so, why waste lot's of time ?

Avatars for customers. Easy upload any image as avatar
http://www.opencart.com/index.php?route ... n_id=17062

Ernie

Update: Just found a free Extension, more by accident, unfortunately, it's only for OC v.1.5.x,
but at least, you will find the 'Content', to be used/placed in the other files, to make it work.

http://www.opencart.com/index.php?route ... n_id=17549
---
Image

My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by mash0028 » Wed Aug 24, 2016 4:28 pm

I successfully Upload picture by 1 click only.


First modify 3 part of catalog side.


Controller side:

File name: catalog/controller/module/account.php


Add below: $this->load->language('module/account');

Code: Select all

		if (($this->request->server['REQUEST_METHOD'] == 'POST')) {
			$this->model_account_customer->editCustomer($this->request->post);

			$this->session->data['success'] = $this->language->get('text_upload');

			$this->response->redirect($this->url->link('account/account', '', 'SSL'));
		}

Then add in Language file: catalog/language/english/module/account.php

$_['text_upload'] = 'Your photo was successfully uploaded!';



In template side, carefully check codes based on your theme.


File: /catalog/view/theme/*/template/module/account.tpl

below: <?php if ($logged) { ?>

add

Code: Select all

 	<form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" class="form-horizontal">
		<div class="profile-img-container-account">
              <?php if ($avatar) { ?>
              <img id="button-upload" src="<?php echo $avatar; ?>" style="width: <?php echo $avatarwidth; ?>px; height: <?php echo $avatarheight; ?>px; padding: <?php echo $avatarpadding; ?>px;" alt="AVATAR" class="img-thumbnail img-square img-responsive"/><i class="fa fa-camera fa-2x"></i>
              <?php } else { ?>
              <img id="button-upload" src="<?php echo $davatarimage; ?>" style="width: <?php echo $avatarwidth; ?>px; height: <?php echo $avatarheight; ?>px; padding: <?php echo $avatarpadding; ?>px;" alt="AVATAR" class="img-thumbnail img-square img-responsive" /><i class="fa fa-camera fa-2x"></i>
              <?php } ?></div>
                <input type="hidden" name="avatar" value="" id="input-avatar" />
              <input type="submit" value="submit" style="display:none; ?>;" />
    </form>


add this important Js file:

Code: Select all

<script type="text/javascript"><!--
$('img[id^=\'button-upload\']').on('click', function() {
	var node = this;
	
	$('#form-upload').remove();
	
	$('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" name="file" /></form>');
	
	$('#form-upload input[name=\'file\']').trigger('click');
	
	timer = setInterval(function() {
		if ($('#form-upload input[name=\'file\']').val() != '') {
			clearInterval(timer);
			
			$.ajax({
				url: 'index.php?route=tool/avatarupload',
				type: 'post',
				dataType: 'json',
				data: new FormData($('#form-upload')[0]),
				cache: false,
				contentType: false,
				processData: false,
				beforeSend: function() {
				   $('img[id=\'button-upload\']').after(' <i class="fa fa-circle-o-notch fa-spin fa-2x"></i>');
				},
				complete: function() {
				    $('.fa-spin').remove();
				},
				success: function(json) {
					$('.text-danger').remove();
					
					if (json['error']) {
						$(node).parent().find('input').after('<div class="text-danger">' + json['error'] + '</div>');
					}
					
					if (json['success']) {
						alert(json['success']);
						
                        $(node).parent().find('img').replaceWith('<img id="button-upload" src="' + json['code'] + '"  style="width: <?php echo $avatarwidth; ?>px; height: <?php echo $avatarheight; ?>px; padding: <?php echo $avatarpadding; ?>px;" class="img-thumbnail img-square img-responsive"/></div>');
                        $('#input-avatar').replaceWith('<input type="hidden" name="avatar" value="' + json['code'] + '" id="input-avatar" />');
                        $('input[type="submit"]').click();
					}
				},
				error: function(xhr, ajaxOptions, thrownError) {
					alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
				}
			});
		}
	}, 500);
});
//--></script>

I add this

$('input[type="submit"]').click();

For me to submit file without double clicking save button :laugh: O0 :joker: :crazy: :-X

New member

Posts

Joined
Fri Jul 24, 2015 3:36 pm
Who is online

Users browsing this forum: No registered users and 27 guests