Compress Images with JavaScript for Faster Website Speed

DavidAPI, Tutorials, Working with Filestack0 Comments

Why Should You Compress Images for Your Website? Optimizing images to increase website speed is crucial for improving your user experience and increasing your website conversion rates. Studies by Alkamai and Gomez show that… The average online shopper expects your pages to load in two seconds or less. After three seconds, up to 40% of website visitors will abandon your … Read More

Recreate Silicon Valley’s Not Hotdog App with Filestack’s Tagging Feature

Richard HerbertAPI, Tutorials, Working with Filestack0 Comments

nothotdog_banner

Deep learning has gone from sci-fi concept to industry buzzword within only a matter of years. What started as proof-of-concepts and enhanced facial recognition software quickly ballooned into state-of-the-art image and speech recognition, video analysis, behavioral predictions and untold other successes, where the goal was specific enough and the dataset large enough to benefit from deep models. With modern algorithms … Read More

Filestack Tutorial For Beginners: Part 2 Watermark

Nathan DulleaAPI, Tutorials, Working with Filestack0 Comments

dog image with signature

Welcome Back! Hello, and welcome back to the Filestack Tutorial For Beginners. If you have not seen the first half then check it out here. Otherwise, let’s keep making progress on our watermarking application. Perform a Transformation: Watermark Working with Uploaded Files: The Filestack Handle At this point you are probably wondering: “Okay, I understand how to upload files, and … Read More

Introducing The Filestack Command-Line Interface

Richard HerbertProduct Updates, Tutorials, Working with Filestack0 Comments

Command-line Interface

Filestack provides a robust and scalable solution for content upload and file delivery. We are used for websites, digital services, enterprise software and endless other projects across the industry. Our File Picker is easily integrated into any website, and we have a growing list of SDKs for use in projects of various languages, including plugins for popular frameworks. Sometimes, though, … Read More

Filestack Tutorial For Beginners: Part 1 File Uploading

Nathan DulleaAPI, Tutorials, Working with Filestack4 Comments

Edit Image of Dog Screenshot

The purpose of this two part tutorial is to provide enough instruction, and explanation on Filestack’s Javascript API that someone inexperienced with either Filestack or Javascript can leave with a grasp on what we do, and how we do it. The first part will focus on basic HTML and Javascript, and implementing file uploads, and the second will focus on … Read More

Improve Your Workflow with Cache and Debug

Samuele ZazaAPI, Tutorials, Working with Filestack0 Comments

In my last few articles we discussed several features that make Filestack’s API such a big game changer in your development process. We compared Filestack pick function with a more traditional approach to handle files upload in the article “Comparing Node & JQuery File Upload vs Filestack” showing that it allows for fast development and no hassle when it comes to security. Moreover, … Read More

LinkedIn Launches Photo Filters and Editing in their App… And You Can, Too.

Bethany StachenfeldAPI, Thoughts and Knowledge, Working with Filestack0 Comments

LinkedIn's New Photo Filters

On March 14, LinkedIn released Photo Filters and Editing for profile pictures, along with guidelines on how to get noticed with a “professional” photo (read more here). The fact is, profile pictures are important, and you don’t always need a professional headshot to look good. Often, a selfie with some nifty filters will do the trick. With LinkedIn’s new features, … Read More

Take a Screenshot with Filestack and React

Samuele ZazaAPI, Tutorials, Working with Filestack0 Comments

URL Screenshot

Taking screenshots is common for those of us who live on our phones and laptops. Sometimes we want to share glimpses of funny conversations with friends, other times, in the office for example, we take screenshots to quickly share unexpected results on our screens. Screenshots are so common that nowadays the majority of our devices offer a specific key combination to either take a … Read More

Upscale Images with React and Filestack

Samuele ZazaTutorials, Working with Filestack0 Comments

Editing Image Example

I have always been amazed by the upscale processes shown in action movies. Typically, a satellite photo captures the assumed location of the villain and the picture is infinitely zoomed while preserving a great amount of details. This works pretty well in fictional stories, but when you try to enlarge an image in real life, the result is not what we expect. In … Read More

Programmatically Enhance Images with Filestack and React

Samuele ZazaTutorials, Working with Filestack0 Comments

With social media platforms like Facebook, Instagram, Snapchat and Twitter becoming staples in our lives, we regularly share moments in our lives through casual images on the web. Think about selfies: The simple term for a self-portrait photograph is a very common snapshot that invaded Facebook, Instagram and Twitter whose popularity is never decreasing. The fact is, the rise of accessible … Read More

Red-Eye Removal with React and Filestack

Samuele ZazaTutorials, Working with Filestack0 Comments

Remove Redeye Image

