Royale File Upload

[MikeH-2]

Hi, im trying to convert a Flash Builder(Flex) project into an Apache Royale
project for the web. and im getting stuck over file uploads. I have looked
at the samples using the FileProxy method but keep getting errors. I am
using the new 0.9.7 sdk. My code is below. Any thoughts would be great.

My mxml declaration for FileProxy

<fx:Declarations>
        <js:FileProxy id="myFileProxy"
modelChanged="FP_ModelChangedHandler(event)">
                <js:beads>
                        <js:FileBrowser id="myBrowser"/>
                        <js:FileLoader id="myLoader"/>
                        <js:FileUploaderWithResponseData id="fileUploaderWithResponseData"/>
                        <js:FileModelWithParams id="fileModelWithParams"/>
                </js:beads>
        </js:FileProxy>
</fx:Declarations>



My Actionscript: Taken from the sample file:


//called on button click
protected function
select_file_clickHandler(event:org.apache.royale.events.MouseEvent):void{
        myBrowser.browse();

}


protected function
FP_ModelChangedHandler(event:org.apache.royale.events.Event):void{
        myFileProxy.model.addEventListener("blobChanged", blobChangedHandler);
       
        trace('loading: ' +  myFileProxy.name);
        myLoader.load();

}
                       
private function blobChangedHandler(e:org.apache.royale.events.Event):void{
        var fileModel:FileModelWithParams = myFileProxy.model as
FileModelWithParams;
        fileModel.addEventListener(Event.COMPLETE,onUploadComplete);

        fileModelWithParams.setParam("username",my_user_name,fileModel.name);
        fileModelWithParams.setParam("visibility_rights",0,fileModel.name);
        fileModelWithParams.setParam("userid",67,fileModel.name);
       

fileUploaderWithResponseData.upload("https://localhost/royale/uploadfile.php");
}

// Called on upload complete
private function onUploadComplete(event:Event):void {
        trace("onUploadComplete: " + event)
}


//Error message in vscode:

TypeError: Failed to execute 'set' on 'FormData': parameter 2 is not of type
'Blob'.
    at org.apache.royale.file.beads.FileModelWithParams.setParam (c:\xampp
1.8.1\htdocs\AthenaEportfolioJSVS\bin\js-debug\org\apache\royale\file\beads\FileModelWithParams.js:57:72)
    at
components.EportfolioEvidenceTypeSelector.components_EportfolioEvidenceTypeSelector_blobChangedHandler
(c:\xampp
1.8.1\htdocs\AthenaEportfolioJSVS\src\components\EportfolioEvidenceTypeSelector.mxml:247:37)
    at
org.apache.royale.file.beads.FileModelWithParams.org.apache.royale.events.EventDispatcher.fireListeners
(c:\xampp
1.8.1\htdocs\AthenaEportfolioJSVS\bin\js-debug\org\apache\royale\events\EventDispatcher.js:117:24)
    at Function.goog.events.EventTarget.dispatchEventInternal_ (c:\xampp
1.8.1\htdocs\AthenaEportfolioJSVS\bin\js-debug\library\closure\goog\events\eventtarget.js:382:27)
    at
org.apache.royale.file.beads.FileModelWithParams.org.apache.royale.events.EventDispatcher.dispatchEvent
(c:\xampp
1.8.1\htdocs\AthenaEportfolioJSVS\bin\js-debug\org\apache\royale\events\EventDispatcher.js:80:38)
    at org.apache.royale.file.beads.FileModelWithParams.set__fileContent
(c:\xampp
1.8.1\htdocs\AthenaEportfolioJSVS\bin\js-debug\org\apache\royale\file\beads\FileModelWithParams.js:67:9)
    at org.apache.royale.file.beads.FileLoader.fileLoadHandler (c:\xampp
1.8.1\htdocs\AthenaEportfolioJSVS\bin\js-debug\org\apache\royale\file\beads\FileLoader.js:60:71)
    at Function.goog.events.fireListener [as googFireListener] (c:\xampp
1.8.1\htdocs\AthenaEportfolioJSVS\bin\js-debug\library\closure\goog\events\events.js:753:22)
    at Object.org.apache.royale.core.ElementWrapper.fireListenerOverride [as
fireListener] (c:\xampp
1.8.1\htdocs\AthenaEportfolioJSVS\bin\js-debug\org\apache\royale\core\ElementWrapper.js:62:52)
    at FileReader.goog.events.handleBrowserEvent_ (c:\xampp
1.8.1\htdocs\AthenaEportfolioJSVS\bin\js-debug\library\closure\goog\events\events.js:879:23)



