# markdown links to Windows paths?

**URL:** <https://talk.observablehq.com/t/markdown-links-to-windows-paths/1924>\
**Category:** Help\
**Created:** [April 26, 2019, 1:58pm UTC](https://talk.observablehq.com/t/markdown-links-to-windows-paths/1924 "2019-04-26T13:58:14Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\
**Post date:** [April 26, 2019, 1:58pm UTC](https://talk.observablehq.com/t/markdown-links-to-windows-paths/1924/1 "2019-04-26T13:58:14Z")

</div>

Testing whether I could use Observable to render a table of documents with links to their locations in a Windows directory, I receive:

> TypeError: Cannot read property ‘replace’ of undefined  
> Please report this to [GitHub - markedjs/marked: A markdown parser and compiler. Built for speed.](https://github.com/chjj/marked).

e.g. with this path

```
md`
[test]("C:\User\aaron\1.doc")
`

```

For HTML, it’s a similar issue:

> TypeError: Cannot read property ‘trim’ of undefined

```
html`
<a href="C:\User\aaron\1.doc">test</a>
`

```

When I try this locally with HTML, however, I have no problems.

Is this an observable limitation? Or something else?

---

<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:** [April 26, 2019, 2:10pm UTC](https://talk.observablehq.com/t/markdown-links-to-windows-paths/1924/2 "2019-04-26T14:10:42Z")

</div>

You’ll need to convert the Windows backslashes to the forward slashes used in URIs, (and you probably want to use the [`file://` syntax](https://en.wikipedia.org/wiki/File_URI_scheme#Windows) as well):

```auto
md`
[test](file:///C:/User/aaron/1.doc)
`

```

```auto
html`
<a href="file:///C:/User/aaron/1.doc">test</a>
`

```

---

<div class="post-metadata">

**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\
**Post date:** [April 26, 2019, 2:30pm UTC](https://talk.observablehq.com/t/markdown-links-to-windows-paths/1924/3 "2019-04-26T14:30:21Z")

</div>

Thanks Bryan! Your answer is very helpful and appreciated, but it’s unfortunate that one must implement such a conversion ☹

---

<div class="post-metadata">

**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\
**Post date:** [April 26, 2019, 2:44pm UTC](https://talk.observablehq.com/t/markdown-links-to-windows-paths/1924/4 "2019-04-26T14:44:47Z")

</div>

As a bit of follow-up – to better understand issues and going beyond getting the links to work:

**Why doesn’t the URL conversion occur “auto-magically” with an Observable cell, whereas it does for an HTML file sitting on my computer?**

That is, with a standard HTML file on my computer, the browser takes the windows path, downloads the file, and shows me in the download tabs that it did so using the `file://` syntax.

Also, if I supply the path with from a CSV file with JavaScript, the path looks to be working OK

`<a href="${windows_docs[1].document_path}">test</a>`

However, clicking the cell won’t draw down the file, although I can use the mouse to ‘copy path’, which will copy in the `file://` syntax and, if pasted in my browser manually, downloads the file as expected.

so weird.

---

<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:** [April 26, 2019, 3:33pm UTC](https://talk.observablehq.com/t/markdown-links-to-windows-paths/1924/5 "2019-04-26T15:33:49Z")

</div>

> it’s unfortunate that one must implement such a conversion ☹

Here’s a trick that might help. If you type / paste the path to your local file into the address bar in a new browser tab and hit enter, your browser should automatically convert it into a new `file://` url that you can copy and paste.

For the paths coming from CSV files, you could use a function to convert the URLs; here’s one adapted from a [JSfiddle](http://jsfiddle.net/StephenLujan/r6DYy/):

```js
function filePathToUrl(path) {
    path = path.replace(/\\/g, '/');
    path = path.replace(/ /g, '%20');
    const drive = /(.)\:\//;
    return path.replace(drive, 'file:///$1:/');
}

```

(Not too well-tested, may break on some edge cases…)  
You can use it like this:

```html
<a href="${filePathToUrl(windows_docs[1].document_path)}">test</a>

```

> why doesn’t this conversion occur “auto-magically” with an Observable cell, whereas it does for an HTML file sitting on my computer?

I wasn’t aware that you could do this with local HTML files – my guess would be that is because browsers are inclined to relax security restrictions in favor of convenience in that setting. There’s a little more discussion about security and local file paths [in this SO answer](https://stackoverflow.com/a/18246357/). That may go part way to explaining “weird” behavior.

---

<div class="post-metadata">

**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\
**Post date:** [April 26, 2019, 5:59pm UTC](https://talk.observablehq.com/t/markdown-links-to-windows-paths/1924/6 "2019-04-26T17:59:27Z")

</div>

Thank you for all the research and links. This is super informative!

From the the SO information you linked, and as verified with a bit of testing, it doesn’t seem possible to use the `file:///` protocol on Observable and have it download files on one’s computer. When I do this (assuming because the browser is reading the URL path as as `file://localhost/C:/User/aaron/1.doc`) the page attempts to open a separate Observable window—and clearly that file won’t be found on Observable. This same thing happens when trying to download and host the notebook elsewhere, like GitHub or AWS—localhost will not refer to your local computer, but to the sever hosting the file. This windows computer I am using won’t allow me to run a local http server (like with python), so that _may_ work, but it’s an extra step anyway so not well suited to my purpose (which is to describe a body of literature sitting on a shared Windows network drive).
