API File Upload Action - NodeJS & PHP [Open Source]

sid · January 27, 2021, 3:05pm

Yo,

Wappler provides a default API Action module in Server Action to call APIs. But it does not have the option to upload files. With this custom module, we extend Wappler to have this option as well. We have provided as many options we could from the original component here. This module is available for both PHP & NodeJS server models.

Almost all options are explained using help texts. Please make sure to read them.
Here is the full source and documentation:
NodeJS: https://gitlab.com/wappler-extensions/api-file-upload-action-nodejs
PHP: https://gitlab.com/wappler-extensions/api-file-upload-action-php

For NodeJS, you will have to install two packages - node-fetch & form-data.
For details on how to integrate custom modules in your Wappler project, please refer the help doc here.

The repository comes with a bunch of examples on how this library can be used.

Feel free to reports bugs or improvements or feature requests.
This is our first time releasing an Open Source Git repository - if you have any critical feedback we’d be happy to hear.

Thanks,
Team /#

mebeingken · January 27, 2021, 3:24pm

Thanks for posting @sid

You might consider adding a license to the repository so people know the terms of using this.

sid · January 27, 2021, 3:26pm

Thanks for the suggestion. Will do.

Max_Saravia · January 27, 2021, 8:22pm

Hi, thnks for share! this is very useful!. I think may be @George can incorporate this to the core of Wappler? Since I have seen that it is a highly requested functionality in the community.

JonL · January 27, 2021, 8:25pm

Now in the right topic! Thanks @sid for sharing ! Great one.

sid · January 28, 2021, 1:32am

Thanks for the feedback.
I remember having this discussion with Patrick a long time ago. There was a compatibility issue with ASP .NET… And all components at that time were common among all server models. Now that we see some server specific components (like sockets), this could also get added.
But, it would be wise to wait for some time to iron out any issues community finds with this.

JonL · March 3, 2021, 8:30am

Hey guys,

It would provide better visibility if you add the docs to the readme.md file so you don’t have to download and run the full project in order to understand all the possibilities as explained in the examples.

Alternative: Gitlab wiki.

sid · March 3, 2021, 8:34am

Thanks for the input. We did not realise this until after a few days… and then just couldn’t get to it.
Will try to add a readme asap to all the extensions.

salvuccicarlos · April 1, 2021, 12:19pm

Thanks for this post!

I’m having some trouble though… My API needs to send a binary file and the API’s server is responding:

invalid json response body at https://xxxxx.cognitiveservices.azure.com/formrecognizer/v2.1-preview.3/custom/models/b8d18c9a-b02a-493b-bf72-e0b8c3e1d492/analyze?modelId=b8d18c9a-b02a-493b-bf72-e0b8c3e1d492 reason: Unexpected end of JSON input

Any ideas? I’m using Microsoft Form Recognizer services.

The Form Recognizer API webpage is: https://brazilsouth.dev.cognitive.microsoft.com/docs/services/form-recognizer-api-v2-1-preview-3/operations/AnalyzeWithCustomForm

sid · April 1, 2021, 1:39pm

Does the error have status code 415?

If it is, you try setting the content-type from the UI.

salvuccicarlos · April 1, 2021, 1:53pm

No, it’s status code error 500

message: “invalid json response body at https://estudiobts.cognitiveservices.azure.com/formrecognizer/v2.1-preview.3/custom/models/b8d18c9a-b02a-493b-bf72-e0b8c3e1d492/analyze?modelid=b8d18c9a-b02a-493b-bf72-e0b8c3e1d492 reason: Unexpected end of JSON input”
stack: “FetchError: invalid json response body at https://estudiobts.cognitiveservices.azure.com/formrecognizer/v2.1-preview.3/custom/models/b8d18c9a-b02a-493b-bf72-e0b8c3e1d492/analyze?modelid=b8d18c9a-b02a-493b-bf72-e0b8c3e1d492 reason: Unexpected end of JSON input↵ at /opt/node_app/node_modules/node-fetch/lib/index.js:272:32↵ at processTicksAndRejections (internal/process/task_queues.js:97:5)↵ at async App.exports.APIFileUploadAction (/opt/node_app/extensions/server_connect/modules/FileUploadModule.js:170:16)↵ at async App._exec (/opt/node_app/lib/core/app.js:429:30)↵ at async App._exec (/opt/node_app/lib/core/app.js:400:17)↵ at async App.exec (/opt/node_app/lib/core/app.js:369:9)↵ at async App.define (/opt/node_app/lib/core/app.js:359:9)”
status: “500”

sid · April 1, 2021, 2:06pm

Looks like a response body issue.
The Azure API most likely worked.
Is there way for you to verify is the request went through in the Azure portal?

