filestack / filestack-react

Official React component for Filestack - API and content management system that makes it easy to add powerful file uploading and transformation capabilities to any web or mobile application.
https://www.filestack.com
MIT License
164 stars 40 forks source link

Api connection failed #135

Closed sergiogomeza closed 1 year ago

sergiogomeza commented 1 year ago

Hello, I'm trying to test filestack react component and connect it to my react application. I followed the tutorial https://www.npmjs.com/package/filestack-react but i having the same problem every time, i don't know what's happening and i can't find anything in the official documentation that helps me to find the problem.

image

My code:

import { useState } from "react";
import { PickerOverlay } from "filestack-react";

const CustomFilestack = () => {
  const YOUR_API_KEY = "real api key"
  const [isPickerVisible, setIsPickerVisible] = useState(false);

  const pickerOptions = {
    onClose,
  };

  function onClose() {
    setIsPickerVisible(false);
  }

  function showPicker() {
    setIsPickerVisible(true);
  }

  return (
    <div>
      {isPickerVisible && (
        <PickerOverlay
          apikey={YOUR_API_KEY}
          pickerOptions={pickerOptions}
          onError={(error) => console.log("error: ", error)}
          onUploadDone={(res) => console.log("upload: ", res)}
          onClick={(res) => console.log("click: ", res)}
        />
      )}
      <button onClick={showPicker}>Show Picker</button>
    </div>
  );
};

export default CustomFilestack;

My package.json:

{
  "name": "vite-client",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "filestack-react": "^4.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^4.0.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "vite": "^4.3.2"
  }
}

node version is 14.21.3

Any insight about what i'm doing wrong would be great.

sergiogomeza commented 1 year ago

Problem solved! You have to go to Filestack developer portal > Configuration > App Settings and update "Application name" and "max size (bytes)".