# How to upload an image to my server?

**URL:** <https://community.thunkable.com/t/how-to-upload-an-image-to-my-server/1450427>\
**Category:** Questions about Thunkable X\
**Created:** [August 15, 2021, 10:53am UTC](https://community.thunkable.com/t/how-to-upload-an-image-to-my-server/1450427 "2021-08-15T10:53:17Z")\
**Posts on this page:** 1\
**Showing post:** 10

<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, 1:33pm UTC](https://community.thunkable.com/t/how-to-upload-an-image-to-my-server/1450427/10 "2021-08-20T13:33:52Z")

</div>

In your screen you need to have the following block from the `web viewer`  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/3/43bf5ae2fdae62e3138b00e4906f606cf4ea4197.png)

I’m displaying the name in a label but you can do whatever.

The `web viewer` needs to load the file

```auto
<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>

    <input type="file"
           id="uploadFile" name="uploadFile">
    
    <script type="text/javascript">
        const fileInput = document.getElementById('uploadFile');
        fileInput.onchange = () => {
        const selectedFile = fileInput.files[0].name;
        console.log(selectedFile);
        ThunkableWebviewerExtension.postMessage(selectedFile);
        }

    </script>
</body>
</html>

```

Once you select the file, the name of the file will be returned by this code.

---

_[View the full topic](https://community.thunkable.com/t/how-to-upload-an-image-to-my-server/1450427)._
