Document

Read more about the article Metadata Updation in Badgeyay

Metadata Updation in Badgeyay

Badgeyay is a simple badge generator service to develop badges for technical events and conferences developed by FOSSASIA. Badgeyay is a SPA (Single Page Application) developed in ember, whose backend is in Flask. Now when user logins, he can see an option for user profile, in which all the metadata of its profile can be seen (extracted from Firebase). Now user should be able to change its metadata like profile image and username etc. So we will look how the profile image is being changed and updated in badgeyay.

Procedure

  1. Create function in frontend to listen for onclick events and initiate a file upload dialog box for selecting an image. We will use document property to initiate a dummy click event, else there will be a button with the text to upload a file and that won’t look consistent as we only need an image and nothing else on the UI.

class=“ui small circular image profile-image”>
     “{{user.photoURL}}”>
     “display: none;” id=“profileImageSelector” type=“file” onchange={{action “profileImageSelected”}}>
     

“profile-change” onclick={{action “updateProfileImage”}}>Change


 </div>

 

  1. Function to upload file and initiate a dummy click event
updateProfileImage() {
     // Initate a dummy click event
     document.getElementById(‘profileImageSelector’).click();
   },

   profileImageSelected(event) {
     const reader = new FileReader();
     const { target } = event;
     const { files } = target;
     const [file] = files;
     const _this = this;

     reader.onload = () => {
       _this.get(‘sendProfileImage’)(reader.result, file.type.split(‘/’)[1]);
     };

     reader.readAsDataURL(file);
   }

 

  1. Profile update function in the main controller to call the API endpoint to upload the data to backend. This will send the payload to backend which will later upload the image to cloud storage and save in the link in the database.
updateProfileImage(profileImageData, extension) {
     const _this = this;
     const user = this.get(‘store’).peekAll(‘user’);
     user.forEach(user_ => {
       _this.set(‘uid’, user_.get(‘id’));
     });
     let profileImage = _this.get(‘store’).createRecord(‘profile-image’, {
       image   : profileImageData,
       uid   : _this.uid,
       extension : ‘.’ + extension
     });
     profileImage.save()
       .then(record => {
         user.forEach(user_ => {
           user_.set(‘photoURL’, record.photoURL);
         });
       })
       .catch(err => {
         let userErrors = profileImage.get(‘errors.user’);
         if (userErrors !== undefined) {
           _this.set(‘userError’, userErrors);
         }
       });
   }
  1. Route to update profile image from backend
@router.route(‘/profileImage’, methods=[‘POST’])
def update_profile_image():
   try:
       data = request.get_json()[‘data’][‘attributes’]
   except Exception:
       return ErrorResponse(PayloadNotFound().message, 422, {‘Content-Type’: ‘application/json’}).respond()

   if not data[‘image’]:
       return ErrorResponse(ImageNotFound().message, 422, {‘Content-Type’: ‘application/json’}).respond()

   if not data[‘extension’]:
       return ErrorResponse(ExtensionNotFound().message, 422, {‘Content-Type’: ‘application/json’}).respond()

   uid = data[‘uid’]
   image = data[‘image’]
   extension = data[‘extension’]

   try:
       imageName = saveToImage(imageFile=image, extension=extension)
   except Exception:
       return ErrorResponse(ImageNotFound().message, 422, {‘Content-Type’: ‘application/json’}).respond()

   fetch_user, imageLink = update_database(uid, imageName)
   return jsonify(UpdateUserSchema().dump(fetch_user).data)

 

This will first create a temp file with the data URI and them upload that file to cloud storage and generate the link and then update the user in the database.

def update_database(uid, imageName):
   fetch_user = User.getUser(user_id=uid)
   if fetch_user is None:
       return ErrorResponse(UserNotFound(uid).message, 422, {‘Content-Type’: ‘application/json’}).respond()
   imagePath = os.path.join(app.config.get(‘BASE_DIR’), ‘static’, ‘uploads’, ‘image’) + ‘/’ + imageName
   imageLink = fileUploader(imagePath, ‘profile/images/’ + imageName)
   fetch_user.photoURL = imageLink
   fetch_user.save_to_db()

   try:
       os.unlink(imagePath)
   except Exception:
       print(‘Unable to delete the temporary file’)

   return fetch_user, imageLink

 

Link to PR – Link

Topics Involved

  • Google Cloud Admin Storage SDK
  • Ember data

Resources

  • Firebase admin sdk documentation – Link
  • Google Cloud Storage SDK Python – Link
  • Blob Management – Link
  • Documents API – Link
Continue ReadingMetadata Updation in Badgeyay
Read more about the article Adding ‘Scroll to Top’ in Loklak Search

Adding ‘Scroll to Top’ in Loklak Search

It is really important for a Progressive Web Application like Loklak to be user friendly. To enhance the user experience and help user scroll up through the long list of results, a new ‘Scroll to Top’ feature has been added to Loklak.

Integration Process

The feature is built using HostListener and Inject property of Angular, which allows to use Window and Document functionalities similar to Javascript.

Adding HostListener

First step would be to import HostListener and Inject, and create property of document using with Inject.

import { HostListener, Inject } from ‘@angular/core’;
navIsFixed: boolean;
constructor(
    @Inject(DOCUMENT) private document: Document
) { }

 

Next step would be to create method to detect the current state of window, and scroll to the top of window.

@HostListener(‘window:scroll’, [])
onWindowScroll() {
    if (window.pageYOffset
        || document.documentElement.scrollTop
        || document.body.scrollTop > 100) {
                this.navIsFixed = true;
    } else if (this.navIsFixed && window.pageYOffset
        || document.documentElement.scrollTop
            || document.body.scrollTop < 10) {
                    this.navIsFixed = false;
            }
        } scrollToTop() {
            (function smoothscroll() {
                const currentScroll =
                    document.documentElement.scrollTop
                        || document.body.scrollTop;
            if (currentScroll > 0) {
            window.requestAnimationFrame(smoothscroll);
            window.scrollTo(0,
                currentScroll – (currentScroll / 5));
        }
    })();
}

 

The last step would be to add user interface part i.e. HTML and CSS component for the Scroll to Top feature.

Creating user interface

HTML

HTML portion contains a div tag with class set to CSS created and a button with click event attached to it to call the scrollToTop() method created above.

CSS

The CSS class corresponding to the div tag provides the layout of the button.

button {
   display: block;
   margin: 32px auto;
   font-size: 1.1em;
   padding: 5px;
   font-weight: 700;
   background: transparent;
   border: none;
   cursor: pointer;
   height: 40px;
   width: 40px;
   font-size: 30px;
   color: white;
   background-color: #d23e42;
   border-radius: 76px;
   &:focus {
       border: none;
       outline: none;
   }
}
.scroll-to-top {
  position: fixed;
  bottom: 15px;
  right: 15px;
  opacity: 0;
  transition: all .2s ease-in-out;
}
.show-scroll {
  opacity: 1;
  transition: all .2s ease-in-out;
}

 

The button style creates a round button with an interactive css properties. scroll-to-top class defines the behaviour of the div tag when user scrolls on the results page.

How to use?

Goto Loklak and search a query. On results page, scroll down the window to see upward arrow contained in a red circle like:

On clicking the button, user should be moved to the top of results page.

Resources

Continue ReadingAdding ‘Scroll to Top’ in Loklak Search