One of the most undesirable results of taking photos is the red-eye effect. In photography the red-eye effect occurs when a camera captures light reflecting from the retina of the subject’s eyes or when a flash is used at night and in dim lighting. This is a pretty common effect that all of us experienced at least once and it’s easily preventable by … Read More

Realtime Machine Learning with PyTorch and Filestack

Richard HerbertTutorials, Working with Filestack0 Comments

Only a few years after its name was coined, deep learning found itself at the forefront of the digital zeitgeist. Over the course of the past two decades, online services evolved into large-scale cloud platforms, while popular libraries like Tensorflow, Torch and Theano later made machine learning integration far simpler and more efficient. Algorithms deemed intractable prior to 2000 became the de … Read More

Create a YouTube-like App with React, Node.Js and Filestack

Samuele ZazaAPI, Tutorials, Working with Filestack0 Comments

In this tutorial, I’ll walk you through how to create your own YouTube-like app. The final application will allow users to upload and share videos to the public.  We will use React for the client side, Node.js for the server side, and Filestack to upload and transcode the videos. Although I’re highlighting YouTube-like apps, this tutorial will be helpful if … Read More

Build an Image-to-ASCII Art App in React

Samuele ZazaTutorials, Working with Filestack0 Comments

Ascii Art Example

ASCII art is a beautiful thing to a geek.  For fun, we built a transformation to convert any image into an HTML file of ASCII code,  and since then, we’ve had users create twitter bots and stores to print ASCII art posters. When using Filestack’s API, the resulting ASCII art looks like this: If you are looking to integrate the … Read More

Compress Images Programmatically with Filestack and React

Samuele ZazaTutorials, Working with Filestack0 Comments

In recent years, we have seen an exponential increase in the number of images displayed online. Each of the 2 billion people with a smartphone is an amateur photographer, taking and sharing images regularly. Additionally, as the the capabilities of smartphone cameras continue to advance, file sizes are also trending larger. As a result, we are seeing scores of large images circulate the web. To a software … Read More

How to Implement File Picker V3 with React on Node

Samuele ZazaAPI, Tutorials, Working with Filestack1 Comment

With new File Picker V3, file uploading integration in your codebase has never been easier. We published the client in the npm registry so you can now say “goodbye” to the script tag within your html files when using Node.   With a Node application, you can simply retrieve and download the script by running npm command `install`: npm install filestack-js Or alternatively using … Read More

File Picker V3 in Action

Samuele ZazaProduct Updates, Working with Filestack0 Comments

Filestack has recently launched our File Picker V3 with a minimalistic design, in-app image transformations, and an even faster file uploading API.  In case you missed it, you can read more about the new features and improvements in our article Filestack Launches File Picker V3. The new UI is what everyone needs in a modern website. Uploading a file has never … Read More

MaxCDN vs Fastly – Our Journey Choosing the Best CDN Partner

Bethany StachenfeldThoughts and Knowledge, Working with Filestack0 Comments

Are you deciding between MaxCDN and Fastly for your CDN? This post details Filestack’s own notes and research from our hunt to find the best CDN to partner with to deliver billions of files for our end users around the world.  We presently deliver 186 TB of data with 1.7 billion requests monthly, so picking the right CDN was an … Read More

Accelerating Application Delivery with a CDN

Bethany StachenfeldAPI, Thoughts and Knowledge, Working with Filestack0 Comments

If you’ve ever encountered a slow loading webpage, you know exactly how wait time impacts user experience. According to Kissmetrics, a 4 second wait time leads to a 25% abandonment rate. The average Internet user expects a page to load in 2 seconds or less, and is not happy to wait longer than that.  These problems are only exacerbated on … Read More

Generate a Zip File Programmatically with Javascript & React

Samuele ZazaAPI, Tutorials, Working with Filepicker, Working with Filestack0 Comments

Zip files are ubiquitous files on the net. We use them frequently when sending an e-mail or downloading a program. What is a zip file? It’s an archive format which contains one or several files in a compressed form in order to reduce the overall size of the file. This is not a new technology. The zip format was invented in … Read More

Yahoo study finds filters increase photo views 21%, comments 45%

Samuele ZazaAPI, Tutorials, Working with Filepicker, Working with Filestack0 Comments

Photo filters are everywhere on the internet.  But do they really affect engagement? Yes.  A lot. At least according to an  interesting 2015 study from the team at Yahoo Labs and Georgia Tech called Why We Filter Our Photos and How It Impacts Engagement (PDF) which looked at the use of photo filters in the Flickr community. Based on a study of 7.6 … Read More

[Tutorial] Add watermarks to images using React and Filestack API

Samuele ZazaAPI, Tutorials, Working with Filepicker, Working with Filestack0 Comments

