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.

 

FacebookTwitterGoogle+Share

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

 

Posted by & filed under Testimonial.

WeMontage is the world’s only website that will let you take your pictures and images and turn them into a large collage printed on removable wallpaper.

They use a high-tack removable adhesive that will adhere and re-adhere to both textured and non-textured surfaces without damaging walls. It won’t tear or stick to itself during installation, and looks and feels like a cotton fabric. WeMontage is very affordable and customers can make them in any large format size—the smallest is 3 feet by 2 feet.

Wedding B&W Living room

WeMontage has quickly become a media darling and is being featured all over the place, including DIY Network, Huffington Post, USA Today, and two appearances on the TODAY Show, just to name a few media hits. They have some other great PR coming down the pike in 2015, so the year promises to be fantastic for this startup.

WeMontage Needed Stability When It Came To Getting Images From Internet Applications

To order, customers simply upload images and create a custom collage. Uploading images from anywhere on the Internet is central to WeMontage working properly. Starting out, they used a jQuery solution that they wrote themselves to get images. They quickly figured out that it was inconsistent and unstable.

“Once I discovered Filepicker, we were like, Wow, let’s not try to reinvent the wheel. This is what these guys do. They’re great at it. It works with all these other applications that our customers are using. Let’s just pay the fee, use this and be done with it. It’s just so simple. It’s seemless,” explains James Oliver Jr, Founder and CEO of WeMontage.com.

Filepicker: The Only File Upload Solution For WeMontage

The idea for WeMontage goes back to an HGTV show in 2011. After that, James Oliver Jr. got the support of the gener8tor accelerator program in Wisconsin in 2013. That’s when he started using Filepicker and really moving WeMontage forward.

“The feedback is always great from our users about how easy WeMontage is to use with Filepicker, which we love,” says James Oliver Jr.

WeMontage currently works best on a computer, so one of their priorities is ensuring that it’s responsive across all mobile platforms. Half their traffic comes from mobile, especially after big PR hits. Filepicker will integrate perfectly into their plans for a responsive site by allowing users to access images from mobile.

Filepicker Impacts WeMontage’s Bottom Line

For the WeMontage team, the best possible thing is that they don’t have to interact with Filepicker support.

JamesOliverJr

 

“Filepicker is an important part of WeMontage. It just works and we don’t have to think about it,”adds James Oliver Jr.
“We get feedback from our users that our site is easy to use—easier to use than Shutterfly. A big reason that it’s so easy to use is because of Filepicker. I’m always amazed by that, because I know how bad it used to be.”

What’s more, Filepicker helps WeMontage convert a lot of users to paid customers, which at the end of the day is the whole point, explains James Oliver Jr.:

“Filepicker really affects our bottom line, because we’re not focusing on the development of uploading files, we’re just focusing on the montage part. Filepicker is an absolutely huge part of our success. It just works. We don’t have to think about it. Just keep it working, man, it’s awesome.”

OpenTok

Posted by & filed under Product Updates.

Here at Filepicker, we like to focus on what we do best, and find other providers to help us with areas that aren’t our #1 priority.

This philosophy is core to Filepicker, as we want to power uploads. If you have an app that needs file uploads, we want to be there for you – and we want to be the best at it. That gives you more time to focus on what you do best!

We use libraries from the community such as Square open source in our Android Library, Transifex for our language translations and tokbox to help with our video recording uploads from the browser.

Recently, tokbox announced that they would be discontinuing support for their 1.0 platform, which we were still using. In December we quietly upgraded our systems, without downtime, to support OpenTok 2.0. When you go record a video or photo with the Filepicker dialog, whether on your mobile device or laptop, OpenTok is behind that!

What is tokbox / OpenTok?

OpenTok is a platform developed to add video, audio and more to the web and mobile apps in a very simple fashion, to most platforms and devices. OpenTok is powered by WebRTC, an open source project backed by W3C and many large and small companies alike. Its mission is to power Real Time Communications (RTC) in the browser, without having to download plugins.

