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

Add Uploading Functionality To Your WordPress Site with the Filestack WordPress Upload Plugin

HueyProduct Updates, Tutorials4 Comments

Do you need to add file upload functionality to your WordPress site but none of the available plugins are streamlined enough or powerful enough to your liking? The Filestack WordPress Upload plugin can help! The Filestack WordPress Upload plugin allows you or your users to upload images, documents, and videos directly from Facebook, Instagram, Google Drive, local drives and more … 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

Ansible: Accelerated

Pawel PiwoszAPI, Tutorials0 Comments

Ansible Logo

So, you’ve been using Ansible, and have realized it can be really slow. You ask, why is Ansible slow? The answer is simple. Ansible uses ssh as a ‘transport layer’, which starts a new connection for every task in a playbook. This is not ideal, but luckily, we can change this behavior with a few simple steps. How to Speed Up Ansible To … Read More

Uploading Webcam Images with Filestack

Mariah TreeAPI, Product Updates, Thoughts and Knowledge, Tutorials0 Comments

I was recently looking into commonly asked questions about content uploading and found that there are presently 370 active questions on Stackoverflow about how to upload an image taken via webcam. This isn’t a surprising number when all of the aspects involved are considered. I understand these issues first hand because I personally spent weeks researching and re-building the webcam … 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

Create an Awesome Photo Collage with React and Filestack

Samuele ZazaAPI, Tutorials1 Comment

Image collage

A photo collage is a popular way of sharing amazing moments in our lives. From exotic vacations, to crazy parties, to romantic seaside weddings and more, collages capture many moments to create one multifaceted composite. As a printing application, the ability to upload pictures and create photo collages for your customers is an absolute must-have. The are a few open source libraries and repos available … Read More

Comparing Node & JQuery File Upload vs Filestack

Samuele ZazaThoughts and Knowledge, Tutorials0 Comments

We often recommend using Filestack to upload files. But why is Filestack really better than building your own file uploader from scratch? Does Filestack actually save you time and provide more capabilities? First things first… What is Filestack? If you’re not familiar with Filestack, it is an end-to-end file upload and management solution. Through our JavaScript library or RESTful API, you can … Read More

Building Prisma-like Filters with Pytorch and Filestack

Richard HerbertAPI, Thoughts and Knowledge, Tutorials0 Comments

One of the coolest papers to come out of the deep learning renaissance has been A Neural Algorithm of Artistic Style. Presumably, it’s what drives Prisma, and it’s completely open to the world. Anyone can build their own neural filters if they have the time and inclination — which is exactly what we are going to do. Using a combination of Filestack and … 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

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

A how and why primer on video transcoding: Webm to H.264 and more

Bethany StachenfeldAPI, Tutorials0 Comments

Rendering videos seamlessly across browser types is often an arduous process for developers. It is important to consider the format and codec of a video file. Different browser types support different video codecs, which means that you need to provide multiple formats to ensure that your video renders on all browsers.   Browser Video Codec Audio Codec Chrome H.264, VP8, VP9 … 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

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