Posted by & filed under Testimonial.

whishbone-logo

Company

Wishbone, A Client of Disrupto

Industry

Crowdsourcing, Education, Non-Profit

Use Case

Thousands of image uploads

Why Filepicker

Saves on hiring a developer, low monthly plans

Highlights

  • Facial recognition API for centering and cropping images of faces
  • Significantly reduced development time
  • Delivers on Wishbone’s requirements for file uploads

 

About Wishbone

Wishbone is a non-profit fundraising platform that gives high school students the chance to pursue their passions by matching them with different scholarship opportunities. The crowd-sourcing tool sends low-income high school students from New York City, the Bay Area, and Los Angeles to summer programs. Students apply for one of the 550 high quality, accredited summer programs featured on Wishbone.org based on their interests and location. Wishbone is supported by foundations, corporations, program providers, and individual donors through their website.

wishbone

Wishbone Needed Thousands of Images For User Avatars

Mike Potter of Disrupto is the lead developer for their client, Wishbone.org. He’s been working on Wishbone’s crowdsourcing website for the past 2 years. The site required thousands of images, which could mean spending large amounts of time going through those images and aligning and resizing them properly.

The majority of images that Wishbone needed were avatars of users: students and teachers needed to upload their photos onto the platform. The teachers needed to be on Wishbone acting as advocates for the kids by helping them raise money, sharing links to the campaigns through their network, and trying to recruit donors.

“It’s a classic problem. Every project needs images—or, just about every project,” explains Mike Potter. “If you’re dealing with images, you don’t want to have to build your own backend. No one wants to build their own boilerplate code for images that every site has to have. I wanted to focus on what Wishbone needed to do, and outsource the stuff that’s boilerplate and common. That’s always a win.”

Filepicker’s Facial Recognition Feature

Mike Potter heard of Filepicker by word-of-mouth through one of his developer friends. He used Filepicker on other projects, so now it became his go-to utility for uploading, formatting, resizing and cropping images. Since Filepicker already built a back-end for image uploads, it was the obvious choice to use in different areas of the Wishbone site that required different sized avatars.

“When users upload photos, we have a custom uploader and we use the Filepicker API to manage that upload,” says Mike. “All the UI stuff is done through a custom control. Filepicker is nice, because I really don’t have to maintain my own infrastructure for resizing images. We do dynamic resizing through URL parameters. There’s a facial recognition feature in Filepicker where you can indicate what strategy you want to use to resize an image, and it will identify where the faces are and the image will try to center around that.”

Filepicker Saves Time And Resources So Wishbone’s Development Team Can Focus On Its Mandate: Crowdsourcing

mike-potter“There’s nothing Filepicker does that I couldn’t do myself, but the thing is, I don’t want to—I’d rather focus on other projects,” explains Mike. “The core value of Filepicker is that we don’t have to build our own image resizing architecture. That’s attractive no matter what the space is.”

In addition, when the Wishbone platform’s designer comes up with a new layout for a page, Jonathan doesn’t have to do any work in the Filepicker backend to accommodate it. He just puts in different numbers when he fetches the image.

“Wishbone is a non-profit, so any sort of help we can get is always a win for us,” Mike Potter adds. “It’s better to just pay Filepicker a little bit of money than to hire a developer to build our own image-hosting architecture. We’re facilitating scholarships for students, and using crowdsourcing to do that, so we’re busy developing that platform. Filepicker just works. It’s pretty handy.”

 

FacebookTwitterGoogle+Share

mchacks

Posted by & filed under Events.

McHacks is a hackathon in Montreal, QC, Canada at the William-Shatner building at McGill University’s downtown campus.

Everyone at the hackathon gets one month free of Filepicker! You should receive the promo code in your introductory package.

The team that has the best implementation of Filepicker will win one year free of the Grow plan, a $1,000+ value! Follow all the excitement at Challenge Post!

If you want Filepicker to sponsor your Hackathon, let us know – support@filepicker.io

CloudAppIntegration

Posted by & filed under News.

Filepicker is proud to announce a new partner integration – CloudApp!

Filepicker’s killer feature is enabling developers to allow file uploads from wherever users store their data. CloudApp is the definitive app for quickly and easily sharing files and screenshots. This makes the integration such a powerful one.

Now that CloudApp is a source, any user of CloudApp can easily connect their files from any site of app that integrates Filepicker.

