Upload sources

Our file uploaders support 14 upload sources, including local file storage, web camera; external URL; cloud services, and social networks. In UI, the sources are shown as tabs.

Configuration

Read how to configuring upload sources for:

List of supported upload sources

Code

File Source

Default

file

Local disk

On

camera

Local webcam

On

url

Any URL

On

facebook

Facebook

On

gdrive

Google Drive

On

gphotos

Google Photos

On

dropbox

Dropbox

On

instagram

Instagram

On

evernote

Evernote

On

flickr

Flickr

On

onedrive

OneDrive

On

box

Box

Off

vk

VK

Off

huddle

Huddle

Off

OAuth connection examples

This tutorual explains how to use OAuth 2.0 tokens for authorization and shows examples of OAuth connection.

OAuth 2.0 tokens for authorization

If you have integration with one of social networks or cloud services through OAuth 2 and want to reuse user’s token in the Uploadcare widget, you can use API for that:

  1. First, you need to check that you request all permissions required for Uploadcare widget’s normal work. You can find the full list in the Required permissions section below.
  2. It is only possible to set a token from the client. If you are using tokens only on the server side, you’ll need to temporarily transfer them to the client and send requests from the browser. Please, make sure that your site is served via HTTPS, otherwise, this is a huge security vulnerability.
  3. If you are using custom OAuth apps, it will take some extra work to make everything work together.
  4. You will need to send GET request to the following URL: https://social.uploadcare.com/[storage_key]/set_keys. For what is [storage_key], see the Storage key section below.

You’ll need to send the following information through query string:

  • public_keyrequired. The public key of your Uploadcare project.
  • access_tokenrequired. The access token issued by the authorization server.
  • token_typerequired. The type of the token issued by the authorization server. In most cases, it is Bearer.
  • refresh_tokenoptional. The refresh token, which can be used to get new access tokens using the same authorization grant.

The request can be sent at any time. The best moment is when the user is logged in to your site through OAuth 2.0. But if you already have a lot of logged in users, you may need to send this request on a page load.

Note that for security reasons, it is not possible to use tokens from the widget in your apps. You can only expose your keys to Uploadcare.

Storage key explanation

The storage key is a part of a URL, which you (and Uploadcare widget) use for communication with social services. In simple cases, this is the service name. For example: box, huddle, flickr, evernote, instagram, vk, skydrive, facebook, dropbox, and gdrive.

But if you are using custom OAuth apps for your project, these keys will be different. The easiest way to find out the right storage key is to look for it in the browser’s developer panel. Open the widget on the tab you are interested in and find the request to social.uploadcare.com.

Required permissions

Some of the services need extra permissions to work with Uploadcare.

Full list of permissions:

Instagram Basic Display

Before you start, you need to have a real Instagram account for testing with one photo and one video uploaded. It would help if you used it in the review submission.

First, you need to create a Facebook application at developers.facebook.com or use an existing one from your account. If you need to create a new Facebook app to add the App Platform, go to Facebook APP → Settings → Basic and click Add Platform at the bottom of the screen:

Сhoose Website, enter your site URL, and then click Save Changes. For the App Domains field, you need to use social.uploadcare.com or your own custom social CNAME domain. Please make sure the fields Business Use, Category, Privacy Policy URL, Terms of Service URL, and App Icon (1024 x 1024) are set up for your Facebook Application. Once you’re finished with the settings, click on the plus sign after the PRODUCTS label (in the left menu at the bottom), then find Instagram Product (it will appear at the bottom of the products list), and click Set Up.

After the Instagram Product has been added to your app, it will appear under the PRODUCTS list on the left. From there, go to Instagram → Basic Display:

Click Create New App, give your app a name and continue. Now you need to set up this Instagram Application to work with Uploadcare and then submit it to the review process. Also, you need to save these values in your project settings:

Go to your Project Dashboard, open the Custom OAuth apps page, select Instagram Basic Display, and fill in the App key and App secret fields with the keys you got from Instagram. Click Save Key.

Now back to the Instagram Application configuration: For the fields Client OAuth Settings, Deauthorize, and Data Deletion Requests, you should use your own custom social CNAME domain, or use Uploadcare domain, as in the following:

Client OAuth Settings: https://social.uploadcare.com/instagram/endpoint or https://YOUR.CUSTOM.SOCIAL.CNAME.DOMAIN/instagram/endpoint

Deauthorize: https://social.uploadcare.com/instagram/session or https://YOUR.CUSTOM.SOCIAL.CNAME.DOMAIN/instagram/session

Data Deletion Requests: https://uploadcare.com/

Now you need to add a real Test User as an Instagram App tester. Go to the User Token Generator section and open Add or Remove Instagram Testers (at the bottom). Make sure you open the link in a new browser tab. You will be redirected to the Test users page. Find the Instagram Testers section at the bottom of the page, click Add Instagram Testers, and follow the instructions.

Please do not forget to accept this invite at the following page of your test user account: http://instagram.com/accounts/manage_access/ (Test Invites tab).

Now, let’s create a demo page so you’ll be able to record a screencast for the review submission.

Creating a demo page with the Uploadcare Widget

It would help if you recorded a screencast to submit your Instagram application for review. To do so, you need to create an HTML page and serve it on your domain (see facebook example). You can find template source code for this page here instagram example. Just replace %YOUR_PROJECT_PUB_KEY% with your own value. After you successfully set up this page, you need to record two screencasts for each permission. Just follow our videos step by step: instagram_graph_user_profile, instagram_graph_user_media

