I want to use BootstrapUpload and I have add the d...

# kvision

[muchbeer]

I want to use BootstrapUpload and I have add the dependency below even the Module (BootstrapUploadModule) but kvision does not recognize BootstrapUpload`implementation("io.kvisionkvision bootstrap upload$kvisionVersion")`

[Robert Jaros]

What is the error?

[muchbeer]

Unresolved reference: BootstrapUpload

[muchbeer]

I can't import BootstrapUpload

[muchbeer]

implementation("io.kvision:kvision-bootstrap-upload:$kvisionVersion")

[muchbeer]

startApplication(
    ::App,
    module.hot,
    BootstrapModule,
    BootstrapCssModule,
    BootstrapUploadModule,
    FontAwesomeModule,
    TabulatorModule,
    ToastifyModule,
    CoreModule
)

[Robert Jaros]

Have you reloaded gradle project in IntelliJ after adding this dependency?

[muchbeer]

Hello @Robert Jaros this dependency was pre configure when l created the project for the first time and then when the issue continued l had to rebuild again

[Robert Jaros]

How did you create the project? Using the project wizard?

[muchbeer]

I used the project wizard and created a full stack project with ktor

[Robert Jaros]

Ok, that explains you problems ...
You are using KVision 5.8.1, because the project wizard was not yet updated to version 6.

[Robert Jaros]

There names of components changed between this major releases.

[Robert Jaros]

The documentation and current examples are already using KV6.

[Robert Jaros]

And the bootstrap upload component is now BootstrapUpload.
But in KV5 the same component was named Upload.

[Robert Jaros]

So you need to upgrade your project manually to KVision 6.0.1 or use old components names.

[Robert Jaros]

I suggest upgrading - just change the version numbers in gradle.properties to match current version:
https://github.com/rjaros/kvision-examples/blob/master/template-fullstack-ktor/gradle.properties

[Robert Jaros]

and also change JDK to 17 in build.gradle.kts
https://github.com/rjaros/kvision-examples/blob/master/template-fullstack-ktor/build.gradle.kts#L40-L43

[Robert Jaros]

And probably remove kvision-bootstrap-css from your dependencies.

[Robert Jaros]

If you have problems, you can just take the template project from kvision-examples and start from the beginning.

[muchbeer]

Okay thank you so much, let me update in a few and will let you know

[Robert Jaros]

You were unlucky to start just as the new major version came out with some breaking changes 😉 Sorry for that 🙂

[muchbeer]

No worries @Robert Jaros I am just happy am getting support

[Robert Jaros]

I've already uploaded new version of the project wizard to the marketplace, but it takes a few days do get accepted and published.

[muchbeer]

Hello @Robert Jaros

[muchbeer]

I run into another issue

[muchbeer]

yarn.lock was changed. Run the kotlinUpgradeYarnLock task to actualize yarn.lock file

[Robert Jaros]

Kotlin 1.8.0 protects you from unintentionally changing yarn.lock file. Either just delete .kotlin-js-store/yarn.lock file or run ./gradlew kotlinUpgradeYarnLock command as suggested.

[Robert Jaros]

Here is more info how to configure this bahavior:
https://kotlinlang.org/docs/whatsnew18.html#new-settings-for-reporting-that-yarn-lock-has-been-updated

[muchbeer]

Hello @Robert Jaros I manage to pull and configure the full stack project and launch my first

[muchbeer]

but I notice the frontend did not rendered the design

[Robert Jaros]

You are missing BootstrapCssModule initializer in your main() function

[muchbeer]

I remember you said to remove kvision-bootstrap-css dependency I guess I should add it now

[Robert Jaros]

no

[Robert Jaros]

remove module dependency but keep module initializer

[muchbeer]

Okay

[Robert Jaros]

there can be more than one module initializer in a single module in KV6

[Robert Jaros]

kvision-bootstrap has two: BootstrapModule and BootstrapCssModule

[muchbeer]

Thanks

