# reading files client-side only

**URL:** <https://talk.observablehq.com/t/reading-files-client-side-only/2883>\
**Category:** Feedback\
**Created:** [February 29, 2020, 2:45am UTC](https://talk.observablehq.com/t/reading-files-client-side-only/2883 "2020-02-29T02:45:59Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![steren](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/steren/32/2715_2.png) [@steren](https://talk.observablehq.com/u/steren)\
**Post date:** [February 29, 2020, 2:46am UTC](https://talk.observablehq.com/t/reading-files-client-side-only/2883/1 "2020-02-29T02:46:00Z")

</div>

I wish I was able to pick a local file without having to upload it.

This would make the [PG&E notebook](https://observablehq.com/@mbostock/electric-usage-2019) easier to use and more privacy friendly: anybody could open it and select a local file without having to upload the data to observable.

Just a suggestion. As this is something I can do rather easily with a and JS.

---

<div class="post-metadata">

**Author:** ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)\
**Post date:** [February 29, 2020, 3:04am UTC](https://talk.observablehq.com/t/reading-files-client-side-only/2883/2 "2020-02-29T03:04:11Z")

</div>

Welcome to the forums @steren! It is indeed possible (even easy and fun) to make something like what you describe on Observable, and I quickly hacked together a “client-side only” fork of the notebook here:

> **[Electric Usage, 2019 (client-side only)](https://observablehq.com/d/75979dea6a4845aa)**
>
> An Observable notebook by Bryan Gin-ge Chen.

**Edit** : It makes use of @jashkenas’s very convenient [file input cell](https://observablehq.com/@jashkenas/inputs#fileDemo) mentioned in @mcmcclur’s [post below](https://talk.observablehq.com/t/reading-files-client-side-only/2883/3).

---

<div class="post-metadata">

**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\
**Post date:** [February 29, 2020, 3:04am UTC](https://talk.observablehq.com/t/reading-files-client-side-only/2883/3 "2020-02-29T03:04:37Z")

</div>

> [@steren](#):
>
> I wish I was able to pick a local file without having to upload it.

There’s the [file upload input](https://observablehq.com/@jashkenas/inputs#fileDemo).

---

<div class="post-metadata">

**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\
**Post date:** [February 29, 2020, 3:07am UTC](https://talk.observablehq.com/t/reading-files-client-side-only/2883/4 "2020-02-29T03:07:33Z")

</div>

> [@bgchen](#):
>
> It is indeed possible on Observable and I quickly hacked together a “client-side only” fork of the notebook here:

Now, _that_ is a full service response! 👍

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [February 29, 2020, 3:13am UTC](https://talk.observablehq.com/t/reading-files-client-side-only/2883/5 "2020-02-29T03:13:24Z")

</div>

Hi @steren. Using the file client-side only is, in fact, the default behavior. The file will only be uploaded if you click Fork to save your changes.

---

<div class="post-metadata">

**Author:** ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)\
**Post date:** [February 29, 2020, 3:23am UTC](https://talk.observablehq.com/t/reading-files-client-side-only/2883/6 "2020-02-29T03:23:15Z")

</div>

> [@mbostock](#):
>
> Using the file client-side only is, in fact, the default behavior. The file will only be uploaded if you click Fork to save your changes.

Wow, that’s actually a great default! However, it was not obvious from [the File Attachments notebook](https://observablehq.com/@observablehq/file-attachments) nor from the file attachment UI. I did notice the little “lock” icon that appeared over the replacement file when I was testing it out. I hovered my mouse cursor over it in the hopes of getting a tooltip that would clarify what it meant but got nothing. Thus I assumed it meant that the file was uploaded but set to “private” somehow since that’s what I associated the lock icon with on the site.

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [February 29, 2020, 3:29am UTC](https://talk.observablehq.com/t/reading-files-client-side-only/2883/7 "2020-02-29T03:29:14Z")

</div>

I’ll file an issue to make the UI more self-describing. I agree it’s not as obvious as it should be!

(Somewhat off-topic, but the lock icon tells you whether the file is private or public. Even when a file is uploaded to a public notebook, it remains private until you publish the notebook. A file that is not saved/uploaded is necessarily also private, and so shows a lock icon. I don’t think we have any special icon for files that are not yet uploaded, but perhaps we should!)

---

<div class="post-metadata">

**Author:** ![steren](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/steren/32/2715_2.png) [@steren](https://talk.observablehq.com/u/steren)\
**Post date:** [March 1, 2020, 5:14pm UTC](https://talk.observablehq.com/t/reading-files-client-side-only/2883/8 "2020-03-01T17:14:20Z")

</div>

Oh that’s great.  
In that case, yes I think there is a UX issue, as you have seen, the current UX really led me to think I was “uploading” my file, and that it was going to “replace” the existing one. I assume that if I did not fork the notebook, my file might be deleted, but I dd not assume it was client side.
