Skip to content

Commit

Permalink
Added cropped functionality to upload images in users and courses
Browse files Browse the repository at this point in the history
  • Loading branch information
@jloguercio
jloguercio committed Oct 28, 2015
1 parent fb78d0e commit 6242ea4
Show file tree
Hide file tree
Showing 4 changed files with 187 additions and 21 deletions.
46 changes: 44 additions & 2 deletions main/admin/user_add.php
View file
Expand Up @@ -42,6 +42,35 @@
});
</script>';
}
$htmlHeadXtra[] = '<link href="'. api_get_path(WEB_PATH) .'web/assets/cropper/dist/cropper.min.css" rel="stylesheet">';
$htmlHeadXtra[] = '<script src="'. api_get_path(WEB_PATH) .'web/assets/cropper/dist/cropper.min.js"></script>';
$htmlHeadXtra[] = '<script>
$(document).ready(function() {
$("input:file").change(function() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("picture").files[0]);
oFReader.onload = function (oFREvent) {
document.getElementById("previewImage").src = oFREvent.target.result;
$("#labelCroppImage").html("'.get_lang('Preview').'");
var $image = $("#previewImage");
$image.cropper({
aspectRatio: 1 / 1,
movable: false,
zoomable: false,
rotatable: false,
scalable: false,
crop: function(e) {
// Output the result data for cropping image.
$("[name=\'croppResult\']").val(e.x+","+e.y+","+e.width+","+e.height);
}
});
};
});
});
</script>';