You might remember the case of the monkey selfie. In 2011, a nature photographer named David Slater was in Indonesia to photograph some Celebes crested macaques. He set up the camera on a tripod, and left the remote trigger for the camera out so that a macaque that wandered by could take it’s own picture.  One of the macaques actually did, taking some amazing … Read More

An API to convert any image into ASCII

Michael FerrantiAPI, Tutorials, Working with Filestack0 Comments

  Who doesn’t love ASCII art? There are the true artists who create art themselves, a character at a time. For the rest of us, there are lots of great ASCII art generators, for instance Picascii or Text Image.  One thing they are missing though is an API to handle the image-to-ASCII conversion.  When we were building our API for image … Read More

How to automatically resize, fit, and align any image using only URL parameters

Michael FerrantiAPI, Tutorials, Working with Filestack0 Comments

  Resizing images like pngs, jpgs or gifs is one of the most common things we have to do as developers.  You might need to optimize the layout of a website or application, reduce the size of your images to increase page performance or even just get the alignment of that reaction meme you’re playing around with just right before … Read More

Crop, Resize and Filter Photos Using JavaScript, React and the Filestack API

Samuele ZazaAPI, Tutorials, Working with Filestack2 Comments

Developing and maintaining an application that processes many images can be tedious and time consuming – even for the most skilled developer. Filestack strives to automate away the tedium, leaving you more time to focus on your core development. One of the ways we do this is by allowing you to crop, filter, resize, and apply more transformations to images simply by … Read More

Create Profile Pictures with NodeJS, JQuery & Google MDL

Samuele ZazaTutorials, Working with Filepicker, Working with Filestack0 Comments

In this tutorial, we will walk through using Filestack’s API to upload avatars for applications. Filestack’s team strive provide more and more sophisticated algorithms to manipulate images: This is not just for filtering or image transformations but rather to provide a complete API for users to ease app development. This is actually not the first time we are working with face recognition, … Read More

Upload User Images to Shopify with NodeJS

Samuele ZazaTutorials, Working with Filestack2 Comments

From fashion to print shops, Shopify is a great resource for building Ecommerce platforms. Shopify makes it easy to sell goods online – where you can showcase your store and have an online checkout option. However, we often hear clients ask, “How do I enable users to upload pictures to my Shopify store, for custom prints or clothing to resell?” Filestack’s super API … Read More

How to Build an Instagram Clone with React, Node.js and Redux

Samuele ZazaTutorials, Working with Filepicker, Working with Filestack0 Comments

Today, I will demonstrate how to create an Instagram clone – in which you can upload files, apply image filters, and share your photos with the world. I will use  React, Node.js, and Redux, as well as Filestack to power the app’s file uploading and image processing functionality. To create an Instagram clone, you need to: Implement a file uploader with a pick function. … Read More

Secure File Uploads with Filestack using Pug and Node.js

Samuele ZazaTutorials, Working with Filestack0 Comments

We are finally discussing one of the hottest features of our API – Security. In the previous list of tutorials we have seen Filestack implemented for different use cases (image galleries, responsive images, facial detection and manipulation, and more), with all integrations having one commonality: They are done in the front-end, so any person with basic knowledge of the browser development … Read More

Drag and Drop Files into your App, just like Slack (Demo in jQuery)

Bethany StachenfeldThoughts and Knowledge, Tutorials, Working with Filestack0 Comments

Slack recently announced new file sharing functionality.  Now, Slack users can easily share content by dragging and dropping files, or by accessing files on native and outside services, including Dropbox, Box and Google Drive. Drag and Drop File Uploads:   Native and Outside Service Files: Slack’s announcement made our geeky file-sharing-enthusiast hearts burst with joy  – we LOVE seeing companies … Read More

Detect & Blur Faces to Create a “Guess Who” Game with Node.js & React

Samuele ZazaTutorials, Working with Filestack2 Comments

A Guess Who game?! Have you ever thought about integrating Filestack into a game? Today I am going to challenge you guys… During the past months, I have been writing posts to showcase different scenarios where Filestack comes in handy: We have seen more than once how Filestack handles pictures upload to help us create several apps, not to mention the … Read More

How To Make An Image Responsive

Samuele ZazaTutorials, Working with Filestack2 Comments

Users are now accessing our websites from tons of different devices.  The idea of using a PC as the only source for surfing the net sounds like the Stone Age, doesn’t it?  Obviously, different devices mean different screens, different screens mean different sizes and so forth. To put it simply, one of our challenges as developers is definitely the rendering … Read More

How to Collage Images in Your Code to Make Beautiful Posters

Samuele ZazaTutorials, Working with Filestack2 Comments