[Robert Jaros]

I think those initializers should no longer be called "module initializers" 😉

[muchbeer]

it worked thanks now I have created a server using ktor koin and front end when I run I am getting the below error

[muchbeer]

@Robert Jaros am getting

[muchbeer]

[HPM] Error occurred while proxying request 192.168.31.23:5080/kv/routeAcreUssdFarmerSelectServiceManager0 to <http://localhost:5080/> [ENOBUFS]

[muchbeer]

@Please assist

[Robert Jaros]

did you start the server?

[Robert Jaros]

I see you are using non-standard ports

[Robert Jaros]

check proxy configuration in your build.gradle.kts

[Robert Jaros]

devServer = KotlinWebpackConfig.DevServer(
                    open = false,
                    port = 3000,
                    proxy = mutableMapOf(
                        "/kv/*" to "<http://localhost:8080>",
                        "/kvws/*" to mapOf("target" to "<ws://localhost:8080>", "ws" to true)
                    ),
                    static = mutableListOf("$buildDir/processedResources/frontend/main")
                )

[Robert Jaros]

this is configuration where the frontend is running by webpack on port 3000 and the backend is on 8080

[Robert Jaros]

if you have changed port numbers you need to adjust this configuration

[muchbeer]

Thanks

[muchbeer]

This is helpful

[muchbeer]

Hello @Robert Jaros Good morning, I was able to setup everything and now I can pull information from the server and display

[muchbeer]

Today I want to work on Kfile and upload the project on Heroku I have few concern about Kfile

[muchbeer]

if I upload the document using BootstrapUpload and and be able to retrieve the Kfile, what is the location of this file, how can I get the path of the Kfile because I only see you can retrieve file name, content and size only

[Robert Jaros]

You can't retrieve the location of the file. This is a browser restriction.

[Robert Jaros]

Website programming is fundamentally different in some aspects from programming, e.g. desktop or Android, and working with files is one of the most important differences.

[Robert Jaros]

The browser lets the user select the file, but the file need to be uploaded to the server to be processed.

[Robert Jaros]

You can select multiple files, with some options you can automatically select all files from the directory, but the actual location of files on the client machine is not sent to the server.

[Robert Jaros]

A typical process looks like this (at least this is how I do it):
1. User select the file (or files)
2. The client app sends files to the server.
3. The server processes files e.g by creating some other file data.
4. The server makes the resulting data available at some URL (e.g. using randomly generated token)
5. The server sends back the token to the client application
6. The application redirects the browser to the url to download the result file to the client machine

[muchbeer]

1. The client app sends files to the server.
This file is in base64 right?

[Robert Jaros]

yes

[Robert Jaros]

it's in fact data-url encoded

[Robert Jaros]

it contains contenty type as well

[Robert Jaros]

https://github.com/rjaros/kvision/blob/master/kvision-modules/kvision-common-types/src/jvmMain/kotlin/io/kvision/types/KFileExt.kt#L42

[Robert Jaros]

here is ready to use extension function to decode KFile into content type and bytearray

[muchbeer]

wow thank you so much, this extension has made my day, I will be finished the processing very soon

[muchbeer]

thank you @Robert Jaros

[muchbeer]

Hello @Robert Jaros finally I did process the file at the backend

[muchbeer]

thank you

[muchbeer]

now I want to set allowedFileTypes in the bootstrapUpload to accept only excel files only

[muchbeer]

kindly help

[muchbeer]

I know for image is allowedFileTypes = "image"

[Robert Jaros]

I think you should try allowedFileExtensions = setOf("xls", "xlsx")

[muchbeer]

thank you

[muchbeer]

if I put setOf("xls", "xlsx") it is still rejecting

[Robert Jaros]

Are you sure you are using allowedFileExtensions = setOf("xls", "xlsx") and not allowedFileTypes = setOf("xls", "xlsx") ?

[Robert Jaros]

allowedFileExtensions works fine for me (just tested on Firefox and Chrome)