1.0 Custom extension Tutorial
Building on the excellent initial work of @mebeingken & @jellederijke i have added additional functionality to deal with APIs which do not return a correct file extension.
Initially developed to deal with the qrserver.com API, this extension extends GetFileFromAPI, which allows for custom filenames, to also allow forcing of an extension such as .png etc where the API call does not return an extension correctly
This extension now returns both the filename and the web path to the file.
This extension can download all types of file however for the purpose of this tutorial we shall deal with images.
2.0 Installation
Go to Project Settings and select the Extensions tab
Select “+” to add Extension
enter the extension name, @hyperbytes/wappler-get-file-from-url-or-api
Enter the extension name and click “Save”
The extension should appear in the extensions screen
Click “Save” in the Project Options
The extension will be installed, the progress can be viewed in the Output wiindow
2.1 Activating the extension
To activate the extension it is essential to COMPLETELY quit Wappler, a simple restart form the tray icon is insufficient. If unsure how to do this then simply restart your computer.
3.0 Using the extension
Select Workflows
Create a new API, i call mine “getfile”
add an action
Select API Connector, you should see an icon “Get file from API”
Click to add this to your API action
The action will be added
3.1 The basic file download
Give the action a name, this is mandatory, i call it “myfile”
The save path is the path to which you want to save your file. This would typically be into your public folder, i select /public/assets/uploads
NOTE, the folder must already exist, this extension will not create the folder and if the folder is not present the action will return an error! If necessary add a File Management -> Create folder action before using this extension including with dynamic paths
I then enter the URL of an image from another site, in this case I choose an image from the Wappler website, “https://wappler.io/assets/img/features/ft-design-1.jpg” and check Output to allow the image name and web path to be returned from the API action
** NOTE the returned path will mirror the input path trailing slash, “/public/assets” returns “/assets”, “/public/assets/” returns “/assets/”
I run this directly from the APi action screen
You can see the output in the browser screen
{"myfile":{"file_name":"ft-design-1.jpg","path":"/assets/uploads"}}
The file has been downloaded from the URL and placed in the selected folder
3.2 Giving you file a custom name
Check the Allow Custom Filename checkbox
This reveals a Custom Filename input and a new checkbox “Allow Force Extension” which we will deal with later.
Enter a filename, i use “mynewfile”, DO NOT enter an extension!
Save the Action and again run from the action panel
We see from the output the file has been renamed to “mynewfile.jpg”
{"myfile":{"file_name":"mynewfile.jpg","path":"/assets/uploads"}}
3.2 Downloading from an API source
In this example I shall use api.qrserver.com to return a QR Code image pointing to an URL
I use the endpoint
https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=https:wappler.io
to create a QR code pointing to wappler.io
I add this to the API action and remove the custom filename
and run the action for the action screen
I see an error (debug is currently on)
{"status":"500","code":"ENOENT","message":"ENOENT: no such file or directory, open 'E:\\webs\\getfile-tutorial\\public\\assets\\uploads\\?size=150x150&data=https:wappler.io'","stack":"Error: ENOENT: no such file or directory, open 'E:\\webs\\getfile-tutorial\\public\\assets\\uploads\\?size=150x150&data=https:wappler.io'"}
This is because the API does not return a properly formed filename
I add a custom filename, “myqrcode”
and run from the action screen
The action runs BUT we can see the extension is not an image extension as the API has returned an incorrect extension
{"myfile":{"file_name":"myqrcode.io","path":"/assets/uploads"}}
Ther file is downloaded with the incorrect extension
renaming the file to myqrcode.png shown the file is valid, just the extension is correct
3.3 Forcing a custom file extension
To correct this we use the “Allow Force Extension” option
which opens another input box, i enter “.png”
and save the action
I run it from the action screen
We see the desired filename is now returned
and the file is downloaded correctly
{"myfile":{"file_name":"myqrcode.png","path":"/assets/uploads"}}
3.4 Downloading PDFs
In this case I enter the URL of a dummy PDF stored on w3.org, https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf
We run the action and view the output
{"myfile":{"file_name":"dummy.pdf","path":"/assets/uploads"}}
and can view the file in the folder
4.0 Summary
This extension can be used to download pretty much any filetype.
Again, thanks to @mebeingken and @jellederijke for the donor code for this extension which I could not have made possible without.
