Profile Image upload using Hypi

Profile Image upload is a common use case in many applications. Hypi facilitates the storage of profile pictures. It is very easy to upload the profile image to the Hypi domain and then display the image on the application user interface by fetching it from the domain.

In this article, we will see how the use-case of Profile Image upload can be handled with JavaScript using Hypi.

Hypi’s core app has a type definition called Image. Details of the uploaded image get stored in this data type.

Check below for simple HTML code. Here, script UploadPic.js uploads the image file to the Hypi domain. We have got a type called file with the ID profile-img. We select the file from the selection dialogue box and the file gets uploaded. We have styled the element to be displayed as a profile pic. DisplayPic.js script fetches the uploaded image and displays it over here.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>JavaScript HTTP Requests</title>
</head>

<style>
img {
  border: 1px solid #ddd; /* Gray border */
  border-radius: 4px;  /* Rounded border */
  padding: 5px; /* Some padding */
  width: 150px; /* Set a small width */
}

/* Add a hover effect (blue shadow) */
img:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
</style>

<body>
    <input type="file" id="profile-img">
    <script src="./UploadPic.js"></script>
    <script src="./DisplayPic.js"></script>
</body>
</html>

In the script UploadPic.js, we send an HTTP request to Hypi endpoint for uploading the image. An image object gets created after successfully uploading the file.

// select file input
const input = document.getElementById('profile-img');

// add event listener
input.addEventListener('change', () => {
    uploadFile(input.files[0]);
});

// Send Image Upload request to Hypi
const uploadFile = (file) => {

    // add file to FormData object
    const fd = new FormData();
    fd.append('profile-img', file);

    // send `POST` request
    fetch('https://api.hypi.app/upload/', {
        method: 'POST',
        body: fd,
        headers: {
      'Accept':'application/json',
      'Authorization':'Auth-Token', 
      'hypi-domain':'delirious.apps.hypi.app'
       }
    })
    .then(res => res.json())
    .then(json => console.log(json))
    .catch(err => console.error(err));
}

When we select the image to be uploaded, input element input.files[0] will contain the file. We send this (file) image over to Hypi domain using uploadFile function. This function uses the fetch function to send the HTTP request. We provide headers like Authorization token, Hypi domain, etc. We send the image file as the body of the HTTP request. We log in the results to the console of the browser. Here are the results of the console after uploading the profile pic of Hypi.

You can see here details of the image file in JSON format. It has the file name, hypi.id, and other details. You will also find URL tag that has a path to download the file.

To display the file on the User Interface, we use the DisplayPic.js script. In this JS file, we have sent an image download HTTP request to Hypi URL. We create this URL by appending the path obtained above with https://api.hypi.app. We are sending the HTTP request to formatted URL with the authorization header used previously.

const url ='https://api.hypi.app/file/01F52B07VZN5XBTMZEZPDS6FJF-01F8YARJAEC7KSEJWTSFMSNVBW.png'
const authHeader ="auth-token" 

const options = {
  headers: {
    Authorization: authHeader
  }
};

//Send image download request to Hypi
 
 fetch(url, options)
  .then( res => res.blob() )
  .then( blob => {
    var a = document.createElement("a");
    a.href = URL.createObjectURL(blob);   
    var img = document.createElement("img");
    img.src = url
    document.body.appendChild(img); 
});

In this example, we have provided an authorization token. But if files are not private to the account, it is possible to give access to other users. To allow anonymous download, permission must be created with appropriate policies.

After fetching the image, we display it with the help of a element and img element styled in the HTML file.

We have used a hardcoded URL to send the request. Hypi user has to programmatically create the url to display the changing profile pictures. Just parse the JSON to get the path key-value and append it to the hypi endpoint. (https://api.hypi.app)

Conclusion:

You may have a fair idea by now how the File upload functionality of Hypi can be used in a simple use case like Profile Image Upload.

The example given in this article is JavaScript-based. But as we say Hypi is a language agnostic platform, you may use the File Upload feature of Hypi with ease with any programming language. We usually have the fetch kind of function to connect with an endpoint. Just use proper headers and URLs to send/receive the file/image through an HTTP request to Hypi. And Hypi will take care of the rest of the stuff.

Do leave us a comment if you have any queries/suggestions!