Building a User Avatar Component With Node.js & TransloadIt

{{/if}}

Note that we’re including a hidden field which contains the username. We’re going to send this to TransloadIt with our request, so that it can be used in our templates.

Now add the JavaScript, beginning with some variable initialization using our json Handlebars helper:

<span>var sig = {{{ json sig }}};</span>

Now we’ll bind the TransloadIt plugin to the upload form:

<span>$(function() {
</span>  <span>$('#avatar-form').transloadit({
</span>    <span>wait: true,
</span>    <span>params: JSON.parse(sig.params),
</span>    <span>signature: sig.signature,
</span>    <span>fields: true,
</span>    <span>triggerUploadOnFileSelection: true,
</span>    <span>autoSubmit: false,
</span>    <span>onSuccess: function(assembly) {
</span>      <span>$('img#avatar').attr('src', assembly.results.thumbnail[0].url + '?' + (new Date()).getTime() );
</span>      <span>var derivatives = {
</span>        <span>thumbnail : assembly.results.thumbnail[0].url,
</span>        <span>medium : assembly.results.medium[0].url,
</span>        <span>large : assembly.results.large[0].url
</span>      <span>};
</span>      $<span>.ajax({
</span>        <span>type: 'post',
</span>        <span>url: '/avatar',
</span>        <span>data: derivatives,
</span>        <span>success: function(resp){
</span>          <span>console.log(resp);
</span>        <span>}
</span>      <span>})
</span>    <span>}
</span>  <span>});
</span><span>});</span>

This is more complex than the minimal integration initialization we looked at earlier, so let’s go through it a bit at a time.

We’re pulling in the params and signature from the sig variable, which we generated on the server and then encoded as JSON. Because the params part is nested, we use JSON.parse() to convert it back into an object, from which TransloadIt will extract the relevant parameters.

In the plugin initialization, wait is set to true, which means we wait until both the files have been uploaded and they’ve been processed.

Using Assembly notifications — which you can read about later in the Advanced Usage section — means that you won’t necessarily have to wait for the file to be processed, in which case you can set wait to false.

fields is set to true to tell the plugin that we want to include additional information when we send the files for processing; in our case that’s a hidden form field named username, which we populate with the authenticated user’s username.

triggerUploadOnFileSelection is used to send the file to Transloadit as soon as the user has selected a file, rather than when the form is submitted. autoSubmit prevents it from submitting the form once the result comes back from Transloadit, since we’re going to do that manually ourselves.

The onSuccess callback gets fired when the data comes back from Transloadit, which gives us a hash of data in assembly.

The assembly object contains a results property, which in turn contains properties for each of our “steps”. These contain an array of file objects. Since we’re only uploading one file, they’ll be arrays containing a single item. Each file object contains a number of properties including the original file name, meta information, unique IDs from Transloadit and other bits and pieces. To see the full range of information, you may wish to log it out into the console and take a look. However all we’re really interested in is the url property, which contains the URL of the generated image on S3.

Alternatively, you may wish to use the ssl_url property, which is identical to url but over HTTPS.

We’re simply extracting the three URLs by the corresponding derivative’s name, then creating a hash of the three derivatives and their corresponding URL’s.

To provide visual feedback to the user, we also grab the URL of the thumbnail and modify the avatar on the page to show the newly-uploaded image.

Finally, we use Ajax to POST that data silently back to our application.

Here’s the avatar route to capture that data:

<span>var sig = {{{ json sig }}};</span>

In production, you’ll probably want to sanitize and validate this.

As you can see, we take the hash of derivative images and their URLs, grab the currently authenticated user from req.user, set the avatar property to the provided hash and then update the user model.

This is just one possible approach. For quicker feedback, you might want to use the plugin’s onResult callback to obtain the thumbnail as soon as it’s been generated, rather than wait for all three derivatives. Instead of using an Ajax call from your client code to notify your server, you may instead prefer to use the Assembly notifications feature, which provides the additional benefit of running the assemblies in the background, rather than holding up execution on the client. Consult the plugin documentation for the full range of options.

That concludes our basic application. Don’t forget, all the source — including the authentication mechanism — is over on Github.

Advanced Usage

Before we wrap up, let’s just take a brief look at a couple of the more advanced aspects of TransloadIt.

Other Client-Side Options

You don’t have to use the provided jQuery plugin. In the Community Projects section of the documentation you’ll find a number of alternatives, including a plugin for Bootstrap, one for drag n’ drop, an Angular plugin or support for plain old XHR, among others.

The XHR one might be worth you looking at in more detail. It’s a bare-bones solution which offers plenty of flexibility, whilst requiring you to provide your own feedback — for example some sort of upload indicator. It’s also worth noting that once it has uploaded the file, it tries to determine when the assembly has been completed by polling the server at intervals of 1000ms.

Notifications