If you have any suggestions for our next integration, please send them to support@filepicker.io

Also, be sure to go download the easiest way to share faster: CloudApp.

planUpdate

Posted by & filed under News.

We’ve been on the phone and email over the past few months talking to customers to find what plan structure makes the most sense. We’ve also done data analysis to see what fits best with most of our customers.

With all the feedback we are introducing new plans with higher limits on files and conversions. We’ve also added more clarity around our overages and bandwidth, and outlined them on our pricing page. If you have any questions, please don’t hesitate to contact us! support@filepicker.io

Posted by & filed under Thoughts and Knowledge.

No, I did not just say that. I did, however, hear it offhand somewhere and it stirred something in me. Or more so my thoughts on the ‘next big’ media transition that we find ourselves in the midst of.

Don’t roll your eyes, just yet. Just think back to 2006. Crazy. Short-sighted. Stupid money. Everyone had an opinion when Google forked out $1.65 billion for YouTube. It was the kind of stuff you only see in movies – small start-up gets golden ticket from Google.

Did Google’s Eric Schmidt look as serious as Daniel Craig in Casino Royale when considering the YouTube gamble?

It was hard then to see the end game-plan when the cash and perceived ridiculousness of the deal dominated the headlines. Worst acquisition ever, they said. “They” being almost everyone that was not Google or YouTube.

Fast forward nine years. Now, it’s the best deal ever. And all for the sweet price of $1.65 billion. So, was it the best acquisition ever? Yes, I believe so and here are some of the statistical reasons why;

 

2006 2014
Reported Revenues $15 million $1 billion
Unique visitors per month 20 million 1 billion
Videos uploaded daily 65,000 per day 300 hours of video uploaded every minute

 

This snapshot says it all. I could go on, but it’s all millions and billions so you get the message. Everyone knew YouTube was gaining momentum back in 2006. But did anyone really anticipate the kind of return and growth Google would eventually enjoy?

Few did. Except Google, of course. We were in the middle of a big media transition then, but no one really noticed.

We are, it appears, in the middle of another big media transition. And once again, nothing really is being said about it. So how do I know it is? Well, here is one insight I have.

At Filepicker, I have the privilege of seeing how assets are being created, consumed, stored and moved around the internet.

It has been a lot of change but nothing compared to the biggest move yet – the transition to NoLoSto. That’s right. No Local Storage.

See, years ago, we had these disks that would go into drives. We’d take these awkward sized disks and put them in our knapsacks. Inevitably, they were either lost or damaged.

Bad experiences with lost data meant only one solution. We (okay, just me) had to put them in hermetically sealed storage vessels and store them in fireproof safes until we wanted the data again. Say, when someone died or we needed to see that thesis again.

Naturally, something had to give. Or more so, something had to be created to solve this problem. Too many tears and tantrums can do that to innovators.

The better solution, it turned out, was to leave your vitally important documents and precious photos on random computers owned by suspicious looking cyber cafes or disgruntled ex-employers. And that’s where I get to see things a bit clearer at Filepicker.

Image 2015-02-10 at 10.04.00 PM

Jack Nicholson gets it. However, we won’t use a gun to convince you of the media transition.

 

At the beginning of 2013, we saw lots of ingestion activities that started from a local file – something stored directly on your computer or your iPad.

2014 was even better. We enjoyed an aggregate 300% increase in cloud drive storage. Indeed, on several of our cloud drives, such as Google Drive, we had more than a 1000% increase in usage. Can you now see where I am going with this argument for media transition?

This isn’t just because we’ve added tons of super, cool users (on an interesting side note, our last count shows we have users across 122 countries). We see this same correlation on long existing accounts.

So, what’s next for Filepicker as we move with this big media transition?

A lot, in one word. New drives will continuously be added to our service, such as Amazon Cloud and CloudApp. And thanks to growing international demand, we are making Filepicker available in over 12 languages. And that is just the stuff I am allowed to disclose…there is plenty more.

So, now do you believe me that we are in the middle of a media transition?

Image 2015-02-10 at 10.12.55 PM

“If you ain’t first, you’re last.” A true motivation quote that keeps us going at Filepicker. Thanks Will Ferrell.

 

shapeandsort

Posted by & filed under Thoughts and Knowledge.

When does one decide to become a programmer? Some people may do it on the side just for fun, some people may decide to go to school for it, some people just use it as a solution to a certain problem.

