How to upload an image to my server?

Questions about Thunkable
1

hi,
my app has a profile page, and it has an option to let user select a profile image…
after user either chooses an image from gallery or by using camera, i want to upload that image to my server…my server can accept files…for the server side, we have custom code in nodejs to accept file send in multipart-form-data

so how do i send file-content to server from thunkable??

is it by using webApi component?..
but how will i send image file in webApi component?..how will i send file data?..i have used webApi to send strings in its BODY, but i dont know how i can POST a file through it…and how will i get image path/name etc?

i saw some examples doing this using cloudinary…but i want to upload image to my own server… thats the issue…

please help
@domhnallohanlon @muneer @tatiang

1 Like
2

Use one of the collaboration apps such as IFTTT. There are tutorials how to upload to OneDrive.

No one will be able to give you a specific answer without knowing the API service that is running on your server and, in case, it is a known service to one of us we will be able to help.

2 Likes
3

ok thanks @muneer for replying…i will sure check IFFT …
for the server side, we have our own custom code in nodejs to accept file send in multipart-form-data… @muneer

how can i send file-data to server from thunkable?..i have used webApi component to send json data succesfully…but how do i send file-content to server from thunkable?

1 Like
4

If you have this then you are the one who can say how to send.
You will still have to solve the issue of reading the file from the device using Thunkable and then sending it using your API service.

You said it is your custom code so you are the only one who knows how to deal with it and what to supply to it.

2 Likes
5

yes sure @muneer …thanks for replying, thats what my doubt is also…
how do i read the file from the device…how do i put it in the BODY of the webapi component?..thats my doubt…if i can read it from device and attach to body of WebApi component then rest will work fine…

1 Like
6

Check this

1 Like
7

thanks @muneer …
so i am guessing i will have to use the WebViewer component?..
will it work on both ios and android?

update: so user will have to click the file-select button?..is there anyway i can supply the selected file value myself…for example, is it possible to use the image i got from Gallery/Camera component in thunkable and set it as the value of File-Input? @muneer

1 Like
8

Yes you can.
This will give the filename selected from the gallery
image

This is from DnD UI, there are similar blocks in the StP UI.

1 Like
9

thank you…but now my doubt is, how do i put this file-name as the value of the file-input component in the HTML code of the webViewer component?..

1 Like
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>

    <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.

1 Like
11

wow…thanks a tonne :heartpulse: @muneer …
thanks really :heart_eyes:

1 Like