How do I connect to instagram account

[srameshr]

I am running parse server. It runs on localhost:1337.

In my server, I have invoked uppy like this: server.js

var bodyParser = require('body-parser')
var uppy = require('uppy-server')
const session = require('express-session')

var app = express();
app.use(bodyParser.json())
app.use(session({
  secret: 'some-secret',
  resave: true,
  saveUninitialized: true
}))

const options = {
  providerOptions: {
    instagram: {
      key: 'MY_IG_KEY',
      secret: 'MY_IG_SECRET'
    }
  },
  server: {
    host: 'localhost:3020', // I have also tried adding localhost:1337 here, where my parse server runs
    protocol: 'http',
  },
  filePath: '/output',
  sendSelfEndpoint: "localhost:3020", //  have also tried adding localhost:1337 here, where my parse server runs
  secret: 'some-secret',
  debug: true
};

app.use(uppy.app(options))

// Rest of custom server code. Not related to uppy config

Now, when I start my server, with node server.js, it logs the following error:

uppy: Invalid provider options detected. Provider will not be loaded
uppy-server: No provider/provider-handler found. Exiting dispatcher.

Client My client is a simple starter create-react-app running on server localhost:3000. I use: .use(Instagram, { host: 'http://localhost:1337' }) to connect to my server, and the uppy dashboard displays Could not connect to uppy server.

Instagram I have used many redirect-uri on instagram and none of them work: http://localhost:1337/connect/instagram/callback http://localhost:3000/connect/instagram/callback

Can, somebody tell me what am I missing?

[ifedapoolarewaju]

@srameshr your code snippet seems correct (with localhost:3020 replaced with localhost:1337), so it's pretty unclear to me where the problem might be from.

Might I ask what version you are using? Also can you share the code snippet you are using on uppy client?

[srameshr]

Sure, server "uppy-server": "^0.10.1",

client "uppy": "^0.22.0",

Client code

import 'uppy/dist/uppy.css';
import Uppy from 'uppy/lib/core';
import GoogleDrive from 'uppy/lib/plugins/GoogleDrive';
import Dropbox from 'uppy/lib/plugins/Dropbox';
import Instagram from 'uppy/lib/plugins/Instagram';
import UppyDashboard from 'uppy/lib/react/Dashboard';

class Foo extends Component {
  componentWillMount() {
    this.uppy = new Uppy({
      restrictions: { maxNumberOfFiles: 1 },
      autoProceed: false,
      id: 'uppy',
      debug: true,
      thumbnailGeneration: false,
    })
      .use(GoogleDrive, { host: 'http://localhost:1337' })
      .use(Instagram, { host: 'http://localhost:1337' })
      .use(Dropbox, { host: 'http://localhost:1337'' })
      .run();
  }

  render() {
    <UppyDashboard
            uppy={this.uppy}
            plugins={['GoogleDrive', 'Instagram', 'Dropbox']}
            hideUploadButton
            maxHeight={420}
          />
  }
}

Appreciate your help.

[ifedapoolarewaju]

it seems you also have GoogleDrive in your client code, but you don't have the keys for google added on the server.

[srameshr]

Ok, but what does it have to do with instagram? I have removed google drive from my client code and it still throws the same error!

[ifedapoolarewaju]

the server warning you shared is most likely because it was unable to load the google provider.

I have removed google drive from my client code and it still throws the same error!

do you get the same error/warning on the server as before, Or just the same on the client?

[srameshr]

Both on the server and the client.

Can you explain how the flow is working? I am seeing a authorize made by the client, to my server (localhost:1337) and it returns status as ok.

Now, should I expect the Dashboard to load images from Instagram?

[ifedapoolarewaju]

@srameshr yes that is correct, same as it is happen on the demo page https://uppy.io/examples/dashboard/

[ifedapoolarewaju]

uppy: Invalid provider options detected. Provider will not be loaded
uppy-server: No provider/provider-handler found. Exiting dispatcher.

This error is only logged when you are attempting to connect to a provider on the server whose configuration you have not provided.

Getting this error must mean that your client is either still trying to connect to a provider you don't have setup on your server. (e.g dropbox or instagram)

Or that you instagram credentials are not well setup on the server

[srameshr]

No, its still happening. My client is not even running. I just start my server with the above config and it logs

uppy: Invalid provider options detected. Provider will not be loaded
uppy-server: No provider/provider-handler found. Exiting dispatcher.

What does Or that you instagram credentials are not well setup on the server mean? If you mean keys (private and secret) ive double checked it.

[srameshr]

Ok, I see this now:

Failed to load http://localhost:1337/instagram/authorized: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:3000' is therefore not allowed access.

So, because of CORS, my client running on localhost:3000 is unable to access my server end point running on localhost:1337

[srameshr]

Ive disabled all other providers on client. Still, I get a the same Invalid providers option on the server.

Do you have a demo project where I can see an implementation which is not throwing any error.

[ifedapoolarewaju]

So, because of CORS, my client running on localhost:3000 is unable to access my server end point running on localhost:1337

yes, since you are not using uppy standalone server, you need to allow the client origin to access your server.

something like this:

app.use((req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', req.headers.origin || '*')
  }

PS. the code snippet above would allow basically any origin access your server.

Do you have a demo project where I can see an implementation which is not throwing any error.

Here's a working server example

Still, I get a the same Invalid providers option on the server

It means you are probably also adding invalid provider options on the server. Here's the code snippet that does the validation, maybe that'll give you and idea. The validation function is called whenever you start uppy-server.

But also when you try to access uppy-server from your client this validation is called. Hence, it also checks if the provider is part of the providers you had specified in your providerOptions when starting the server.

I hope these tips help in finding the error. Please let me know :)

[srameshr]

Its still the same.

This is my server file:

require('dotenv').config();
const express = require('express');

const uppy = require('uppy-server')
const bodyParser = require('body-parser')
const session = require('express-session')

const ParseServer = require('parse-server').ParseServer;
const path = require('path');

const app = express();

app.use(bodyParser.json())
app.use(session({
  secret: 'some-secret',
  resave: true,
  saveUninitialized: true
}))

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', req.headers.origin || '*')
  res.setHeader(
    'Access-Control-Allow-Methods',
    'GET, POST, OPTIONS, PUT, PATCH, DELETE'
  )
  res.setHeader(
    'Access-Control-Allow-Headers',
    'Authorization, Origin, Content-Type, Accept'
  )
  res.setHeader('Access-Control-Allow-Credentials', 'true')
  next()
})