But for all programmers we find techniques and chunks of code that we find work well – that we become used to – and implement them. Sometimes like a child with a Shape and Sort it out toy.

The following list comes from a few of our devs at Filepicker. There is a different approach to this list: some of these are a bit off the beaten path, whereas others are tried and true methods and practices that we find effective and continue to use.

Interesting fact: the Ada programming language, which might sound a little obscure, is still used today in projects that need to be quite secure. Some examples include: software for the Boeing 777, Air traffic control systems, rail and metro systems in Paris, London, Hong Kong, and New York City. Recently it was used to help with the Rosetta/Philae probe that landed on a comet. See a full list.  Hat tip to Slawomir for the Ada suggestions!

If you have any suggestions for us, please leave it in the comments!

Craftsmanship, Programming Practices

Code Craft: The Practice of Writing Excellent Code by Pete Goodliffe
Code Reading: The Open Source Perspective by Diodimis Spinellis
Code Quality: The Open Source Perspective by Diodimis Spinellis
Practices of an Agile Developer by Venkat Subramaniam, Andy Hunt
The Pragmatic Programmer: From Journeyman to Master by Andrew Hunt, David Thomas

Project Management

Agile Software Development by Alistair Cockburn
Behind Closed Doors: Secrets of Great Management by Johanna Rothman, Esther Derby
Manage It! Your Guide To Modern, Pragmatic Project Management by Johanna Rothman
Ship it! A Practical Guide to Successful Software Projects by Jared Richardson, William A Gwaltney

Programming Language Guides

The C++ Programming Language, 3rd ed. by Bjarne Stroustrup
Programming in Ada 2005 by John Barnes

Software Design

Design Patterns: Elements of Reusable Object-Oriented Software by Erich Gamma, Richard Helm
HOOD: an Industrial Approach for Software Design by J-P. Rosen

Distributed Systems:

Concurrency in Ada, 2nd ed. by Alan Burns, et al.

 

photoshop7

Posted by & filed under Working with Filepicker.

I remember the first time I opened the new Photoshop 7.0 in the computer lab in high school. This is back when there was only one room in the school that had computers, and there was only one computer that had a Photoshop licence.

I booked time on the machine, and cracked open some photos that I took, and wanted to upload them to the school website. I was in yearbook class, and that’s what we were tasked to do. Yes, I was in yearbook class, and yes, I’m a nerd.

Those pictures were way too big from the schools D100, being a whopping 6 megapixels. New in Photoshop 7 was the ability to create a web gallery that would automatically create thumbnails and “web ready” “large” images.

Nowadays, image compression is much more advanced, and thankfully, much easier as well. With Filepicker there are over 18 options to modify images once they have been uploaded – and all these conversion methods are done in the cloud, quickly, and programmatically.

Filepicker uses two key open source libraries to optimize your images: JPEGtran and OptiPNG.

JPEGtran

JPEGtran does lossless compression for JPEGs by optimizing the Huffman tables to increase compression without degrading the quality of the image. It also removes any application specific data that is sometimes unnecessarily inserted by image programs.

OptiPNG

Based on pngcrush, OptiPNG is lossless compression utility which means it’s goal is to have an identical quality image with less file size.

It uses multiple different algorithms with five different filters to reduce the size of the image. Since it has many different configurations, OptiPNG runs various different compression options in memory for speed, and outputs the smallest iteration.

Examples

Below are photos from Startup Stock Photos. We downloaded all the pictures and they came in at 285MB and after using our conversion tools, it’s down to 70MB. Here’s a few examples below:

 


Original: 5.7Mb Compressed: 578KB 10x Smaller


Original: 6MB Compressed: 718KB 8.5x Smaller


Original: 7.4MB Compressed: 833KB 9x Smaller

How to:

Using Filepicker’s Image Compression is actually very simple. You can add /convert?compress=true to any image URL, or use our convert method in the javascript API: {compress: true}

https://www.filepicker.io/api/file/zQ97puMYSrqtEgRkRP9k/convert?compress=true

Posted by & filed under Working with Filepicker.

The following is a walkthrough on installing Filepicker for the first time.

Alright, so it’s been 8 months since I’ve been working for Filepicker as the marketing guy, and I haven’t installed Filepicker yet.

I got an email from my boss looking for a demo of the product – as in how a developer would install and use it.

