# WEB API Firebase Storage It does not upload the file to the server

**URL:** <https://community.thunkable.com/t/web-api-firebase-storage-it-does-not-upload-the-file-to-the-server/2369895>\
**Category:** Web API's\
**Tags:** firebase, database, beginner, help, storage\
**Created:** [April 13, 2023, 4:49am UTC](https://community.thunkable.com/t/web-api-firebase-storage-it-does-not-upload-the-file-to-the-server/2369895 "2023-04-13T04:49:47Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![whiterabbitstudio202](https://avatars.discourse-cdn.com/v4/letter/w/8dc957/32.png) [@whiterabbitstudio202](https://community.thunkable.com/u/whiterabbitstudio202)\
**Post date:** [April 13, 2023, 4:49am UTC](https://community.thunkable.com/t/web-api-firebase-storage-it-does-not-upload-the-file-to-the-server/2369895/1 "2023-04-13T04:49:47Z")

</div>

Good morning. This is my first post. I probably wouldn’t write it if it wasn’t for the problem in thunkable, I can’t upload the file to fibase storage. I am using the web api but only the minimum capacity file is created but the file itself is not uploaded. This is a file directly from the camera, but when I tried to send the same file, the effect is the same. Maybe I have something wrong in the header. Ask for help from advanced colleagues.

 ![for2](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/d/fd9f325e8ec045612cff9b53c4b0a5114d9536bf.jpeg)  
 ![for1](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/a/0a6829d1644a84dd436cadc9987653f586e969f6.jpeg)

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [April 13, 2023, 3:06pm UTC](https://community.thunkable.com/t/web-api-firebase-storage-it-does-not-upload-the-file-to-the-server/2369895/2 "2023-04-13T15:06:01Z")

</div>

When you post a question, you need to include screenshots of your blocks and/or a link to your project.

---

<div class="post-metadata">

**Author:** ![whiterabbitstudio202](https://avatars.discourse-cdn.com/v4/letter/w/8dc957/32.png) [@whiterabbitstudio202](https://community.thunkable.com/u/whiterabbitstudio202)\
**Post date:** [April 13, 2023, 10:32pm UTC](https://community.thunkable.com/t/web-api-firebase-storage-it-does-not-upload-the-file-to-the-server/2369895/3 "2023-04-13T22:32:15Z")

</div>

I had screenshots ready, forgot to upload them.

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [April 14, 2023, 11:24am UTC](https://community.thunkable.com/t/web-api-firebase-storage-it-does-not-upload-the-file-to-the-server/2369895/4 "2023-04-14T11:24:33Z")

</div>

Hello @whiterabbitstudio202  
I’ve already created an app that uses the API Block to send an image file.  
I used Web Viewer and HTML code to convert the image file to base64 and then send it through the API.

This is the code for HTML:

```auto
<!DOCTYPE html>
<html>
<body style="background-color:#18A2EB;">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Convert local file to Base64</title>
    <script 
    src="https://thunkable.github.io/webviewer-extension/thunkableWebviewerExtension.js"
    type="text/javascript"></script>
    <style>
      .choose::-webkit-file-upload-button {
        color: white;
        display: inline-block;
        background: #1CB6E0;
        border: none;
        padding: 7px 15px;
        font-weight: 700;
        border-radius: 3px;
        white-space: nowrap;
        cursor: pointer;
        font-size: 10pt;
      }
    </style>
  </head>
  <body>
    <input type="file" accept="image/*" class="choose" onchange="encodeImageFileAsURL(this)" />
    <script>
      function encodeImageFileAsURL(element) {
        let file = element.files[0];
        let reader = new FileReader();
        reader.onloadend = function() {
          ThunkableWebviewerExtension.postMessage(reader.result);
          document.write('RESULT: ', reader.result);
        }
        reader.readAsDataURL(file);
      }
    </script>
  </body>
</html>

```

You can find the project [here](https://x.thunkable.com/projects/6439364670a0fe62a9e6edf7/5b9ddc5e-5b0a-44ae-8c4c-f047c0fb634e/settings)

---

<div class="post-metadata">

**Author:** ![whiterabbitstudio202](https://avatars.discourse-cdn.com/v4/letter/w/8dc957/32.png) [@whiterabbitstudio202](https://community.thunkable.com/u/whiterabbitstudio202)\
**Post date:** [April 16, 2023, 1:05pm UTC](https://community.thunkable.com/t/web-api-firebase-storage-it-does-not-upload-the-file-to-the-server/2369895/5 "2023-04-16T13:05:22Z")

</div>

This method works, but it doesn’t quite send the data stream to the created file, but the file has errors and I can’t open the image.

 ![for1](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/a/6acecae64962e47ef8d554d3eaa0292a6b49d591.jpeg)

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [April 16, 2023, 3:26pm UTC](https://community.thunkable.com/t/web-api-firebase-storage-it-does-not-upload-the-file-to-the-server/2369895/6 "2023-04-16T15:26:06Z")

</div>

The interesting thing is that when I use your script, @ioannis, it returns a base64 image string starting with "RESULT: ". If I manually remove that and assign the rest of the string to an image, it displays the image. But if I use a text block to remove that text, it fails to display the image.

Modified project: [Thunkable](https://x.thunkable.com/copy/1bf8ff4fd65b1116f682cf5f90105b18)

---

<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:** [April 16, 2023, 9:14pm UTC](https://community.thunkable.com/t/web-api-firebase-storage-it-does-not-upload-the-file-to-the-server/2369895/7 "2023-04-16T21:14:20Z")

</div>

Google storage requires the following format

```auto
curl -X POST --data-binary @OBJECT_LOCATION \
    -H "Authorization: Bearer OAUTH2_TOKEN" \
    -H "Content-Type: OBJECT_CONTENT_TYPE" \
    "https://storage.googleapis.com/upload/storage/v1/b/BUCKET_NAME/o?uploadType=media&name=OBJECT_NAME"

```

The screenshot is not showing all required fields.

---

<div class="post-metadata">

**Author:** ![whiterabbitstudio202](https://avatars.discourse-cdn.com/v4/letter/w/8dc957/32.png) [@whiterabbitstudio202](https://community.thunkable.com/u/whiterabbitstudio202)\
**Post date:** [May 1, 2023, 1:09pm UTC](https://community.thunkable.com/t/web-api-firebase-storage-it-does-not-upload-the-file-to-the-server/2369895/8 "2023-05-01T13:09:07Z")

</div>

thanks for the tips it helped me a lot

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [May 1, 2023, 7:49pm UTC](https://community.thunkable.com/t/web-api-firebase-storage-it-does-not-upload-the-file-to-the-server/2369895/9 "2023-05-01T19:49:31Z")

</div>

Still no base64 convert block. It’s been well over a year in the making

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [May 4, 2023, 5:34pm UTC](https://community.thunkable.com/t/web-api-firebase-storage-it-does-not-upload-the-file-to-the-server/2369895/10 "2023-05-04T17:34:09Z")

</div>

Hello @jared! Currently there are no plans to release the component you are inquiring about. I apologize for any disappointment this causes. Our team has decided, for now, not to pursue this release for some reasons. If anything changes and we release the component in the future, we will of course announce it.

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [May 4, 2023, 6:04pm UTC](https://community.thunkable.com/t/web-api-firebase-storage-it-does-not-upload-the-file-to-the-server/2369895/11 "2023-05-04T18:04:43Z")

</div>

Well how about a run JavaScript block so these janky webviewer workarounds can go out the window.

> [@WEB API Firebase Storage It does not upload the file to the server](https://community.thunkable.com/t/web-api-firebase-storage-it-does-not-upload-the-file-to-the-server/2369895/4):
>
> Hello @whiterabbitstudio202 I’ve already created an app that uses the API Block to send an image file. I used Web Viewer and HTML code to convert the image file to base64 and then send it through the API. This is the code for HTML: \<!DOCTYPE html\> \<html\> \<body style="background-color:#18A2EB;"\> \<head\> \<meta charset="UTF-8" /\> \<meta name="viewport" content="width=device-width, initial-scale=1.0" /\> \<title\>Convert local file to Base64\</title\> \<script src="https://thunkab…

It’s just so convoluted and unnecessary. I’m truly saddneddd to see that block go away, considering an api block that can send files still doesn’t exist.

When I worked for Thunkable that block was in beta, and so close to release (there was a lot in the works at the time). What happened? Seems like a lot of time wasted and hopes raised for nothing.

Can api blocks send local files yet as that was the primary need for that block anyhow?

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [May 4, 2023, 6:25pm UTC](https://community.thunkable.com/t/web-api-firebase-storage-it-does-not-upload-the-file-to-the-server/2369895/12 "2023-05-04T18:25:53Z")

</div>

> [@jared](#):
>
> Well how about a run JavaScript block so these janky webviewer workarounds can go out the window.

Yes, please!!!

> [@jared](#):
>
> Can api blocks send local files yet as that was the primary need for that block anyhow.

+1

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [May 5, 2023, 5:32pm UTC](https://community.thunkable.com/t/web-api-firebase-storage-it-does-not-upload-the-file-to-the-server/2369895/13 "2023-05-05T17:32:24Z")

</div>

Hello @jared and @tatiang!  
The JavaScript block is a good suggestion!  
I’ll pass it on to the team.  
Yes, right now there is an option on the Web API component to send local files, it is called Multipart Form Data and you can select that option on WebAPI settings

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/4/e41beeb6ac81f9b31c7f2d80a100da891decffc3.png)

Here is an example:

 ![image (62)](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/f/6f1050c13f5eabf4ac4cc707f4f2eec9a7bf6abc.png)

 ![image (63)](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/e/eeb5111b8b1c2d52b47d4cd632d97b6e9c4959ec.png)

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [May 5, 2023, 6:32pm UTC](https://community.thunkable.com/t/web-api-firebase-storage-it-does-not-upload-the-file-to-the-server/2369895/14 "2023-05-05T18:32:31Z")

</div>

> [@ioannis](#):
>
> I’ll pass it on to the team.

I’m always glad to hear that but part of my frustration that I expressed earlier this week on the forums is that existing requests often seem to go nowhere.

This idea of a programming block that could connect Thunkable to Javascript was first proposed in 2019: [[For Thunkable X] Add block "add source directly" · Issue #159 · thunkable/thunkable-issues · GitHub](https://github.com/thunkable/thunkable-issues/issues/159). So the idea is 4 years old.

A more formal feature request was made in November 2022: [A feature request for blocks that can execute JavaScript - code directly · Issue #1185 · thunkable/thunkable-issues · GitHub](https://github.com/thunkable/thunkable-issues/issues/1185). It’s been 6 months but there is no response from staff to that idea.

I know you have new staff; I’m not pointing fingers at any of you necessarily… it’s just a frustration that _as a company_ there seems to be a blind spot as far as keeping track of issues that customers care about and responding to those requests.

When there are prior requests or a beta block in the works (as @jared mentioned), it can help customers when we can see a bit of the roadmap and understand that there’s a process to how changes are made to the product instead of feeling like it’s this black box and requests just get sent to the team.

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [May 5, 2023, 6:35pm UTC](https://community.thunkable.com/t/web-api-firebase-storage-it-does-not-upload-the-file-to-the-server/2369895/15 "2023-05-05T18:35:02Z")

</div>

Is that something that can be added as a Web API block? I stay away from form properties for components because I want to be able to see all of the settings I’m using in one place (the Blocks tab). But if there was a block to specify Multipart Form Data and file:[filename] that would be really useful.

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [May 5, 2023, 8:45pm UTC](https://community.thunkable.com/t/web-api-firebase-storage-it-does-not-upload-the-file-to-the-server/2369895/16 "2023-05-05T20:45:58Z")

</div>

Can you send a file chosen from the file picker? Like an image taken from within the app and then send that in the api call?

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [May 8, 2023, 8:16pm UTC](https://community.thunkable.com/t/web-api-firebase-storage-it-does-not-upload-the-file-to-the-server/2369895/17 "2023-05-08T20:16:59Z")

</div>

@jared @tatiang  
Thank you for sharing your thoughts!  
I have asked the engineers and as soon as I have an answer I will let you know.

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [May 9, 2023, 1:19pm UTC](https://community.thunkable.com/t/web-api-firebase-storage-it-does-not-upload-the-file-to-the-server/2369895/18 "2023-05-09T13:19:19Z")

</div>

Hello @tatiang You can set the Multipart form data using the blocks as below. If the value provided to the body is an object, it by default considers it as “Mutipart form data”, you do not need to explicitly set it.

 ![image (64)](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/d/1/d1601fc18877cb290125322d64670a519d09fafd.png)

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [May 10, 2023, 8:31pm UTC](https://community.thunkable.com/t/web-api-firebase-storage-it-does-not-upload-the-file-to-the-server/2369895/19 "2023-05-10T20:31:04Z")

</div>

> [@jared](#):
>
> Can you send a file chosen from the file picker?

I confirmed that, for now, unfortunately, this is not supported.  
Once we will have this feature available, we will be sure to let you and all of our Thunkable community know.

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [May 11, 2023, 10:47am UTC](https://community.thunkable.com/t/web-api-firebase-storage-it-does-not-upload-the-file-to-the-server/2369895/20 "2023-05-11T10:47:45Z")

</div>

> [@ioannis](#):
>
> I confirmed that, for now, unfortunately, this is not supported.  
> Once we will have this feature available, we will be sure to let you and all of our Thunkable community know.

So, to be explicitly clear, at this time the feature does exist to send a file over the webAPI BUT that file needs to be packaged with the app at time of app publishing. Is that correct.

I.e. I can’t snap a photo and upload it directly to my own cloud bucket in google, I’d first still need to upload to cloudinary using media blocks, return a url, then use that url to make a permanent image link in my cloud bucket from google. Is that correct?

[Next page](https://community.thunkable.com/t/web-api-firebase-storage-it-does-not-upload-the-file-to-the-server/2369895.md?page=2)