wordpress-robot

Posted by & filed under Working with Filepicker.

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 the Filepicker plugin for WordPress, I can easily browse through all my pictures in Google Drive, and choose the ones I want to insert into my next post – without having to download them to my computer first.

This now applies to all 25+ of our sources, so if you’re editing a WordPress post while you’re on the go, you can upload a file from wherever your files are, on any device.

Here’s how you can get started with the Filepicker plugin for WordPress:

  1. Go download the plugin, or search for “Filepicker” when you click “Add New” under the plugins section of your WordPress backend.
  2. Once installed, you’ll need an API key from us to authorize all the connections. Head over to Filepicker.io and signup for any plan.
  3. When you’re dropped into the developer portal, go through the three steps to get an API key.
  4. Copy and Paste your freshly minted key into the first text field
  5. Fill out the rest of the settings as appropriate.
Filepicker WordPress Plugin Settings page

Now let’s get started

When you’re all set with the settings, you’re ready to give the plugin it’s first run! Click Media on the left, and “Add New” just like you would for any other file upload.

You’ll notice the new Filepicker.io uploader button. With this magic button, you can upload your files from 25+ cloud stores to your wordpress site.

Image 2015-01-08 at 9.29.00 AM

Upload to WordPress from 25+ cloud storage services

This is the juicy part. Uploading files via Filepicker is as easy as using the regular drop down box, but so much more powerful.

When you hit that Filepicker.io uploader button, it will open a modal (or a window, whichever you chose in the settings page) and will show you the list of sources on the left. Click one, and follow the process to select your file.

You’ll see the progress of your file being uploaded, and once it’s complete it will appear in your library.

sources

Boom

If you have any questions about our plugin, or have suggestions to improve, please send us a note to support@filepicker.io

Posted by & filed under Product Updates.

We’ve recently made some more updates to our Filepicker app for OSX, and the biggest being integrating the iOS library with the OSX library.

Because a lot of OSX apps have iOS apps as well, we wanted to make it as easy as possible to integrate Filepicker into both.

With our new library, there’s no need to familiarize yourself with two different code bases. We have the library fully documented on GitHub, but if you have any questions, please send us a note to support@filepicker.io

Watch a video of uploading a file from your cloud storage services in Mac OS X:

 

pdf-png

Posted by & filed under Product Updates.

Last week we released a new type of conversion. You can now convert PDF’s that your users upload to PNG’s. It works just like any other image conversion.

When you run the function, it will convert the first page of the PDF to a PNG. Example:

https://www.filepicker.io/api/file/3S6sYpypQ76We2aue67x/convert

You can also specify which page of the PDF to convert by using the page attribute. Example:

https://www.filepicker.io/api/file/3S6sYpypQ76We2aue67x/convert?page=10

Any questions or requests for new features? Hit us up at support@filepicker.io

robot-boxes

Posted by & filed under News.

As we approach the end of the year, it’s important to look back and review everything you’ve done. When we look back and see all the improvements made to Filepicker it’s quite a long list!

We made lots of customer and user facing improvements, but we have also made significant infrastructure improvements to keep up with the growth of the product, and the demand of our users.

It’s not an exhaustive list, but here are our top 10 updates for 2014:

  1. Amazon Cloud Drive integration.
  2. Custom Source – allow your users to browse through your S3 bucket of choice.
  3. Conversions – PDF to PNG conversions, image compression and filters (sharpen, blur).
  4. Translations – introduced 11 languages for our dialog: Dutch, French, German, Italian, Norwegian, Polish, Portuguese, Russian, Spanish, Turkish, Chinese (Taiwan)
  5. Complete overhaul to our iOS library – Demo application in AppStore (by the end of the year)
  6. Major updates to our Android library – Demo application now in Google PlayStore
  7. Created Mac OS library.
  8. Infrastructure – Migrated from Chef/Fabric to Ansible for DevOps and Deployments.
  9. Infrastructure – Migrated from Icinga/Nagios to Zabbix for monitoring and alerting.
  10. Infrastructure – Migrated from MongoDB to PostgreSQL with no downtime.