As I never tire of repeating –  Filestack shines when it comes to manipulating images. My last post on image enhancements demonstrates the depths and magnitude of our transformations, and this post will continue down the images path to make a new app for creating photo collages. And by the way, when you are ready to turn your app into a business, make sure to see our … Read More

Enhance Images in your App

Samuele ZazaProduct Updates, Tutorials, Working with Filestack2 Comments

Here at Filestack, we are never done developing.  As the Internet and general technology are constantly evolving, our mission to apply new functionality to our files management API is forever growing. It is with great pleasure that I am showing you the newest available feature for our Filestack Pro clients: We just released a set of Image Enhancements built on deep learning technologies to … Read More

How to Create an Image Gallery with Filestack

Samuele ZazaTutorials, Working with Filestack0 Comments

In the last tutorials, I gave an overview of Filestack’s ability to manipulate documents and audio files: We built a fanfiction website to showcase documents and a soundstack-like app to show the powerful audio transcoding function of Filestack’s API.  Nonetheless, I often highlight Filestack’s value when it comes to uploading and manipulating pictures, so it’s about time we work with … Read More

Build Your Own Soundcloud App to Share Audio Files

Samuele ZazaTutorials, Working with Filestack1 Comment

There is no doubt Filestack is very popular when it comes to working with pictures, as there are loads of possibilities for customizing images. However, the API extends far beyond this: There are no constraints on the files one can upload, and the Filestack team kindly provides other functionalities: Video and Audio conversions for example. In this tutorial we are going to … Read More

Building an ASCII Posters Store With Snipcart & Filestack

Bethany StachenfeldTutorials, Working with Filestack2 Comments

Editor’s note: This is a guest post by Charles Ouellet, the Co-Founder & Lead Engineer of SnipCart. Here he demonstrates how to easily create an online ASCII poster store using Filestack and Snipcart. When we launched Snipcart, our shopping cart platform, we decided to build something we, as developers, would love to use. Something that would make our jobs easier, and more fun. … Read More

Image Transformations: One Image, Infinite Possibilities

FilestackWorking with Filestack0 Comments

We tend to use the line “one image, infinite possibilities” when talking about Filestack’s image transformations. Our on-the-fly transformation of delivered images allows customers to serve a single image in an almost infinite number of variations without ever changing the original file. To show how easy it is to use our powerful image transformations in your app, I took one picture and served it 20 different ways. I’ll let you … Read More

The Right Widget For The Right Workflow

FilestackWorking with Filestack0 Comments

Filestack’s mission is to provide a powerful, easy to use, end-to-end file management solution for application developers. There’s little doubt that our platform makes it exceptionally easy to upload, store, transform and deliver your application’s images and other files. But to provide true ‘end to end’ simplicity means we also have to make it exceptionally easy to implement. In this blog … Read More

Insights and Automation: Using webhooks to run your business

FilestackWorking with Filestack0 Comments

The grail for SaaS or other Internet companies is architecting a completely automated business that can practically run itself. To achieve this level of business autonomy you need a system that is as durable as it is scalable and provides accurate, real-time reporting to ensure everything is running smoothly. For many businesses, especially apps that deal with user-generated content or … Read More

Building a simple Instagram clone – An introduction to Image Transformations

FilestackTutorials, Working with Filestack0 Comments

When I talk to the customers that are relying heavily on Filestack to build, manage and grow their apps (along with their business), the overwhelming use case is allowing Filestack to handle their image assets upon upload and delivery. This post shows how easy it is to manage your photos by showing you how to construct URLs that perform one … Read More

An Introduction to Filestack

FilestackThoughts and Knowledge, Working with Filestack2 Comments

Like most SaaS businesses, describing what we do can be a challenge. In the past we’ve used a number of terms to describe what Filestack is (and isn’t) with varying degrees success and completeness. One of the key reasons we felt compelled to transition the company from Filepicker to Filestack was to expand the focus from our picker (what most … Read More

Future Proofing UPLOADS with Filestack

FilestackWorking with Filepicker, Working with Filestack0 Comments

Uploading local files without Filestack is about to take three steps forward…and two steps backwards. In a continued effort to rid the Web of flash, Mozilla has been working with Microsoft on a proposal that would provide directory picking and directory drag-and-drop, which sounds like a good thing. However, due to the potential for performance problems when working with a … Read More

Upload files to your WordPress site from Dropbox, Google Drive, and all your cloud storage services

Mark BakkerWorking with Filestack0 Comments

Nowadays, many people keep their files in the cloud. Not only for accessibility, but also for safety. For example, I have a Nexus 5, and when I take a picture, it will upload it to my Google account the next time I’m connected to wifi. Once it’s uploaded, I have access to it anywhere. Now with Filestack’s Filepicker plugin for … Read More