Also, what is the response type of this request? Most likely its not JSON, which is the only thing supported right now, hence the error from the custom library - that it cannot understand the response received from the Azue API.

You can modify the library itself to handle the different type of response.

salvuccicarlos · April 1, 2021, 3:31pm

I don’t know how could I verify the request in the Azure portal. I know it has been sent because it shows the error in the form recognizer activity log but I can’t get more than the information shown above.

I’m going to check on the azure community…

Thanks!

Kodiak · January 28, 2022, 2:21am

@sid

Hey Sid,

Having issues getting this beast to work… I get the following error. Any thoughts on this?

Tried to copy the files into an existing project so not sure if somethings missing.

Cheers!

{“status”:“500”,“message”:“Cannot use import statement outside a module”,“stack”:"/Users/robbydiederich/shipping box calculator/extensions/server_connect/modules/FileUploadModule.js:3\nimport FormData from “form-data”;\n^^^^^^\n\nSyntaxError: Cannot use import statement outside a module\n at Object.compileFunction (node:vm:352:18)\n at wrapSafe (node:internal/modules/cjs/loader:1026:15)\n at Module._compile (node:internal/modules/cjs/loader:1061:27)\n at Object.Module._extensions…js (node:internal/modules/cjs/loader:1149:10)\n at Module.load (node:internal/modules/cjs/loader:975:32)\n at Function.Module._load (node:internal/modules/cjs/loader:822:12)\n at Module.require (node:internal/modules/cjs/loader:999:19)\n at require (node:internal/modules/cjs/helpers:102:18)\n at App._exec (/Users/robbydiederich/shipping box calculator/lib/core/app.js:467:30)\n at App._exec (/Users/robbydiederich/shipping box calculator/lib/core/app.js:452:28)"}

sid · January 28, 2022, 4:26am

Hi.
There is no import statement in the extension, only require. Have you made any changes to the FileUploadModule.js file?
Also, just to sure, check if your package.json file has required packages listed - node-fetch & form-data.

Kodiak · January 28, 2022, 2:42pm

Hey Sid,

I did modify it when testing.

This is the error I have been getting otherwise about an ESM Module

{“status”:“500”,“code”:“ERR_REQUIRE_ESM”,“message”:“require() of ES Module /Users/robbydiederich/shipping box calculator/node_modules/node-fetch/src/index.js from /Users/robbydiederich/shipping box calculator/extensions/server_connect/modules/FileUploadModule.js not supported.\nInstead change the require of index.js in /Users/robbydiederich/shipping box calculator/extensions/server_connect/modules/FileUploadModule.js to a dynamic import() which is available in all CommonJS modules.”,“stack”:“Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/robbydiederich/shipping box calculator/node_modules/node-fetch/src/index.js from /Users/robbydiederich/shipping box calculator/extensions/server_connect/modules/FileUploadModule.js not supported.\nInstead change the require of index.js in /Users/robbydiederich/shipping box calculator/extensions/server_connect/modules/FileUploadModule.js to a dynamic import() which is available in all CommonJS modules.\n at Object. (/Users/robbydiederich/shipping box calculator/extensions/server_connect/modules/FileUploadModule.js:2:15)\n at App._exec (/Users/robbydiederich/shipping box calculator/lib/core/app.js:467:30)\n at App._exec (/Users/robbydiederich/shipping box calculator/lib/core/app.js:452:28)\n at async App.exec (/Users/robbydiederich/shipping box calculator/lib/core/app.js:421:9)\n at async App.define (/Users/robbydiederich/shipping box calculator/lib/core/app.js:411:9)”}

sid · January 28, 2022, 4:06pm

Interesting. Haven’t seen such an error before.
What version of Wappler are you using?
Also, did you do a reintall of node packages?

Kodiak · January 28, 2022, 5:05pm

Running most recent 4.5.1 of wappler did full rebuild been having this issue for past 3 versions of wappler too so never got this to work yet.

In a quick Google search says…

“ node-fetch latest version doesn’t use require() syntax to import the package. You need to go to your package.json and type

 { 
   "type": "module",
 }

to use the import syntax and import node-fetch , but then you can’t use require for any other packages you need to work with import statement only.

Or you can use other packages such as Gotor Axios which can be imported by require() syntax.”

sid · January 28, 2022, 5:09pm

Did not know that. Thanks for the info.

So you just need to install version 2 to get it to work, instead of just doing npm install node-fetch.

@patrick Can you please comment on how to work with ESM in custom modules?

cpuser · May 13, 2022, 3:13pm

Having difficulty installing the extension. PHP server model and I downloaded “FileUploadModule.php” and installed it in the extensions modules folder. But when I then go search for it in the Extension section in Wappler, it does not appear. Is there any other configuration/installation I have to do?