# Upload Files (PDF)

**URL:** <https://community.thunkable.com/t/upload-files-pdf/1459733>\
**Category:** Questions about Thunkable X\
**Tags:** file\
**Created:** [August 20, 2021, 7:35am UTC](https://community.thunkable.com/t/upload-files-pdf/1459733 "2021-08-20T07:35:21Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![overturner](https://avatars.discourse-cdn.com/v4/letter/o/53a042/32.png) [@overturner](https://community.thunkable.com/u/overturner)\
**Post date:** [August 20, 2021, 7:35am UTC](https://community.thunkable.com/t/upload-files-pdf/1459733/1 "2021-08-20T07:35:21Z")

</div>

Hi all ,  
Is there any way to upload pdf’s to thunkable .  
I checked a few tutorials but couldnt understand what will be the upload preset though.  
If not , if and when that component would be introduced would be very helpful.

---

<div class="post-metadata">

**Author:** ![vishruth-ram](https://avatars.discourse-cdn.com/v4/letter/v/82dd89/32.png) [@vishruth-ram](https://community.thunkable.com/u/vishruth-ram)\
**Post date:** [August 20, 2021, 7:38am UTC](https://community.thunkable.com/t/upload-files-pdf/1459733/2 "2021-08-20T07:38:09Z")

</div>

a `text input` which sets a `pdf viewer'` 's `file`

---

<div class="post-metadata">

**Author:** ![overturner](https://avatars.discourse-cdn.com/v4/letter/o/53a042/32.png) [@overturner](https://community.thunkable.com/u/overturner)\
**Post date:** [August 20, 2021, 7:40am UTC](https://community.thunkable.com/t/upload-files-pdf/1459733/3 "2021-08-20T07:40:22Z")

</div>

I cant understand what you meant . What i asked for was to be able to upload a pdf from the users side

---

<div class="post-metadata">

**Author:** ![ozel1978](https://avatars.discourse-cdn.com/v4/letter/o/3ec8ea/32.png) [@ozel1978](https://community.thunkable.com/u/ozel1978)\
**Post date:** [August 20, 2021, 9:40am UTC](https://community.thunkable.com/t/upload-files-pdf/1459733/4 "2021-08-20T09:40:02Z")

</div>

so far in my knowledge you only can upload picture only. for file you need to think other way like java scrip or other external solution. it is frustration for me also.

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [August 20, 2021, 10:36am UTC](https://community.thunkable.com/t/upload-files-pdf/1459733/5 "2021-08-20T10:36:50Z")

</div>

The `PDF Reader` accepts a URL so you can use this as an option.

---

<div class="post-metadata">

**Author:** ![overturner](https://avatars.discourse-cdn.com/v4/letter/o/53a042/32.png) [@overturner](https://community.thunkable.com/u/overturner)\
**Post date:** [August 20, 2021, 10:53am UTC](https://community.thunkable.com/t/upload-files-pdf/1459733/6 "2021-08-20T10:53:52Z")

</div>

Yes @muneer but what i want is for a user to be able to upload a pdf and i be able to show that.  
Even Anything javascript would work

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [August 20, 2021, 11:22am UTC](https://community.thunkable.com/t/upload-files-pdf/1459733/7 "2021-08-20T11:22:03Z")

</div>

Check this

> **[\- HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file)**
>
> elements with type="file" let the user choose one or more files from their device storage. Once chosen, the files can be uploaded to a server using form submission, or manipulated using JavaScript code and the File API.

See the following post

> [@How to upload an image to my server?](https://community.thunkable.com/t/how-to-upload-an-image-to-my-server/1450427/10):
>
> In your screen you need to have the following block from the web viewer [image] I’m displaying the name in a label but you can do whatever. The web viewer needs to load the file \<html\> \<head\> \<meta name="viewport" content="width=device-width, initial-scale=1"\> \<script src="https://thunkable.github.io/webviewer-extension/thunkableWebviewerExtension.js" type="text/javascript"\>\</script\> \</head\> \<body\> \<h1\>File Selector\</h1\> \<label for="uploadFile"\>Choose a file:\</label\> …

---

<div class="post-metadata">

**Author:** ![overturner](https://avatars.discourse-cdn.com/v4/letter/o/53a042/32.png) [@overturner](https://community.thunkable.com/u/overturner)\
**Post date:** [August 20, 2021, 2:24pm UTC](https://community.thunkable.com/t/upload-files-pdf/1459733/8 "2021-08-20T14:24:04Z")

</div>

Yes @muneer i checked that post and by that i was able to get the name of the pdf file. But what i want is to get the contents or something which i can show in the pdf viewer while viewing

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [August 20, 2021, 2:32pm UTC](https://community.thunkable.com/t/upload-files-pdf/1459733/9 "2021-08-20T14:32:38Z")

</div>

If you are allowing the user to browse a certain server folder and select a name then all what you need to do is to make the full URL from the server path that you already know and the selected file and this URL should be the URL of the `PDF Reader` component of Thunkable.

---

<div class="post-metadata">

**Author:** ![overturner](https://avatars.discourse-cdn.com/v4/letter/o/53a042/32.png) [@overturner](https://community.thunkable.com/u/overturner)\
**Post date:** [August 20, 2021, 3:34pm UTC](https://community.thunkable.com/t/upload-files-pdf/1459733/10 "2021-08-20T15:34:27Z")

</div>

> [@muneer](#):
>
> If you are allowing the user to browse a certain server folder and select a name

But I am not doing this. He/she can browse anywhere

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [August 20, 2021, 3:39pm UTC](https://community.thunkable.com/t/upload-files-pdf/1459733/11 "2021-08-20T15:39:09Z")

</div>

You will have to deal with a security issue. All new browsers restricts the **path** of the file to reduce the risk of malicious acts.

You will need an additional library to read the actual path. File path is restricted in HTML and JavaScript and you need to add a library for that.

---

<div class="post-metadata">

**Author:** ![ozel1978](https://avatars.discourse-cdn.com/v4/letter/o/3ec8ea/32.png) [@ozel1978](https://community.thunkable.com/u/ozel1978)\
**Post date:** [August 20, 2021, 4:14pm UTC](https://community.thunkable.com/t/upload-files-pdf/1459733/12 "2021-08-20T16:14:00Z")

</div>

muneer,

so basically any file can upload to cloud storage? cloudinary for example?

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [August 20, 2021, 4:27pm UTC](https://community.thunkable.com/t/upload-files-pdf/1459733/13 "2021-08-20T16:27:50Z")

</div>

Media DB can only upload image files but the Cloudinary API can upload any file.

---

<div class="post-metadata">

**Author:** ![vishruth-ram](https://avatars.discourse-cdn.com/v4/letter/v/82dd89/32.png) [@vishruth-ram](https://community.thunkable.com/u/vishruth-ram)\
**Post date:** [August 21, 2021, 4:46am UTC](https://community.thunkable.com/t/upload-files-pdf/1459733/14 "2021-08-21T04:46:14Z")

</div>

you can try this:

> MediaManager.get().upload(file).dispatch();

- file(`string`)

- upload present(`public id`,`folder`,`context`,`face coordinate`,`custom coordinates`)

- signature(rest api calls)

1. `use file name`to true( use`public id`)

2. `folder`(contains data of the `public id`)

3. `use file name`(file name for `public id`)

1.`resourse type`(type like `video` ,`image` , `auto` , `raw`)  
used more : [visit docs](https://cloudinary.com/documentation/image_upload_api_reference#required_parameters)

---

<div class="post-metadata">

**Author:** ![overturner](https://avatars.discourse-cdn.com/v4/letter/o/53a042/32.png) [@overturner](https://community.thunkable.com/u/overturner)\
**Post date:** [August 21, 2021, 5:25am UTC](https://community.thunkable.com/t/upload-files-pdf/1459733/15 "2021-08-21T05:25:40Z")

</div>

How to get the file string @vishruth-ram

---

<div class="post-metadata">

**Author:** ![overturner](https://avatars.discourse-cdn.com/v4/letter/o/53a042/32.png) [@overturner](https://community.thunkable.com/u/overturner)\
**Post date:** [August 21, 2021, 5:33am UTC](https://community.thunkable.com/t/upload-files-pdf/1459733/16 "2021-08-21T05:33:01Z")

</div>

So @muneer is there any of just transferring the file content?  
or is there no way of doing so unless thunkable makes this component?

---

<div class="post-metadata">

**Author:** ![vishruth-ram](https://avatars.discourse-cdn.com/v4/letter/v/82dd89/32.png) [@vishruth-ram](https://community.thunkable.com/u/vishruth-ram)\
**Post date:** [August 21, 2021, 5:52am UTC](https://community.thunkable.com/t/upload-files-pdf/1459733/17 "2021-08-21T05:52:20Z")

</div>

from the `public id`

---

<div class="post-metadata">

**Author:** ![overturner](https://avatars.discourse-cdn.com/v4/letter/o/53a042/32.png) [@overturner](https://community.thunkable.com/u/overturner)\
**Post date:** [August 21, 2021, 6:28am UTC](https://community.thunkable.com/t/upload-files-pdf/1459733/18 "2021-08-21T06:28:34Z")

</div>

@vishruth-ram i still cant understand.  
@muneer i tried the cloudinary api and was able to upload my files, but how to get the url of that uploaded was not clear to me

---

<div class="post-metadata">

**Author:** ![vishruth-ram](https://avatars.discourse-cdn.com/v4/letter/v/82dd89/32.png) [@vishruth-ram](https://community.thunkable.com/u/vishruth-ram)\
**Post date:** [August 21, 2021, 6:29am UTC](https://community.thunkable.com/t/upload-files-pdf/1459733/19 "2021-08-21T06:29:28Z")

</div>

what I was saying is docs of the cloudinary api

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [August 21, 2021, 10:13am UTC](https://community.thunkable.com/t/upload-files-pdf/1459733/20 "2021-08-21T10:13:40Z")

</div>

The API returns a JSON string which has the destination URL.

[Next page](https://community.thunkable.com/t/upload-files-pdf/1459733.md?page=2)