$htmlHeadXtra[] = '
<script>
Expand Down Expand Up @@ -139,9 +168,21 @@ function display_drh_list(){
// Phone
$form->addElement('text', 'phone', get_lang('PhoneNumber'));
// Picture
$form->addElement('file', 'picture', get_lang('AddPicture'));
$form->addElement('file', 'picture', get_lang('AddImage'), array('id' => 'picture', 'class' => 'picture-form'));
$allowed_picture_types = array ('jpg', 'jpeg', 'png', 'gif');

$form->addHtml(''
. '<div class="form-group">'
. '<label for="croppImage" id="labelCroppImage" class="col-sm-2 control-label"></label>'
. '<div class="col-sm-8">'
. '<div id="croppImage" class="croppCanvas">'
. '<img id="previewImage" >'
. '</div>'
. '</div>'
. '</div>'
. '');
$form->addHidden('croppResult', '');

$form->addRule('picture', get_lang('OnlyImagesAllowed').' ('.implode(',', $allowed_picture_types).')', 'filetype', $allowed_picture_types);

// Username
Expand Down Expand Up @@ -401,7 +442,8 @@ function display_drh_list(){
$picture_uri = UserManager::update_user_picture(
$user_id,
$_FILES['picture']['name'],
$_FILES['picture']['tmp_name']
$_FILES['picture']['tmp_name'],
$user['croppResult']
);
UserManager::update_user(
$user_id,
Expand Down
48 changes: 46 additions & 2 deletions main/admin/user_edit.php
View file
Expand Up @@ -68,6 +68,35 @@ function confirmation(name) {
}
</script>';

$htmlHeadXtra[] = '<link href="'. api_get_path(WEB_PATH) .'web/assets/cropper/dist/cropper.min.css" rel="stylesheet">';
$htmlHeadXtra[] = '<script src="'. api_get_path(WEB_PATH) .'web/assets/cropper/dist/cropper.min.js"></script>';
$htmlHeadXtra[] = '<script>
$(document).ready(function() {
$("input:file").change(function() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("picture").files[0]);
oFReader.onload = function (oFREvent) {
document.getElementById("previewImage").src = oFREvent.target.result;
$("#labelCroppImage").html("'.get_lang('Preview').'");
var $image = $("#previewImage");
$image.cropper({
aspectRatio: 1 / 1,
movable: false,
zoomable: false,
rotatable: false,
scalable: false,
crop: function(e) {
// Output the result data for cropping image.
$("[name=\'croppResult\']").val(e.x+","+e.y+","+e.width+","+e.height);
}
});
};
});
});
</script>';

$libpath = api_get_path(LIBRARY_PATH);
$noPHP_SELF = true;
$tool_name = get_lang('ModifyUserInfo');
Expand Down Expand Up @@ -155,8 +184,21 @@ function confirmation(name) {
$form->addElement('text', 'phone', get_lang('PhoneNumber'));

// Picture
$form->addElement('file', 'picture', get_lang('AddPicture'));
$form->addElement('file', 'picture', get_lang('AddPicture'), array('id' => 'picture', 'class' => 'picture-form'));
$allowed_picture_types = array ('jpg', 'jpeg', 'png', 'gif');

$form->addHtml(''
. '<div class="form-group">'
. '<label for="croppImage" id="labelCroppImage" class="col-sm-2 control-label"></label>'
. '<div class="col-sm-8">'
. '<div id="croppImage" class="croppCanvas">'
. '<img id="previewImage" >'
. '</div>'
. '</div>'
. '</div>'
. '');
$form->addHidden('croppResult', '');

$form->addRule(
'picture',
get_lang('OnlyImagesAllowed').' ('.implode(',', $allowed_picture_types).')',
Expand Down Expand Up @@ -333,7 +375,9 @@ function confirmation(name) {
$picture_uri = UserManager::update_user_picture(
$user_id,
$_FILES['picture']['name'],
$_FILES['picture']['tmp_name']
$_FILES['picture']['tmp_name'],
$user['croppResult']

);
}

Expand Down
43 changes: 41 additions & 2 deletions main/auth/profile.php
View file
Expand Up @@ -31,7 +31,34 @@
}

$htmlHeadXtra[] = api_get_password_checker_js('#username', '#password1');
$htmlHeadXtra[] = '<link href="'. api_get_path(WEB_PATH) .'web/assets/cropper/dist/cropper.min.css" rel="stylesheet">';
$htmlHeadXtra[] = '<script src="'. api_get_path(WEB_PATH) .'web/assets/cropper/dist/cropper.min.js"></script>';
$htmlHeadXtra[] = '<script>
$(document).ready(function() {
$("input:file").change(function() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("picture_form").files[0]);
oFReader.onload = function (oFREvent) {
document.getElementById("previewImage").src = oFREvent.target.result;
$("#labelCroppImage").html("'.get_lang('Preview').'");
var $image = $("#previewImage");
$image.cropper({
aspectRatio: 1 / 1,
movable: false,
zoomable: false,
rotatable: false,
scalable: false,
crop: function(e) {
// Output the result data for cropping image.
$("[name=\'croppResult\']").val(e.x+","+e.y+","+e.width+","+e.height);
}
});
};
});
});
function confirmation(name) {
if (confirm("'.get_lang('AreYouSureToDeleteJS', '').' " + name + " ?")) {
document.forms["profile"].submit();
Expand Down Expand Up @@ -207,8 +234,19 @@ function show_icon_edit(element_html) {
($user_data['picture_uri'] != '' ? get_lang('UpdateImage') : get_lang(
'AddImage'
)),
array('class' => 'picture-form')
array('id' => 'picture_form', 'class' => 'picture-form')
);
$form->addHtml(''
. '<div class="form-group">'
. '<label for="croppImage" id="labelCroppImage" class="col-sm-2 control-label"></label>'
. '<div class="col-sm-8">'
. '<div id="croppImage" class="croppCanvas">'
. '<img id="previewImage" >'
. '</div>'
. '</div>'
. '</div>'
. '');
$form->addHidden('croppResult', '');
$form->add_progress_bar();
if (!empty($user_data['picture_uri'])) {
$form->addElement('checkbox', 'remove_picture', null, get_lang('DelImage'));
Expand Down Expand Up @@ -497,7 +535,8 @@ function check_user_email($email) {
$new_picture = UserManager::update_user_picture(
api_get_user_id(),
$_FILES['picture']['name'],
$_FILES['picture']['tmp_name']
$_FILES['picture']['tmp_name'],
$user_data['croppResult']
);

if ($new_picture) {
Expand Down
71 changes: 56 additions & 15 deletions main/course_info/infocours.php
View file
Expand Up @@ -46,6 +46,35 @@ function is_settings_editable()
api_not_allowed(true);
}

$htmlHeadXtra[] = '<link href="'. api_get_path(WEB_PATH) .'web/assets/cropper/dist/cropper.min.css" rel="stylesheet">';
$htmlHeadXtra[] = '<script src="'. api_get_path(WEB_PATH) .'web/assets/cropper/dist/cropper.min.js"></script>';
$htmlHeadXtra[] = '<script>
$(document).ready(function() {
$("input:file").change(function() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("picture").files[0]);
oFReader.onload = function (oFREvent) {
document.getElementById("previewImage").src = oFREvent.target.result;
$("#labelCroppImage").html("'.get_lang('Preview').'");
var $image = $("#previewImage");
$image.cropper({
aspectRatio: 4 / 3,
movable: false,
zoomable: false,
rotatable: false,
scalable: false,
crop: function(e) {
// Output the result data for cropping image.
$("[name=\'croppResult\']").val(e.x+","+e.y+","+e.width+","+e.height);
}
});
};
});
});
</script>';

$show_delete_watermark_text_message = false;
if (api_get_setting('pdf_export_watermark_by_course') == 'true') {
if (isset($_GET['delete_watermark'])) {
Expand Down Expand Up @@ -103,18 +132,6 @@ function is_settings_editable()

$image_html = '';

// Sending image
if ($form->validate() && is_settings_editable()) {
// update course picture
$picture = $_FILES['picture'];
if (!empty($picture['name'])) {
$picture_uri = CourseManager::update_course_picture(
$course_code,
$picture['name'],
$picture['tmp_name']
);
}
}

// Display course picture
$course_path = api_get_path(SYS_COURSE_PATH).$currentCourseRepository; // course path
Expand Down Expand Up @@ -147,10 +164,21 @@ function is_settings_editable()
$form->applyFilter('department_url', 'html_filter');

// Picture
$form->addElement('file', 'picture', get_lang('AddPicture'));
$form->addElement('file', 'picture', get_lang('AddPicture'), array('id' => 'picture', 'class' => 'picture-form'));
$form->addHtml(''
. '<div class="form-group">'
. '<label for="croppImage" id="labelCroppImage" class="col-sm-2 control-label"></label>'
. '<div class="col-sm-8">'
. '<div id="croppImage" class="croppCanvas">'
. '<img id="previewImage" >'
. '</div>'
. '</div>'
. '</div>'
. '');
$form->addHidden('croppResult', '');
$allowed_picture_types = array ('jpg', 'jpeg', 'png', 'gif');
$form->addRule('picture', get_lang('OnlyImagesAllowed').' ('.implode(',', $allowed_picture_types).')', 'filetype', $allowed_picture_types);
$form->addElement('html', '<div class="form-group "><div class="col-md-2"></div> <div class="col-md-8 help-image">'.get_lang('UniqueAnswerImagePreferredSize200x150').'</div></div>');
//$form->addElement('html', '<div class="form-group "><div class="col-md-2"></div> <div class="col-md-8 help-image">'.get_lang('UniqueAnswerImagePreferredSize200x150').'</div></div>');
$form->addElement('checkbox', 'delete_picture', null, get_lang('DeletePicture'));

if (api_get_setting('pdf_export_watermark_by_course') == 'true') {
Expand Down Expand Up @@ -427,7 +455,20 @@ function is_settings_editable()
// Validate form
if ($form->validate() && is_settings_editable()) {
$updateValues = $form->exportValues();


// Sending image
if ($form->validate() && is_settings_editable()) {
// update course picture
$picture = $_FILES['picture'];
if (!empty($picture['name'])) {
$picture_uri = CourseManager::update_course_picture(
$course_code,
$picture['name'],
$picture['tmp_name'],
$updateValues['croppResult']
);
}
}
$visibility = $updateValues['visibility'];
$deletePicture = isset($updateValues['delete_picture']) ? $updateValues['delete_picture'] : '';

Expand Down

0 comments on commit 6242ea4

Please sign in to comment.