Review submission

Go back to the previous tab and go to the App Review for Instagram Basic Display section and add both instagram_graph_user_profile and instagram_graph_user_media to the submission:

Click on Edit Details for instagram_graph_user_profile, and for the field “Tell us how you're using this permission or feature”, copy the following text:

We use the scope ‘instagram_graph_user_profile’ to show the logged-in user’s username.

  1. Go to %your_widget_demo_page_url%.
  2. Click “Choose a file from Instagram”.
  3. Select the Instagram tab in the widget.
  4. Click “Connect to Instagram”.
  5. After you give our app permissions, you’ll be able to see your user’s username.
  6. See your user’s username on the left of the widget.

Please, attach a screencast video demonstrating the tab functionality you previously recorded.

Click on Edit details for instagram_graph_user_media, and for the field “Tell us how you're using this permission or feature", copy the following text:

We use the Uploadcare widget on our website and our Instagram application keys to allow users to utilize the Uploadcare Instagram tab functionality.

Uploadcare allows Instagram users to upload photos and videos to a website/app that has the integrated Uploadcare widget. We use this permission to list users’ videos and photos, and fetch them by URL when the user picks one.

  1. Go to %your_widget_demo_page_url%.
  2. Click “Choose a file from Instagram”.
  3. Select the Instagram tab in the widget.
  4. Click “Connect to Instagram”.
  5. After you give our app permissions, you’ll be able to see your user’s photo and video thumbnails in the provided list of files.
  6. After choosing a photo or video, it is uploaded to Uploadcare storage.

Now, attach a screencast video demonstrating the tab functionality you previously recorded. Go to the App Verification section, click Edit details, and for the Testing Credentials (Optional) section, enter your real test user credentials.

Tick the I confirm I've completed the required steps checkbox at the bottom and click Save. Click on the Submit for Review button and wait for the review results. Let us know if there are any updates on your submission.

Instagram

  1. Open the Instagram Manage Clients page.
  2. Click Register a New Client.
  3. Think up a name for your application. For example, your site or application name.
  4. Fill in fields with description, website URL and contact email.
  5. Use the following URL as a Valid redirect URI and create the application: https://social.uploadcare.com/instagram/endpoint
  6. If you want to get non-square images from Instagram, open the Migrations tab and select the Non-square media checkbox.
  7. Go to Dashboard, open the Custom OAuth apps page, select Instagram and fill in the App key and App secret fields with the keys you got from Instagram. Click Save Key.

Facebook

  1. Open Facebook My Apps.

  2. Click Add a New App.

  3. Click basic setup.

  4. Choose a name and select a category for the new app. Then click Create App ID.

  5. On the Settings page, click + Add platform and choose Website.

  6. Fill App domains and Site URL with the social.uploadcare.com domain and click Save Changes.

  7. Go to the App Review page and click Start a Submission.

  8. Mark the following items to a review: user_likes, user_photos and user_videos and click Add 3 Items.

  9. Provide step-by-step instruction and a screencast that shows how to access the Uploadcare widget and open the Facebook tab. Then submit the app for review.

  10. After confirmation, you will get the Facebook App ID and App Secret.

  11. Go to Dashboard, open the Custom OAuth apps page, select Facebook and fill in the App key and App secret fields with the keys you got from Facebook.

Google Drive

  1. Open Google Developers Console.
  2. Click Create Project.
  3. Think up a name for your project. For example, your site or application name.
  4. Go to API Manager, search for Drive API and enable it.
  5. Go to API Manager → Credentials and add OAuth 2.0 client ID.
  6. Choose Web application and add the following URL as Authorized redirect URIs: https://social.uploadcare.com/gdrive/endpoint
  7. Copy the client ID and client secret keys.
  8. Go to dashboard, open the Custom OAuth apps page, select Google Driveand fill in the App key and App secret fields with the keys you got from Google. Click Save Keys.

Box

  1. Open Box Applications list.
  2. Click Create a Box Application.
  3. Think up a name for your application. For example, your site or application name.
  4. Select Box Content.
  5. Set the following URL as redirect_uri in the project settings and select Read and write all files and folders: https://social.uploadcare.com/box/endpoint. Note that all other boxes of the Scope section must be unmarked.
  6. At the bottom of the form, Click Save Application.
  7. Go to Dashboard, open the Custom OAuth apps page, select Box and fill in the App key and App secret fields with the keys you got from Box. Click Save Keys.

Dropbox

  1. Open Dropbox App Console.
  2. Click Create app.
  3. Choose Dropbox API.
  4. Choose Full Dropbox — Access to all files and folders in a user’s Dropbox.
  5. Think up a name for your app. For example, your site or application name.
  6. Click Create app. The new application will be created.
  7. On the settings page of the app, add the following URI to the Redirect URIs field: https://social.uploadcare.com/dropbox/endpoint.
  8. Before connecting the app, you need to increase users limit, to do this click Enable additional users.
  9. Find App key and App secret and copy them.
  10. Go to Dashboard, open the Custom OAuth apps page in project settings, select Dropbox and fill in the App key and App secret fields with the keys you got from Dropbox. Click Save Keys.
  11. Now you can test your app. In the widget, try to connect Dropbox. If everything is done right, you will see the request from your app.
  12. After that, you will need to apply the app for production. Go back to the app settings page and click Apply for production. Follow the instructions to send the request.