Giter VIP home page Giter VIP logo

file-picker's Introduction

Apideck File Picker Demo

A sample project showcasing the React File Picker component that works with the Apideck File Storage API.

Sign up for a free account at apideck.com to obtain an API key and App ID.

View the code and documentation of the File Picker component here.

Getting started

Duplicate .env.example file, rename it to .env and replace the placeholders with your Apideck credentials. You can get your API key at apideck.com.

Note that if the consumer ID is is randomly generated for demoing purposes.

Install the dependencies and run the local development server:

yarn && yarn dev

Screenshot

Commands

yarn dev

Runs next dev which starts the app in development mode.
Open http://localhost:3000 to view it in the browser.

yarn build

Runs next build which builds the application for production usage

yarn start

Runs next start which starts a Next.js production server

yarn lint

Runs the eslint command for all files with the js, ts, jsx, and tsx extensions. See the .eslint.json file for all configuration settings.

yarn lint:fix

Runs the eslint command with the --fix flag which tries to automatically fix linting problems.

yarn lint:cache

Runs the eslint command with the --cache flag which only checks the changed files.

yarn lint:format

Runs Prettier which formats all files inside the src directory based on the configuration set inside the .prettierrc file.

yarn type-check

Runs the tsc command to compile the project and check if it has type errors.

yarn test

Runs the jest command which runs all tests

yarn test:watch

Runs the jest command with --watch flag which runs all tests in watch mode

yarn test:coverage

Runs the jest command with --coverage flag which indicates that test coverage information should be collected and reported in the output.

Commit hooks

This project uses husky and lint-staged to run linters against staged git files on commit.

Pre-commit

Before each commit we run eslint and prettier on all staged files.

Pre-push

Before each push to the repository we run jest to check if all tests are passing.

Resources

To learn more, take a look at the following resources:

file-picker's People

Contributors

dependabot[bot] avatar elsmr avatar gdewilde avatar jakeprins avatar snyk-bot avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

file-picker's Issues

FilePicker: Use vaultjs instead of redirecting to hosted vault

The file-picker react component: When the user has no integration configured you are showing a message: Go to vault to add file storage connectors with a link to your page.

How can we change that link, I couldn't find anything in the documentation.

Uploaded PNG seems broken

Connection: Dropbox

Uploaded a PNG successfully but when I went to Dropbox portal I could not preview my image.
I also downloaded the file both through the File Picker and directly from Dropbox, and some problem appeared.

This is a demo for the Apideck File Picker component  Click a

Cannot download "downloadable" file from google-drive using api deck sdk / api

I get this error:
Response {
[🚀exprs] size: 0,
[🚀exprs] [Symbol(Body internals)]: {
[🚀exprs] body: PassThrough {
[🚀exprs] _readableState: [ReadableState],
[🚀exprs] _events: [Object: null prototype],
[🚀exprs] _eventsCount: 5,
[🚀exprs] _maxListeners: undefined,
[🚀exprs] _writableState: [WritableState],
[🚀exprs] allowHalfOpen: true,
[🚀exprs] [Symbol(kCapture)]: false,
[🚀exprs] [Symbol(kCallback)]: null
[🚀exprs] },
[🚀exprs] stream: PassThrough {
[🚀exprs] _readableState: [ReadableState],
[🚀exprs] _events: [Object: null prototype],
[🚀exprs] _eventsCount: 5,
[🚀exprs] _maxListeners: undefined,
[🚀exprs] _writableState: [WritableState],
[🚀exprs] allowHalfOpen: true,
[🚀exprs] [Symbol(kCapture)]: false,
[🚀exprs] [Symbol(kCallback)]: null
[🚀exprs] },
[🚀exprs] boundary: null,
[🚀exprs] disturbed: false,
[🚀exprs] error: null
[🚀exprs] },
[🚀exprs] [Symbol(Response internals)]: {
[🚀exprs] type: 'default',
[🚀exprs] url: 'https://unify.apideck.com/file-storage/files/${fileId}/download',
[🚀exprs] status: 401,
[🚀exprs] statusText: 'Unauthorized',
[🚀exprs] headers: {
[🚀exprs] 'access-control-allow-credentials': 'true',
[🚀exprs] 'access-control-allow-origin': '*',
[🚀exprs] connection: 'close',
[🚀exprs] 'content-length': '322',
[🚀exprs] 'content-type': 'application/json',
[🚀exprs] date: 'Tue, 27 Jun 2023 13:06:13 GMT',
[🚀exprs] via: '1.1 c3f257ad7ec4633c503cd21a690fa4dc.cloudfront.net (CloudFront)',
[🚀exprs] 'x-amz-apigw-id': 'HLe-0HeHFiAFW2g=',
[🚀exprs] 'x-amz-cf-id': 'lp7J8MVXqXl58FiiTU3ewZbdJUkNm0TbwfExfq8KCNigrEHloMGaKw==',
[🚀exprs] 'x-amz-cf-pop': 'MIA3-C2',
[🚀exprs] 'x-amzn-requestid': 'dd57c3cf-d405-4cb2-b2f2-8ed6b60aece2',
[🚀exprs] 'x-amzn-trace-id': 'Root=1-649adec4-275a46b20ded46df2a8114a2',
[🚀exprs] 'x-cache': 'Error from cloudfront'
[🚀exprs] },
[🚀exprs] counter: 0,
[🚀exprs] highWaterMark: 10000000
[🚀exprs] }
[🚀exprs] }

when I try to download a google drive file through the sdk like this:

const apideck = new Apideck({
apiKey: process.env.API_DECK_API_KEY!,
appId: process.env.API_DECK_APP_ID!,
consumerId: consumerId,
});
let data = null;
try {
data = await apideck.fileStorage.filesDownload({
id: fileId,
consumerId,
appId: process.env.API_DECK_APP_ID,
serviceId: 'google-drive',
});
console.log('API called successfully', data);
} catch (error) {
console.error('Error: ', error);
}

same error through the api calling it like this:
await fetch(https://unify.apideck.com/file-storage/files/${fileId}/download, {
method: 'GET',
headers: {
'x-apideck-consumer-id': consumerId,
'x-apideck-app-id': process.env.API_DECK_APP_ID!,
Authorization: Bearer ${process.env.API_DECK_API_KEY!},
},
});

Can not create session

The demo worked fine but all of a sudden the "create session" functionality returns an error.
The only thing I did was trying out the Vault demo in the same browser.

Screenshot 2022-03-08 at 16 52 03

Tried it again a couple of hours later but could not reproduce the issue.

Able to download a file that is not downloadable

Connection: Dropbox

As you can see in the screenshot the metadata says the file is not downloadable but when I click the "Download file" button, it still successfully downloads the file.

Should the download button be disabled?
Should clicking the download button return an error message?

Screenshot 2022-03-10 at 11 42 44

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.