We wanted to thank every Filepicker customer for your tremendous support and feedback.

From the Filepicker family to yours, Happy Holidays!

codementor

Posted by & filed under Testimonial.

Founded only a year ago by Weiting Liu, Codementor now has a team of half a dozen people. Codementor is a live 1-to-1 help marketplace that makes it easy for developers across all levels of expertise to connect with experts via screen-sharing, videos and chat.

Industry
Software Development, Expert Mentoring

Location
Mountain View, California

Filepicker Use Case
1 hour integration time, super high ROI

Why Filepicker
Allows for uploads complex all file types

Highlights

  • Customers requested an upload solution: are impressed and happy with Filepicker
  • 1 hour back-end, 2 hours front-end development time
  • Solves all Codementor’s needs for file uploads

The online, remote pair-programming service isn’t just for people learning how to code, it’s also for freelancers, startups, and experts, because not everything is Google-able. An analogy for Codementor is CTO-on-Demand. Often, developers aren’t facing a problem—they just need a second opinion. They might have an architectural problem, want to do peer programming, or need a code review with another developer.

Codementor Needed More Power For Its Upload Solution

The need for implementing an upload tool like Filepicker happened organically. When a user had an issue about an app, and wanted someone to review their database structure, they would post this request. Codementor would broadcast the request to its experts in this category. The user then got a message featuring mentors who expressed interest in helping them, and could start a live session with an expert developer right away.

Codementor found that it helped if users got information to experts prior to the session, so they’d have a lot more context. Initially, Codementor just had a text area where users could type information, but they received an overwhelming number of requests from users asking for more upload features. Since they were still an early-stage startup and had tons of work on their plates, they started thinking about the quickest way to do that.

Codementor Profile

Codementor Configures The Filepicker UI For Its Brand

Filepicker came to mind, because the Codementor team was already familiar with it. They spent a total of 1 hour of engineering time, and implemented Filepicker just like that.

“Our users are impressed and very happy that we implemented Filepicker. Our mentors are happy. We’re happy, because Filepicker gives us super high ROI,” says Weiting. “As a matter of fact, Filepicker was implemented by one of our interns.”

Codementor’s front-end developer took 2 hours to ensure that the Filepicker UI worked perfectly. Their front-end code is starting to get complex with AJAX and AngularJS. Their front-end developer customized it to work with the messaging system that Codementor uses on their platform that was built internally.

“Our front-end developer integrated Filepicker, so users can attach files when sending out a message via our online comment platform,” explains Weiting. “Our dev team thought everything was a breeze, and we’re super impressed.”

Things With Codementor And Filepicker Are Great

“So far, so good!” Weiting says about feedback on Filepicker from Codementor’s customers. “Users have been uploading images, charts, text, XML files and more.”

weiting01

Another reason Codementor decided to use Filepicker was that they had some assumptions about what kind of file formats users might want to upload. One of their earlier thoughts was that they’d implement something to upload images and only images, but then found that idea extremely limiting. Another idea they had was to integrate GitHub, so users could link to a Github repository through the system, but they realized that was another huge assumption their users needs.

“In order for us to do that, it would have taken much longer than 1 hour,” Weiting Liu adds. “Using Filepicker takes a shorter amount of time than normal for an MVP feature. It’s a complete feature set. We’re great fans of Filepicker.”

Are you interested in becoming a Filepicker approved Codementor? Get in touch!

AndroidApp

Posted by & filed under News.

splashWe are very excited to announce our first android app!

Last week we announced a big update to our Android library which we had been working on for quite some time.

We boasted that it is really easy to implement in your own Android App, and to prove it, we did just that.

You can now go download Filepicker for your Android device, on the Google Play store.

The app is very simple, giving an example of the user experience for your app. You can upload a new file, either from your device, or any of our integration partners. Read more »