Since my background is all web development, I felt more than capable of giving it a shot, but there was now an extra challenge I thought of: how quickly could I do it? Being a few years out of regularly coding each day, I was stoked to jump into this challenge, and do a bit of coding!

Installing Filepicker is pretty easy on any existing app or website, but I wanted to build a clean demo so I could show off to you guys, so here’s the steps that I took:

  1. Login to my own webserver and add a subdomain (filepicker-test.markbakker.ca) with cpanel.Screen Shot 2015-01-29 at 12.00.02 PM
  2. Get a Filepicker account
  3. Visit the documentation to get a snippet for a simple upload button.
    https://www.filepicker.io/products/widgets/quickstart/
<script src="//api.filepicker.io/v1/filepicker.js" type="text/javascript"></script>
<input type="filepicker" data-fp-apikey="A0B2jitDR7mC6QasdYPqgz" data-fp-mimetypes="*/*" data-fp-container="modal" />

Once I had this snippet, I could load Filepicker on my test subdomain. To get to this point was astonishingly quick, just under 15 minutes.

Screen Shot 2015-01-29 at 12.23.13 PM

But, that’s not totally usable. Now I wanted to create an example of the app actually in use, connect to a cloud service, upload a file, and see the correct link to it.

Over to the documentation for a more advanced version of the code, and some more options to troubleshoot.

Hot Tip:

By the way, did you notice, that when you’re logged in, and viewing the developer portal, we grab your API key and put it in the examples on the right! That way, when you RUN the code, or copy and paste, it replicates your account settings.

First up was a basic pick().

filepicker.pick(
{
mimetypes: ['image/*', 'text/plain'],
container: 'window',
services:['COMPUTER', 'FACEBOOK', 'GMAIL'],
},
function(Blob){
console.log(JSON.stringify(Blob));
},
function(FPError){
console.log(FPError.toString());
}
);

This caused a bit of a problem, because as soon as the page loaded, it opened the Filepicker dialog. So, to make it more user friendly, I wrapped it with a function and added a button:

function pickMe(){
filepicker.pick({ });
}

<button onClick="pickMe()">Load an image</button>

Now the Filepicker dialog opened on the click of the button. I could pick a file, and sure enough, the console had the JSON blob info. Now, to add some user feedback that makes the demo more fun to watch.

I added an <img> and added a piece of javascript to update the src with the blob url.

document.getElementById(“instagram”).src = Blob.url

Screen Shot 2015-01-29 at 12.38.31 PM

You can see, that once I clicked upload the image was pulled from my facebook account, and it was updated in the image tag on the page. Success!

At this point, it took me about 35 minutes – not bad since I wrote the html and javascript from scratch too!

Next up, connecting S3

Once the image was being loaded from the Filepicker servers, now I wanted to store that file in my own storage. I went to Amazon Web Services, and created a new S3 account.

I ran into a few problems setting up Amazon S3, but I had never done that before. So with just the help of our documentation, I got a new bucket created with permissions, and put the App Key and App Secret into the Filepicker developer portal.

I made one mistake that I needed some help with support though. I selected Oregon as the location for my bucket, but our servers are actually in Virgina, so no need to select a region – US Standard is the best option.

There were three key items I needed to change to have the uploaded images stored in S3. The function, the location, and accessing the blob.

  1. The function needed is no longer a pick() but a pickAndStore(). Read more about the options of that in our documentation.
  2. You need to add where you’d like to store the file with pickAndStore(). That’s quite simple, just add: location:”S3″ to the function. Full example below.
  3. The functions return slightly different outputs. In pick() an object is returned. In pickAndStore() an array of objects is returned. (Yes I was confused a bit by this one too.) I had to change the way I was traversing the output to find the url of the uploaded image.

Here’s the JSON blob that Filepicker returns:

[{"url":"https://www.filepicker.io/api/file/clrkrkVS1OgjLz1aYSCq",
"filename":"Katos_got_a_big_nose.jpg",
"mimetype":"image/jpeg",
"size":117485,
"key":"uSIhXVSpTqf6AAWJrxFU_10154955744160512.jpg",
"container":"markbakker-filepicker",
"isWriteable":true}]

Traversing the Blob

As I mentioned in bullet 3 above, the output format changed between the two functions. Ultimately what I was looking for was the FileLink url. This would give me a Filepicker link to the image.

