Sending Images In

Learning the import business

Picnik can receive images from your website in several ways:

1. a URL to an image can be passed as a query parameter (HTTP GET) and Picnik will retrieve it.
2. a URL to an image can be posted to Picnik (HTTP POST) and Picnik will retrieve it.
3. Image data can be posted directly to Picnik, embedded in a multi-part form.

Which of these you choose depends on your requirements and personal preference. For example, you can't use #1 or #2 if the image data isn't stored at a URL that Picnik can access. Similarly, you can't use #3 if you don't have access to the actual image data.

Case #1: Sending an URL with HTTP GET

To send image data to Picnik, use the _import parameter. If you're passing a URL to the image data, you can either put it directly in the _import parameter like this:

http://www.picnik.com/service/?_import=http%3A//example.com/image.jpg&_apikey="YourApiKey"

...or you can send it in a separate parameter like this:

http://www.picnik.com/service/?_import=img&img=http%3A//example.com/image.jpg&_apikey="YourApiKey"

You can see these samples in action on the _import page.

Case #2: Sending an URL with HTTP POST

Case #2 is similar to case #1, but instead of putting the parameters in the URL, we HTTP POST them. We're still using the _import parameter. Here's a form that does it:

<form action="http://www.picnik.com/service/" method="POST">
	<input type="hidden" name="_apikey" value="YourApiKey"/>
	<input type="hidden" name="_import" value="http://example.com/image.jpg"/>
	<input type="submit" value="Import!"/>
</form>

...and if you want to post the image URL in a different field, you can do that:

<form action="http://www.picnik.com/service/" method="POST">
	<input type="hidden" name="_apikey" value="YourApiKey"/>
	<input type="hidden" name="_import" value="img"/>
	<input type="hidden" name="img" value="http://example.com/image.jpg"/>
	<input type="submit" value="Import!"/>
</form>

Case #3: Sending image data with HTTP POST

Case #3 is where you post the image data directly to Picnik's servers (still using _import). This method only works with HTTP POST. To use it, you encode the image data in a multi-part form, and then send the form data to http://www.picnik.com/service/. Here's an example of what that form could look like:

<form action="http://www.picnik.com/service/" method="POST" enctype="multipart/form-data">
	<input type="hidden" name="_apikey" value="YourApiKey"/>
	<input type="hidden" name="_import" value="imagedata"/>
	<input type="file" name="imagedata" />
	<input type="submit" value="Import!"/>
</form>

...and here's an example of what the resulting HTTP POST data might look like:

POST http://www.picnik.com/service/
Content-Length: <some number>
Content-Type: multipart/form-data; boundary=+-+FORM+-+

--+-+FORM+-+
Content-Disposition: form-data; name="_apikey"

YourApiKey
--+-+FORM+-+
Content-Disposition: form-data; name="_import"

imagedata
--+-+FORM+-+
Content-Disposition: form-data; name="imagedata"
Content-Type: image/jpeg

<jpeg data goes here>
--+-+FORM+-+--

Next Steps

Now that you know how to send an image in, you'll probably want to learn how to get an image back out again. And of course, you can always go back and take a look at all the tutorials.