forked from sheetjs/docs.sheetjs.com
dropbox
This commit is contained in:
parent
3fc3892055
commit
5dd5616b81
docz/docs
02-getting-started/01-installation
03-demos
06-solutions
@ -21,3 +21,7 @@ After downloading the script, it can be directly referenced with `#include`:
|
|||||||
```c
|
```c
|
||||||
#include "xlsx.extendscript.js"
|
#include "xlsx.extendscript.js"
|
||||||
```
|
```
|
||||||
|
|
||||||
|
For local deployments, the scripts can be placed in the `Scripts` folder. For
|
||||||
|
Photoshop CS6 on Windows 10, the path is typically
|
||||||
|
`C:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Presets\Scripts`
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: Typed Arrays and ML
|
title: Typed Arrays and ML
|
||||||
|
pagination_next: demos/hosting/index
|
||||||
---
|
---
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
|
|||||||
185
docz/docs/03-demos/44-hosting/01-dropbox.mdx
Normal file
185
docz/docs/03-demos/44-hosting/01-dropbox.mdx
Normal file
@ -0,0 +1,185 @@
|
|||||||
|
---
|
||||||
|
title: Dropbox
|
||||||
|
pagination_prev: demos/ml
|
||||||
|
pagination_next: solutions/input
|
||||||
|
---
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="4ysmnhy8wtm6k3w"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
Dropbox is a file hosting service that offers APIs for programmatic file access.
|
||||||
|
|
||||||
|
"Dropbox Apps" are the standard way to interact with the service. The
|
||||||
|
["Dropbox App"](#dropbox-app) section describes how this demo was configured.
|
||||||
|
|
||||||
|
:::note
|
||||||
|
|
||||||
|
The Dropbox API script is loaded in this page with
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="4ysmnhy8wtm6k3w"></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
The `data-app-key` used in this demo is a "Development" key associated with the
|
||||||
|
`localhost` and `docs.sheetjs.com` domains. Dropbox API does not require
|
||||||
|
"Production" approval for the Chooser or Saver.
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
The live demos require a Dropbox account.
|
||||||
|
|
||||||
|
## Reading Files
|
||||||
|
|
||||||
|
"Chooser" is a small library that lets users select a file from their account.
|
||||||
|
|
||||||
|
### Live Demo
|
||||||
|
|
||||||
|
:::note
|
||||||
|
|
||||||
|
The Dropbox API script is loaded in this page with
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="4ysmnhy8wtm6k3w"></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
The specific App Key used in this demo is a "Development" key associated with
|
||||||
|
the `localhost` and `docs.sheetjs.com` domains. Dropbox API does not require
|
||||||
|
"Production" approval for the Chooser.
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
The button must have the following options:
|
||||||
|
|
||||||
|
- `multiselect: false` ensures only one file can be selected
|
||||||
|
- `folderselect: false` limits selection to real files
|
||||||
|
- `linkType: "direct"` ensures the link points to a raw file
|
||||||
|
|
||||||
|
When a file is selected, the `success` callback will receive an array of files
|
||||||
|
(even if `multiselect` is disabled). Each file object has a `link` file which
|
||||||
|
corresponds to a temporary URL that can be fetched.
|
||||||
|
|
||||||
|
If the live demo shows a message about `Dropbox` being undefined, please reload
|
||||||
|
this demo page.
|
||||||
|
|
||||||
|
```jsx live
|
||||||
|
function SheetJSChoisissez() {
|
||||||
|
const [msg, setMsg] = React.useState("Press the button to show a Chooser");
|
||||||
|
const btn = useRef(), tbl = useRef();
|
||||||
|
React.useEffect(() => {
|
||||||
|
/* create button */
|
||||||
|
var button = Dropbox.createChooseButton({
|
||||||
|
/* required settings */
|
||||||
|
multiselect: false,
|
||||||
|
folderselect: false,
|
||||||
|
linkType: "direct",
|
||||||
|
/* optional settings */
|
||||||
|
extensions: ['.xlsx', '.xls', '.numbers'], // list of extensions
|
||||||
|
|
||||||
|
/* event handlers */
|
||||||
|
cancel: () => setMsg("User Canceled Selection!"),
|
||||||
|
success: async(files) => {
|
||||||
|
/* get file entry -- note that dropbox API always passes an array */
|
||||||
|
var file = files[0];
|
||||||
|
setMsg(`Selected ${file.name} ID=${file.id}`);
|
||||||
|
|
||||||
|
/* fetch file and parse */
|
||||||
|
var wb = XLSX.read(await (await fetch(file.link)).arrayBuffer());
|
||||||
|
|
||||||
|
/* convert first sheet to HTML table and add to page */
|
||||||
|
tbl.current.innerHTML = XLSX.utils.sheet_to_html(wb.Sheets[wb.SheetNames[0]]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
/* add button to page */
|
||||||
|
btn.current.appendChild(button);
|
||||||
|
}, []);
|
||||||
|
return ( <><b>{msg}</b><br/><div ref={btn}/><div ref={tbl}/></> );
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Writing Files
|
||||||
|
|
||||||
|
:::caution
|
||||||
|
|
||||||
|
The Dropbox API was not designed for writing files that are created in the web
|
||||||
|
browser. The Data URI approach is a neat workaround but should not be used in
|
||||||
|
production for larger files. It is better to create the files in the server
|
||||||
|
using NodeJS and generate a proper URL for Dropbox to fetch.
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
"Saver" is a small library that lets users save files to their account.
|
||||||
|
|
||||||
|
### Live Demo
|
||||||
|
|
||||||
|
The file must be written before the Save button is created. Unfortunately the
|
||||||
|
API does not accept data in the POST body, so the workaround is to create a data
|
||||||
|
URI by writing with the `base64` type and prepending the URI metadata.
|
||||||
|
|
||||||
|
This demo seeds data by fetching a file and writing to HTML table. The generated
|
||||||
|
table is scraped to create a new workbook that is written to XLS.
|
||||||
|
|
||||||
|
If the live demo shows a message about `Dropbox` being undefined, please reload
|
||||||
|
this demo page.
|
||||||
|
|
||||||
|
```jsx live
|
||||||
|
function SheetJSEnregistrez() {
|
||||||
|
const [msg, setMsg] = React.useState("Press the button to write XLS file");
|
||||||
|
const btn = useRef(), tbl = useRef();
|
||||||
|
React.useEffect(async() => {
|
||||||
|
/* fetch data and write table (sample data) */
|
||||||
|
const f = await(await fetch("https://sheetjs.com/pres.xlsx")).arrayBuffer();
|
||||||
|
const wb = XLSX.read(f);
|
||||||
|
tbl.current.innerHTML = XLSX.utils.sheet_to_html(wb.Sheets[wb.SheetNames[0]]);
|
||||||
|
|
||||||
|
/* create workbook from table */
|
||||||
|
const table = tbl.current.getElementsByTagName("TABLE")[0];
|
||||||
|
const new_wb = XLSX.utils.table_to_book(table);
|
||||||
|
|
||||||
|
/* write XLS workbook (Base64 string) */
|
||||||
|
const b64 = XLSX.write(new_wb, { type: "base64", bookType: "xls" });
|
||||||
|
|
||||||
|
/* create data URI */
|
||||||
|
const url = "data:application/vnd.ms-excel;base64," + b64;
|
||||||
|
|
||||||
|
/* create save button using the concise function call */
|
||||||
|
var button = Dropbox.createSaveButton( url, "SheetJSDropbox.xls", {
|
||||||
|
success: () => setMsg("File saved successfully!"),
|
||||||
|
cancel: () => setMsg("User Canceled Selection!"),
|
||||||
|
});
|
||||||
|
/* add button to page */
|
||||||
|
btn.current.appendChild(button);
|
||||||
|
}, []);
|
||||||
|
return ( <><b>{msg}</b><br/><div ref={btn}/><div ref={tbl}/></> );
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Dropbox App
|
||||||
|
|
||||||
|
This demo requires a "Dropbox app":
|
||||||
|
|
||||||
|
0) Create a Dropbox app through the Developer tools. For this demo:
|
||||||
|
|
||||||
|
- "Choose an APU": "Scoped access"
|
||||||
|
- "Choose the type of access you need": "Full Dropbox"
|
||||||
|
- "Name": (enter any name) "SheetJS Docs"
|
||||||
|
|
||||||
|
:::caution
|
||||||
|
|
||||||
|
The Dropbox API Terms and Conditions should be reviewed before acceptance.
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
1) Configure the Dropbox app in the Developer tools.
|
||||||
|
|
||||||
|
The following permissions should be selected in the "Permissions" tab
|
||||||
|
|
||||||
|
- `files.metadata.write` (View and edit information about your Dropbox files and folders)
|
||||||
|
- `files.metadata.read` (View information about your Dropbox files and folders)
|
||||||
|
- `files.content.write` (Edit content of your Dropbox files and folders)
|
||||||
|
- `files.content.read` (View content of your Dropbox files and folders)
|
||||||
|
|
||||||
|
In the settings tab, under "Chooser / Saver / Embedder domains", the desired
|
||||||
|
public domains should be added. `localhost` must also be added for development
|
||||||
|
use (it is not automatically enabled).
|
||||||
|
|
||||||
5
docz/docs/03-demos/44-hosting/_category_.json
Normal file
5
docz/docs/03-demos/44-hosting/_category_.json
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"label": "File Hosting Services",
|
||||||
|
"position": 44,
|
||||||
|
"collapsed": false
|
||||||
|
}
|
||||||
20
docz/docs/03-demos/44-hosting/index.md
Normal file
20
docz/docs/03-demos/44-hosting/index.md
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
---
|
||||||
|
title: File Hosting Services
|
||||||
|
pagination_prev: demos/ml
|
||||||
|
pagination_next: solutions/input
|
||||||
|
---
|
||||||
|
|
||||||
|
import DocCardList from '@theme/DocCardList';
|
||||||
|
import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
|
||||||
|
|
||||||
|
File hosting services provide simple solutions for storing data, synchronizing
|
||||||
|
files across devices, and sharing with specific users or customers.
|
||||||
|
|
||||||
|
<ul>{useCurrentSidebarCategory().items.map(item => {
|
||||||
|
const listyle = (item.customProps?.icon) ? {
|
||||||
|
listStyleImage: `url("${item.customProps.icon}")`
|
||||||
|
} : {};
|
||||||
|
return (<li style={listyle} {...(item.customProps?.class ? {className: item.customProps.class}: {})}>
|
||||||
|
<a href={item.href}>{item.label}</a>{item.customProps?.summary && (" - " + item.customProps.summary)}
|
||||||
|
</li>);
|
||||||
|
})}</ul>
|
||||||
@ -1,5 +1,7 @@
|
|||||||
---
|
---
|
||||||
title: Data in Version Control
|
title: Data in Version Control
|
||||||
|
pagination_prev: demos/hosting/index
|
||||||
|
pagination_next: solutions/input
|
||||||
---
|
---
|
||||||
|
|
||||||
Git is a popular system for organizing a historical record of source code and
|
Git is a popular system for organizing a historical record of source code and
|
||||||
@ -155,8 +157,6 @@ This was tested on 2022 November 08 using the GitHub UI.
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
<details><summary><b>Complete Example</b> (click to show)</summary>
|
|
||||||
|
|
||||||
0) Create a free GitHub account or sign into the GitHub web interface.
|
0) Create a free GitHub account or sign into the GitHub web interface.
|
||||||
|
|
||||||
1) Create a new repository (click the "+" icon in the upper-right corner).
|
1) Create a new repository (click the "+" icon in the upper-right corner).
|
||||||
@ -263,4 +263,3 @@ jobs:
|
|||||||
|
|
||||||
The update process will run once an hour. If you return in a few hours and
|
The update process will run once an hour. If you return in a few hours and
|
||||||
refresh the page, there should be more commits in the selection list.
|
refresh the page, there should be more commits in the selection list.
|
||||||
</details>
|
|
||||||
@ -1,5 +1,6 @@
|
|||||||
---
|
---
|
||||||
pagination_prev: getting-started/index
|
pagination_prev: getting-started/index
|
||||||
|
pagination_next: solutions/input
|
||||||
hide_table_of_contents: true
|
hide_table_of_contents: true
|
||||||
---
|
---
|
||||||
|
|
||||||
@ -77,6 +78,11 @@ run in the web browser, demos will include interactive examples.
|
|||||||
- [`NetSuite SuiteScript`](/docs/demos/cloud/netsuite)
|
- [`NetSuite SuiteScript`](/docs/demos/cloud/netsuite)
|
||||||
- [`Salesforce Lightning Web Components`](/docs/demos/cloud/salesforce)
|
- [`Salesforce Lightning Web Components`](/docs/demos/cloud/salesforce)
|
||||||
|
|
||||||
|
### File Hosting Services
|
||||||
|
|
||||||
|
- [`Dropbox`](/docs/demos/hosting/dropbox)
|
||||||
|
- [`Git`](/docs/demos/git)
|
||||||
|
|
||||||
### Platforms and Integrations
|
### Platforms and Integrations
|
||||||
|
|
||||||
- [`Command-Line Tools`](/docs/demos/cli)
|
- [`Command-Line Tools`](/docs/demos/cli)
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
---
|
---
|
||||||
sidebar_position: 1
|
sidebar_position: 1
|
||||||
|
pagination_prev: demos/index
|
||||||
---
|
---
|
||||||
|
|
||||||
# Data Import
|
# Data Import
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user