--
Sent from: http://apache-flex-development.2333347.n4.nabble.com/

[MikeH-2]

Ok, i got it working by removing the third parameter

fileModelWithParams.setParam("username",my_user_name,fileModel.name);

and changed to:

fileModelWithParams.setParam("username",my_user_name);

Seems to have worked.



--
Sent from: http://apache-flex-development.2333347.n4.nabble.com/

[yishayw]

Does the emulation example [1] work for you?

[1] https://github.com/apache/royale-asjs/blob/develop/examples/mxroyale/FileReference/src/main/royale/FileReference.mxml

From: MikeH<mailto:[hidden email]>
Sent: Friday, May 29, 2020 10:05 PM
To: [hidden email]<mailto:[hidden email]>
Subject: Royale File Upload

Hi, im trying to convert a Flash Builder(Flex) project into an Apache Royale
project for the web. and im getting stuck over file uploads. I have looked
at the samples using the FileProxy method but keep getting errors. I am
using the new 0.9.7 sdk. My code is below. Any thoughts would be great.

My mxml declaration for FileProxy

<fx:Declarations>
        <js:FileProxy id="myFileProxy"
modelChanged="FP_ModelChangedHandler(event)">
                <js:beads>
                        <js:FileBrowser id="myBrowser"/>
                        <js:FileLoader id="myLoader"/>
                        <js:FileUploaderWithResponseData id="fileUploaderWithResponseData"/>
                        <js:FileModelWithParams id="fileModelWithParams"/>
                </js:beads>
        </js:FileProxy>
</fx:Declarations>



My Actionscript: Taken from the sample file:


//called on button click
protected function
select_file_clickHandler(event:org.apache.royale.events.MouseEvent):void{
        myBrowser.browse();

}


protected function
FP_ModelChangedHandler(event:org.apache.royale.events.Event):void{
        myFileProxy.model.addEventListener("blobChanged", blobChangedHandler);

        trace('loading: ' +  myFileProxy.name);
        myLoader.load();

}

private function blobChangedHandler(e:org.apache.royale.events.Event):void{
        var fileModel:FileModelWithParams = myFileProxy.model as
FileModelWithParams;
        fileModel.addEventListener(Event.COMPLETE,onUploadComplete);

        fileModelWithParams.setParam("username",my_user_name,fileModel.name);
        fileModelWithParams.setParam("visibility_rights",0,fileModel.name);
        fileModelWithParams.setParam("userid",67,fileModel.name);


fileUploaderWithResponseData.upload("https://localhost/royale/uploadfile.php");
}

// Called on upload complete
private function onUploadComplete(event:Event):void {
        trace("onUploadComplete: " + event)
}


//Error message in vscode:

TypeError: Failed to execute 'set' on 'FormData': parameter 2 is not of type
'Blob'.
    at org.apache.royale.file.beads.FileModelWithParams.setParam (c:\xampp
1.8.1\htdocs\AthenaEportfolioJSVS\bin\js-debug\org\apache\royale\file\beads\FileModelWithParams.js:57:72)
    at
components.EportfolioEvidenceTypeSelector.components_EportfolioEvidenceTypeSelector_blobChangedHandler
(c:\xampp
1.8.1\htdocs\AthenaEportfolioJSVS\src\components\EportfolioEvidenceTypeSelector.mxml:247:37)
    at
org.apache.royale.file.beads.FileModelWithParams.org.apache.royale.events.EventDispatcher.fireListeners
(c:\xampp
1.8.1\htdocs\AthenaEportfolioJSVS\bin\js-debug\org\apache\royale\events\EventDispatcher.js:117:24)
    at Function.goog.events.EventTarget.dispatchEventInternal_ (c:\xampp
1.8.1\htdocs\AthenaEportfolioJSVS\bin\js-debug\library\closure\goog\events\eventtarget.js:382:27)
    at
org.apache.royale.file.beads.FileModelWithParams.org.apache.royale.events.EventDispatcher.dispatchEvent
(c:\xampp
1.8.1\htdocs\AthenaEportfolioJSVS\bin\js-debug\org\apache\royale\events\EventDispatcher.js:80:38)
    at org.apache.royale.file.beads.FileModelWithParams.set__fileContent
