ThumbSnap - Free Photo & Video Sharing

API Documentation for Photo and Video Hosting

Overview

ThumbSnap offers a free API that can be used to upload and host images and videos programmatically (you can use this with cURL, PHP, Node.js, Java, tinyMCE, or via whatever language your application or website is programmed in).

If you have any questions, issues, or have commercial / custom-integration needs, please contact us -- we'll be happy to help.

Photo / Video Formats

ThumbSnap currently supports images in .jpg, .gif and .png. We also support webp, tiff, svg, bmp and a few other image formats that get auto-converted to .jpg.

For videos, we support .mp4, .avi, .mov, .qt, .mkv and a few other video formats (mp4 recommended).

Photos and videos may be up to 48 MB in size. If you need support for a different format or larger file size, contact us.

API Key

You will need an API key to use the ThumbSnap API. Any images or videos uploaded using your API key will appear in your "My Photos" section (you can manage/view/delete images from there also).

Create an account or log in then return to this page to see your key.

API Method: Upload

API URL: https://thumbsnap.com/api/upload

This is the main API method used to upload images to ThumbSnap

Required fields:

• media - Binary image/video data. Should be sent as an HTTP POST formatted as multipart/form-data
• key - The API key provided by ThumbSnap

Upon successfully posting an image, a JSON-formatted document will be returned with a 'url' which is the full URL to the uploaded photo's page at ThumbSnap. This URL must be linked to any ThumbSnap-hosted thumbnails or images used by your application.

Sample Response

A successful image upload will return a JSON document as follows:

{
  "data": {
    "id": "soLHmGdX",
    "url": "https://thumbsnap.com/soLHmGdX",
    "media": "https://thumbsnap.com/i/soLHmGdX.png",
    "thumb": "https://thumbsnap.com/t/soLHmGdX.jpg",
    "width": 224,
    "height": 224
  },
  "success": true,
  "status": 200
}

Sample Error Response

If an image upload fails, a message similar to the following will be returned:

{
  "error": {
    "message": "Upload failed. Invalid image"
  },
  "success": false,
  "status": 400
}

Testing

To test out the API or view sample responses, you may use this form.

cURL

If you have curl installed on your computer (most Mac and Linux computers do), you can upload from the command line/terminal like this (replace "MyTestPicture.jpg" with the name and path of your image or video):

curl -F 'key=API-Key-Here' -F 'media=@MyTestPicture.jpg' https://thumbsnap.com/api/upload

TinyMCE Image Upload plugin - Free TinyMCE Photo Hosting!

You can integrate ThumbSnap's image uploader into your TinyMCE editor for free by adding the code below! No server code required -- your users can simply drag and drop photos into the "Image" window or the editor in tinyMCE to upload any images.

Copy the images_upload_handler section below into your tinyMCE config (you'll need to have the built-in 'image' plugin enabled as shown below):

tinymce.init({
    selector: 'textarea',
    plugins: [ 'image' ],
    toolbar: 'image',
    images_upload_handler: function (blobInfo, success, failure, progress) {
        
        var thumbsnap_api_key = 'API-Key-Here';

        var xhr, formData;

        xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
        xhr.open('POST', 'https://thumbsnap.com/api/upload');

        xhr.upload.onprogress = function (e) {
            progress(e.loaded / e.total * 100);
        };

        xhr.onload = function() {
            var json;

            console.log("upload done", xhr);

            if (xhr.status < 200 || xhr.status >= 300) {
                failure('HTTP Error: ' + xhr.status);
                return;
            }

            json = JSON.parse(xhr.responseText);

            if (!json || typeof json.data.media != 'string') {
                failure('Invalid JSON: ' + xhr.responseText);
                return;
            }

            success(json.data.media);
        };

        xhr.onerror = function () {
            failure('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
        };

        formData = new FormData();
        formData.append('key', thumbsnap_api_key);
        formData.append('media', blobInfo.blob(), blobInfo.filename());

        xhr.send(formData);
    }
});

Questions? Need help?

If you have any questions, issues, or have commercial / custom-integration needs, please contact us -- we'll be happy to help!