// initialize uppy
const uppyOptions = {
  providerOptions: {
    instagram: {
      key: 'insta key here',
      secret: 'secret_here'
    }
    // you can also add options for dropbox and instagram here
  },
  server: {
    host: 'localhost:3020',
    protocol: 'http',
  },
  filePath: './output',
  secret: 'some-secret',
  debug: true
}

app.use(uppy.app(uppyOptions))

app.use('/public', express.static(path.join(__dirname, '/public'))); // For avatars

// Routes
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, '/index.html'));
});

// Init Parse

const httpServer = require('http').createServer(app);
httpServer.listen(process.env.PORT, () => console.log("SERVER INIT"));

Like, whats wrong in this?

[ifedapoolarewaju]

@srameshr ok what exactly is not working? Do you get any error? What exactly is the indication that it is not working? Your server file looks good to me except 2 things: 1.)

server: {
    host: 'localhost:3020',
    protocol: 'http',
  }

is your server running at localhost:3020?

2.) you are not starting uppy socket, which would help with upload progress events. You should start it like so:

const httpServer = require('http').createServer(app);
const server = httpServer.listen(process.env.PORT, () => console.log("SERVER INIT"));

uppy.socket(server, uppyOptions)

see here for an example of how it is started with the standalone server.

[ifedapoolarewaju]

I have also just added a full working example which uses uppy front to back here: https://github.com/transloadit/uppy/tree/master/examples/uppy-with-server

[srameshr]

@ifedapoolarewaju Wow, thanks for your cooperation and help. I will let you know how it goes by tonight.

[srameshr]

@ifedapoolarewaju Still I have the same issue. I just replaced all of my server code and pasted your implementation and it logs this:

uppy: Invalid provider options detected. Provider will not be loaded
uppy-server: No provider/provider-handler found. Exiting dispatcher.

My server runs on 1337. I modified server options to point host at 1337 from 3020

[srameshr]

@ife Looks like, when debug mode is set to true, it just keeps logging them even though the creds are fine. It works now. Closing this. Also, can you tell me how do you get the url of a file after dropbox is authenticated and a pic has been selected?

I get back data like: img_name.jpg. Uppy thumbnail accesses it as: localhost:1337/thumbnail/filename.jpg

[ifedapoolarewaju]

Also, can you tell me how do you get the url of a file after dropbox is authenticated and a pic has been selected

it depends, what exactly are you trying to do with this?

[srameshr]

Im trying to download the image, via XHR and convert it into Blob. How do I get the absolute url of the selected file or image from dropbox. The data, I get back from Uppy is:

{
  ".tag":"file",
  "name":"IMG_20150810_235027_250.png",
  "path_lower":"/img_20150810_235027_250.png",
  "path_display":"/IMG_20150810_235027_250.png",
  "id":"id:zdDIWqcOUI0AAAAAAAAALA","client_modified":"2016-02-28T06:23:46Z","server_modified":"2016-02-28T06:23:46Z"
, "rev":"3b2922edb6",
  "size":40964,
  "content_hash":"37c9014dc3dc3dc0e1a507278ecc62868bc01bd35227aab055dadbe30da58dc2"}

[ifedapoolarewaju]

dropbox doesn't provide a direct url to the file, instead, you have to make a POST request as seen here. What is your use case?

[srameshr]

As I said earlier, I need to downlad the file.

[ifedapoolarewaju]

uppy-server helps you upload the file to your destination server. You can then download the file from the destination server. There's no API (at least not yet) to only download the file directly