UI Button file reference solution in Animate cc in html5 mode

[popolino17]

Hey guys,

I would like to ask the community how to implement file reference for uploading file via ui-button component in Adobe Animate cc in canvas(HTML5) mode?

Here is scenario.

On the canvas at design time is placed ui-button with instance name browseImage_btn. 

I use these lines below to assign file type to this button with intention to browse the certain file that has to be uploaded.

$("#browseImage_btn").attr("type", "file");

$("#browseImage_btn").attr("id", "getFile");

But this code doesn't acts as i expected. There is no open file dialog box after button was clicked.

And secondly if there is solution via this type of button how to get file path of the chosen file?

Thanks

Ol

[kglad]

that's jquery code for something with id=browseImage_btn.

use the code snippets panel to see how to encode your button component.

[popolino17]

Hi kglad,

Maybe this is a step in right direction but still not the desired result.

The Code Snippets panel  under User Interface > Button Click Event generates just these lines:

     if(!this.browseImage_btn_click_cbk) {

          function browseImage_btn_click(evt) {

               // Start your custom code

               console.log("Button clicked");

               // End your custom code

          }

     $("#dom_overlay_container").on("click", "#browseImage_btn", browseImage_btn_click.bind(this));

     this.browseImage_btn_click_cbk = true;

     }

I need to upload a file using ui-button just like input button does but in canvas mode.

Thanks

ol

[kglad]

do you see the comments about where to insert your custom code?

that's where you should add your upload file code.

[popolino17]

Hi, again,

Uploading process consists of two steps -

1. Choosing file - by the user?

2. Call Business logic/routines - something like upload.php by passing which file to be uploaded to it.

I have my code for the second step. I'm stuck in the first step - How to get file open dialog?

Thanks

[kglad · Accepted solution]

use:

     if(!this.browseImage_btn_click_cbk) {

          function browseImage_btn_click(evt) {

               // Start your custom code

            select.click();

               // End your custom code

          }

     $("#dom_overlay_container").on("click", "#browseImage_btn", browseImage_btn_click.bind(this));

     this.browseImage_btn_click_cbk = true;

     }

var select=document.createElement('input');

select.setAttribute('type','file');

[popolino17]

You helped me again, kglad!

Thanks for that

All the best.

[kglad]

you're welcome.

[popolino17]

Hi kglad,

Sorry for my asking help again but we couldn't complete the task.

Is this correct ?

function setupBrowseButton(){

    if(!this.browseImage_btn_click_cbk) {

          function browseImage_btn_click(evt) {

            select.click();

           var imgFileName = document.getElementById("fName").files[0].name;

          }

    $("#dom_overlay_container").on("click", "#browseImage_btn", browseImage_btn_click.bind(this));

this.browseImage_btn_click_cbk = true;

    }

var select = document.createElement("input");

select.setAttribute("type","file");

select.setAttribute("id","fName");

};

The selected file name have to be identified.

So, i'm setting attribute to "select" variable and then i set variable imgFileName.

Is this correct?

[kglad]

what's fName and where is it?

[popolino17]

In this case fName is just an ID of "select" variable you defined in the code above.

Actually, final goal is to get file name of the selected file.

The question is how?

[kglad]

i see now.  use:

function setupBrowseButton(){

    if(!this.browseImage_btn_click_cbk) {

          function browseImage_btn_click(evt) {

            select.click();

changeF=function(){

alert('selected file name: ' + select.files.item(0).name);

alert('selected file size: ' + select.files.item(0).size);

alert('selected file type: ' + select.files.item(0).type);

}

          }

    $("#dom_overlay_container").on("click", "#browseImage_btn", browseImage_btn_click.bind(this));

this.browseImage_btn_click_cbk = true;

    }

var select = document.createElement("input");

select.setAttribute("type","file");

select.setAttribute("id","fName");

select.setAttribute('onchange','changeF()');

};

[popolino17]

kglad, thanks for your valuable efforts. We are done the completion.

What i think is that you just  present very very best solution for usage of UI-BUTTON for file uploading with CREATEJS coding for every Adobe Animate cc coders in canvas mode.

This is priceless.

Thank You!

PS:

I decided to show all components for other coders.

In your code i add line in red to call function uploadImage() with parameter select.files[0]

function browseImage_btn_click(evt) {

     if (!this.browseImage_btn_click_cbk) {

select.click();

changeF = function () {

uploadImage(select.files[0]);

//alert('selected file name: ' + select.files.item(0).name);

//alert('selected file size: ' + select.files.item(0).size);

//alert('selected file type: ' + select.files.item(0).type);

}

}

$("#dom_overlay_container").on("click", "#browseImage_btn", browseImage_btn_click.bind(this));

this.browseImage_btn_click_cbk = true;

}

var select = document.createElement("input");

select.setAttribute("type", "file");

select.setAttribute("id", "fName");

select.setAttribute('onchange','changeF()');

};

And here is uploadImage(file);

function uploadImage(file) {

var url = "upload.php";

var xhr = new XMLHttpRequest();

    var fd = new FormData();

    xhr.open("POST", url, true);

    xhr.onreadystatechange = function() {

        if (xhr.readyState == 4 && xhr.status == 200) {

            console.log(xhr.responseText);

        }

    };

fd.append("uploaded_file",file);

console.log("file: "+file);

xhr.send(fd);

};

And the last one  upload.php :

<?php

if (isset($_FILES['uploaded_file'])) {

    if(move_uploaded_file($_FILES['uploaded_file']['tmp_name'], "tmp/" . $_FILES['uploaded_file']['name'])){

        echo $_FILES['uploaded_file']['name']. " uploaded ...";

    } else {

        echo $_FILES['uploaded_file']['name']. " NOT uploaded ...";

    }

    exit;

} else {

    echo "no";

}

?>

[kglad]

you're welcome.

p.s. i don't see a reason to use a button component unless you really like its styling.  the code would be simpler with an on-stage button or movieclip:

this.browseImage_btn.addEventListener('click',selectF.bind(this));

function selectF(){

fileSelector.click();

}

showname = function(){

var name = fileSelector;

alert('Selected file: ' + name.files.item(0).name);

alert('Selected file: ' + name.files.item(0).size);

alert('Selected file: ' + name.files.item(0).type);

}

var fileSelector = document.createElement('input');

fileSelector.setAttribute('type', 'file');

fileSelector.setAttribute('onchange', 'showname()');

[popolino17]

Well, cool advise, kglad.

I definitely will consider it in the future edition of my code.

Thanks