Don’t be confused with not getting an S3 link though, that’s not what we’re looking for. Getting a Filepicker link will keep it secure, and if there were any conversions done to it during the upload process, it will load the correct version. Also, once you have the Filepicker link you can do more conversions on it, simply by appending any of our REST API commands to the url. You might want to to that in javascript on the fly.

The completed code

Without further ado, here’s my final code:

<html>
<head>
<title> Filepicker Installation Test</title>

</head>

<body>
	<h3>Hello World</h3>
	<h4>Try out Filepicker below:</h3>

<script type="text/javascript" src="//api.filepicker.io/v1/filepicker.js"></script>

<script>
filepicker.setKey("A0B2jitDR7mC6QasdYPqgz");

function pickMe(){
	filepicker.pickAndStore(
	  {
		mimetypes: ['image/*', 'text/plain'],
		container: 'modal',
		services:['COMPUTER', 'FACEBOOK', 'GMAIL'],
	  },
	  {
		location:"S3"
	  },
	  function(Blob){
		document.getElementById("instagram").src = Blob[0].url
	  },
	  function(FPError){
		console.log(FPError.toString());
	  }
	);

}
</script>

<button onClick="pickMe()">Load an image</button> 

<div id="box">
	<img id="instagram" src="" width="612" height="612" />
</div>

</body>
</html>

So, to show that it worked, here’s the file loaded in the <img> tag, and the S3 bucket!

 

Screen Shot 2015-01-30 at 9.19.19 AM Screen Shot 2015-01-30 at 9.23.18 AM Screen Shot 2015-01-30 at 11.51.51 AM

If you want to see more dog pictures, instagram me.

 

cityloque-laptop

Posted by & filed under Testimonial.

Newly launched London-based Cityloque.com is looking sharp. Co-founded by CEO Anna Halsall, and CTO Ivan Brewis, they feel that the city blogging space isn’t well served—and that’s the space they’re going for.

The duo designed a fantastic looking platform, for bloggers to share their city posts and the world to easily find them – all in one place. Cityloque’s founders believe that they do city blogging better… with the help of Filepicker.

A Need To Build The Best-In-Class City Blogging Platform

The brainchild of CEO Anna Halsall, her vision was for Cityloque to be an interactive city blogging platform, where people around the world could read and share the things they love about their cities. From food reviews and art openings to independent boutiques and bookshops to cultural institutions and everything in between, Cityloque was conceived as a social venture aiming to support local businesses, preserve cities’ identity and share insiders’ knowledge.

Completely different from other city blogging platforms, Cityloque allows users to follow specific cities, interests and writers, so readers see posts most relevant to them automatically. The platform is closely integrated with Twitter, allowing authors to tag Twitter users and use hashtags in their articles.

Cityloques’ blogging platform needed to showcase visual content first, says CTO Ivan Brewis. All posts are displayed in one continuous scrolling page, saving time and allowing readers to quickly find what they are most interested in. The idea with this format is that there’s no need to search for blogs or tips online. All you have to do is visit Cityloque and see what people are blogging about.

image02

The Search For The Best Image Uploader

Ivan and Anna, while working on the technical design, knew that they they couldn’t target just one platform, that they had to get images from many different sources.

Building their development team happened serendipitously when Ivan was on Twitter and saw that a developer he had previously worked with and respected was leaving his permanent job. The developer was interested in Cityloque, and became part of the team, bringing another developer along with him.

“Our business needed to get files from many different sources,” explains Ivan. “Most of my prior development experience was Windows-based, I didn’t have extensive web development experience at the time. I took a lot of guidance from the developer, who keeps up-to-date on web technologies and trends and posts frequently about new tech solutions. He recommended Filepicker as a solution for uploading images to Cityloque, because it’s so easy to integrate and very flexible.”

 

Without Filepicker, Cityloque Wouldn’t Exist

It turns out that Filepicker integrated into Cityloque was quick to deploy and manipulate. Bloggers have found it easy to use, they can get images from practically any source including other social media and importantly the various mobile platforms.

“If we didn’t have a tool like Filepicker, it would have prevented a business such as ours from existing,” says Ivan Brewis. “Without Filepicker, it would have been very hard for us to have started Cityloque at all. It just works, which is really fantastic. It means that we don’t need to reinvent anything. Filepicker is a very important facilitator of our platform.”

Cityloque Filepicker