Supported services
What's cool about Photopick?
Easy To Use
Just include our script on your website and launch Photopick with one simple script.
No limits
Since the uploads don't go through our servers, we don't need to limit your upload amount.*
Not expensive
We wanted to make Photopick affordable to anyone. And so we did.
Code samples
It really doesn't get easier than this! Just initialize Photopick.io on the client-side and write a bit of server-side code to receive and save the uploaded file. That's it!. You can embed Photopick.io directly into your website, into a modal or anything really.
Just because it's easy doesn't mean it's restricted. Your server can return anything (eg. the ID and URL of the saved photo) and the response is routed to the client via events. Just make your client react to those events however you want.
Initialize Photopick on client-side (Javascript)
<script type="text/javascript" src="//photopick.io/photopick.js?v=2.0">
<script>
var photopick = Photopick.init('#myContainerElement', {
apiKey: 'my-api-key',
uploadURL: 'my-backend-url',
fileFieldName: 'my-upload-field-name',
dropTarget: null,
csrfToken: 'my-csrf-token',
autostart: false,
preload: false,
language: 'en_US',
languageURL: 'my-localization-url',
stylesheet: 'my-stylesheet-url',
theme: 'readable',
onPhotoAdded: function(photo, photos) {
// Dispatched when user has added a photo to the upload queue
},
onPhotoRemoved: function(photo, photos) {
// Dispatched when user removes a photo from the upload queue
},
onPhotoPreloaded: function(photo) {
// Dispatched when a photo has been selected and it's contents has been read
},
onUploadStarting: function(photos) {
// Dispatched just before the upload queue is about to start
},
onBeforeUpload: function(photo) {
// Dispatched when a single photo is about to be uploaded
},
onUploadProgress: function(photo) {
// Dispatched multiple times as the upload progresses
},
onPhotoUploaded: function(photo, response) {
// Dispatched when a single photo has been uploaded
},
onUploadComplete: function(photos) {
// Dispatched when all selected photos have been uploaded
},
onResetAfterUploadComplete: function() {
// Dispatched when the user resets the view after the upload queue is complete
},
onError: function(error) {
// Dispatched if an error occurs at any point of the process
}
});
// When the window is resized (or if you display photopick in a modal or
// something like that) you must call the 'refresh'-method so that Photopick
// can reposition it's contents accordingly. If you experience non-functioning
// buttons, this should provide the ultimate fix for all your problems.
$(window).on('resize', function() {
photopick.refresh();
});
</script>
Handle upload on server-side
import express = require('express');
var router = express.Router();
router.options('/', function(req, res, next) {
if (req.headers['origin'].match('photopick\.io$')) {
res.setHeader('Access-Control-Allow-Origin', req.headers['origin']);
res.setHeader('Access-Control-Allow-Headers', req.headers['access-control-request-headers']);
}
res.end();
});
router.post('/', function(req, res, next) {
if (req.headers['origin'].match('photopick\.io$')) {
res.setHeader('Access-Control-Allow-Origin', req.headers['origin']);
}
res.end();
});
export = router;
import re, json, requests, cStringIO
from django.http.response import HttpResponse
def handle_upload(request):
if request.method == 'OPTIONS':
origin = request.META.get('HTTP_ORIGIN')
response = HttpResponse()
if origin and origin.endswith('photopick.io'):
response['Access-Control-Allow-Origin'] = origin
response['Access-Control-Allow-Headers'] = 'x-requested-with, content-type, accept, origin, authorization, x-csrftoken, user-agent, accept-encoding'
return response
elif request.method == 'POST':
data = json.loads(request.body)
photo_data = data.get('photo')
photo_origin = photo_data['source']
if photo_data['source'] == 'device':
uploaded_file = request.FILES['my-upload-field-name']
else:
photo_url = photo_data['originalURL']
photo_response = requests.get(photo_url, headers=headers)
photo_file_data = cStringIO.StringIO(photo_response.content)
uploaded_file = ContentFile(photo_file_data.getvalue(), photo_data['name'])
################################################################
# Do what you want with uploaded_file
################################################################
Engage your users. It's easy!
Enabling personal content creation has never been this easy!
With Photopick it's easier than ever to allow your users to use their photos from various sources on your website or online service.
When you include Photopick on your website you can make any online service instantly more engaging by allowing your users to customize their experience in the most personal way possible, through their own content which they already have readily available all across the internet.
Ready in 4 steps
Sign up
Click Sign Up and fill in your details. After that add your domain.
Make payment
We charge the monthly or annual fee through Stripe, so it's guaranteed to be safe and you can cancel at any time.
Add the scripts
Add the scripts to your website. The demo scripts are really all you need!
That's it
Sorry, there were actually just three steps. Your users can now use their photos on your website.
Pricing
- Unlimited uploads*
- Custom stylesheets
- Upload from local device
- Pick a file from any URL
- Get photos from online services
- Unlimited subdomains
- Oh, we almost forgot, your first month is free!
Want to test Photopick.io on your project?
Of course you want to! Photopick.io works without subscription in any domain that ends with .dev, .development, .local or localhost so you're free to test Photopick on your local development environment as much as you want. Just set the API key to 111-111-111. Contact our support staff via the tab at the bottom of the page if you need other development domain suffixes.
Fair Use Policy
Although we have no upload limits, a fair use policy applies though. If your service is the size of Google, Facebook or such and you process gazillions of uploads daily, please contact us first and we'll make a special deal for you.
Start using Photopick!
Select your preferred payment plan
(Your first month is free)
All payments are handled securely by Stripe.