Rather than have users wait around for their uploads to be processed, you can use notifications to ping your application when the files are ready. Using this approach a user only need wait until the upload has completed.

Notifications are easy to implement from a consumer point-of-view; simply include a notify_url with your assembly instructions, for example:

<span>var sig = {{{ json sig }}};</span>

When your URL gets pinged by Transloadit, the JSON provided will include a signature field which you can use to verify that the notification did indeed come from them. Simply decode the signature using your auth secret.

During development, you may wish to take advantage of this proxy package in order to test your assembly notifications, or use a tunnelling service such as ngrok.

Summary

In this two-part series we’ve taken a comprehensive look at TransloadIt, a file processing service.

In part one, we went through some of the advantages and disadvantages and then looked at the key concepts.

This part, we got our hands dirty and built a simple user avatar component using jQuery, Node.js and Express.

You’re not restricted to jQuery, and indeed you’re free to use a vanilla JavaScript solution or your favorite framework. You don’t even need to use it from a client-side application, and when it comes to server-side technologies you have a wide range of options. Hopefully, though, you’ve now got an appreciation of how it can be used for image-handling.

Are you using TransloadIt in your projects? Do you know of a better service? Let me know in the comments.

Frequently Asked Questions (FAQs) about User Avatar Component in Node.js with Transloadit

How Can I Customize the Avatar’s Appearance in Node.js with Transloadit?

Customizing the avatar’s appearance in Node.js with Transloadit involves modifying the parameters in the assembly instructions. You can change the size, shape, and color of the avatar. For instance, to change the size, adjust the ‘resize’ parameter. To change the shape, use the ‘crop’ parameter. You can also add a watermark or overlay text on the avatar by using the ‘watermark’ and ‘text’ parameters respectively.

How Can I Implement User Avatar Component in Node.js with Transloadit in a Real-World Application?

Implementing the user avatar component in a real-world application involves integrating it into your application’s user registration or profile update process. When a user registers or updates their profile, you can use Transloadit to generate an avatar based on the user’s details. You can then store the avatar’s URL in your database and use it wherever you need to display the user’s avatar.

How Can I Handle Errors When Using Transloadit for User Avatar Generation?

Handling errors in Transloadit involves listening for error events in your assembly. If an error occurs during the assembly process, Transloadit will emit an ‘error’ event. You can listen for this event and handle it appropriately. For instance, you might want to log the error, notify the user, or retry the assembly.

Can I Use Transloadit for User Avatar Generation in a Non-Node.js Environment?

Yes, Transloadit is a cloud-based service and it provides APIs for various programming languages including Python, Ruby, PHP, and Java. You can use these APIs to integrate Transloadit into your non-Node.js application.

How Can I Optimize the Performance of User Avatar Generation with Transloadit?

Optimizing the performance of user avatar generation with Transloadit involves fine-tuning your assembly instructions and managing your resources effectively. For instance, you can reduce the size of the generated avatars to save bandwidth and storage space. You can also use Transloadit’s ‘auto_retry’ feature to automatically retry failed assemblies, which can improve the reliability of your avatar generation process.

How Can I Test the User Avatar Component in Node.js with Transloadit?

Testing the user avatar component involves creating unit tests for your assembly instructions and integration tests for your application’s integration with Transloadit. You can use testing frameworks like Mocha or Jest for this purpose. You can also use mock services to simulate Transloadit’s behavior during testing.

How Can I Secure the User Avatar Generation Process with Transloadit?

Securing the user avatar generation process with Transloadit involves using secure URLs for your assemblies and protecting your Transloadit API keys. You can use Transloadit’s ‘signature authentication’ feature to ensure that only authorized clients can create assemblies. You should also store your Transloadit API keys securely and never expose them in client-side code.

Can I Use Transloadit for Other Media Processing Tasks Besides User Avatar Generation?

Yes, Transloadit is a versatile media processing service and it supports a wide range of tasks besides user avatar generation. You can use it for image and video processing, file uploading, and more. You can even chain multiple tasks together in a single assembly to create complex media processing workflows.

How Can I Monitor the Progress of User Avatar Generation with Transloadit?

Monitoring the progress of user avatar generation with Transloadit involves listening for progress events in your assembly. Transloadit emits ‘progress’ events at regular intervals during the assembly process. You can listen for these events and update your application’s UI to reflect the current progress.

How Can I Scale the User Avatar Generation Process with Transloadit?

Scaling the user avatar generation process with Transloadit involves using multiple assemblies and managing your Transloadit usage effectively. You can create multiple assemblies to process avatars in parallel, which can significantly increase your throughput. You should also monitor your Transloadit usage and adjust your plan as needed to ensure that you have enough capacity to handle your application’s load.

The above is the detailed content of Building a User Avatar Component With Node.js & TransloadIt. For more information, please follow other related articles on the PHP Chinese website!