(c:\xampp
1.8.1\htdocs\AthenaEportfolioJSVS\bin\js-debug\org\apache\royale\file\beads\FileModelWithParams.js:67:9)
    at org.apache.royale.file.beads.FileLoader.fileLoadHandler (c:\xampp
1.8.1\htdocs\AthenaEportfolioJSVS\bin\js-debug\org\apache\royale\file\beads\FileLoader.js:60:71)
    at Function.goog.events.fireListener [as googFireListener] (c:\xampp
1.8.1\htdocs\AthenaEportfolioJSVS\bin\js-debug\library\closure\goog\events\events.js:753:22)
    at Object.org.apache.royale.core.ElementWrapper.fireListenerOverride [as
fireListener] (c:\xampp
1.8.1\htdocs\AthenaEportfolioJSVS\bin\js-debug\org\apache\royale\core\ElementWrapper.js:62:52)
    at FileReader.goog.events.handleBrowserEvent_ (c:\xampp
1.8.1\htdocs\AthenaEportfolioJSVS\bin\js-debug\library\closure\goog\events\events.js:879:23)



--
Sent from: http://apache-flex-development.2333347.n4.nabble.com/

[MikeH-2]

Hi Yishayw,

That looks very much like the code I have in my Flex code that I compile as
an Air Application.
The Application I am building at the moment is a <j:Application> using the
Jewel components and I couldnt get FileReference to work as it would not
compile so I went with FileProxy.

Maybe I am doing something wrong in my asconfig file? I have it set as
JSRoyale in my target.

{
        "compilerOptions": {
                "targets": [
            "SWF","JSRoyale"
        ],
                "source-path": [
                        "src"
                ],
                "library-path": [
            "${royalelib}/js/libs/MXRoyaleJS.swc"
        ],
        "js-library-path": [
            "${royalelib}/js/libs/MXRoyaleJS.swc"
                ],
                "source-map": true,
                "use-network": true,
                "show-unused-type-selector-warnings": true,
                "use-resource-bundle-metadata": true,
                "benchmark": false,
                "warnings": true,
                "verbose-stacktraces": false,
                "optimize": false,
                "static-link-runtime-shared-libraries": false
        },
        "files": [
                "src/royaleJSVS.mxml"
        ],
       
        "additionalOptions":
"-theme=${royalelib}/themes/JewelTheme/src/main/resources/defaults.css
-html-template=src/resources/jewel-index-template.html
-js-dynamic-access-unknown-members=true"
}



--
Sent from: http://apache-flex-development.2333347.n4.nabble.com/

[Carlos Rovira-3]

Hi Mike,

I know some people reported success using FileReference in a Jewel
application, so that works for sure.
If you're having trouble more than put asconfig you should give more info
about the error you are getting.

thanks


El dom., 31 may. 2020 a las 16:14, MikeH
(<[hidden email]>) escribió:

> Hi Yishayw,
>
> That looks very much like the code I have in my Flex code that I compile as
> an Air Application.
> The Application I am building at the moment is a <j:Application> using the
> Jewel components and I couldnt get FileReference to work as it would not
> compile so I went with FileProxy.
>
> Maybe I am doing something wrong in my asconfig file? I have it set as
> JSRoyale in my target.
>
> {
>         "compilerOptions": {
>                 "targets": [
>             "SWF","JSRoyale"
>         ],
>                 "source-path": [
>                         "src"
>                 ],
>                 "library-path": [
>             "${royalelib}/js/libs/MXRoyaleJS.swc"
>         ],
>         "js-library-path": [
>             "${royalelib}/js/libs/MXRoyaleJS.swc"
>                 ],
>                 "source-map": true,
>                 "use-network": true,
>                 "show-unused-type-selector-warnings": true,
>                 "use-resource-bundle-metadata": true,
>                 "benchmark": false,
>                 "warnings": true,
>                 "verbose-stacktraces": false,
>                 "optimize": false,
>                 "static-link-runtime-shared-libraries": false
>         },
>         "files": [
>                 "src/royaleJSVS.mxml"
>         ],
>
>         "additionalOptions":
> "-theme=${royalelib}/themes/JewelTheme/src/main/resources/defaults.css
> -html-template=src/resources/jewel-index-template.html
> -js-dynamic-access-unknown-members=true"
> }
>
>
>
> --
> Sent from: http://apache-flex-development.2333347.n4.nabble.com/
>

--
Carlos Rovira
http://about.me/carlosrovira