Loading Texture from File Dialog

[Dinkelborg]

Hi,

 

I'm working on a project, where the user is supposed to be able to upload his own images as a texture for an object.

 

Now I'm able to get the image like this:

<table id="fileForm">    <tr>        <td>            <input type="file" id="files" name="file[]">        </td>    </tr></table>

var handleFileSelect = function(evt){    var files = evt.target.files;    var reader = new FileReader();    reader.readAsDataURL(files[0]);    var boarding = scene.getMeshByName("Boarding");    reader.onload = function(e)    {        console.log(e.target.result);        //$("#fileForm").append('<img src="'+e.target.result+'"/>');        var mat = new BABYLON.StandardMaterial("mat",scene);        mat.diffuseTexture = new BABYLON.Texture(e.target.result,scene);        boarding.material = mat;    }}$("#files").on("change",handleFileSelect);

Now with the commented line: $("#fileForm").append('<img src="'+e.target.result+'"/>');

I can attach the texture to my form, that works like a charm, however I cannot figure out how I can use the loaded image as a texture.

 

As I tried above I just get the error message: "Uncaught TypeError: Cannot read property 'replace' of null" 

Which is probably because the constructor of BABYLON.Texture expects a URL and instead gets a data stream...

But how can I solve this in a way that will work?

Thanks for any hints or clues.

 

Dinkelborg

[davrous]

Hi,

 

 You should have a look to the way we're handling that in our sandbox tool: http://www.babylonjs.com/sandbox

 

 Specifically, have a look here in our source code in LoadImage: https://github.com/BabylonJS/Babylon.js/blob/master/src/Tools/babylon.tools.ts#L205 which uses data streams and createObjectURL to provide a texture to Babylon.JS

 

Cheers,

 

David

[Dinkelborg]

I'm sorry but this doesn't really help me:
- I tried to look at the source of the sandbox, however it seems very narrow and I couldn't really find anything related...

- I looked at the LoadImage function, and while I cannot understand it entirely I think it creates an Image(); as well...

 

In the end I'm left with the same problem that I started with again:
- I can load an image from a local file, but I cannot create a Texture from the image.

 

...I'm sorry if I missed something I don't understand how this function works

//ANY database to do!            if (database && database.enableTexturesOffline && Database.IsUASupportingBlobStorage) {                database.openAsync(loadFromIndexedDB, noIndexedDB);            }            else {                if (url.indexOf("file:") === -1) {                    noIndexedDB();                }                else {                    try {                        var textureName = url.substring(5);                        var blobURL;                        try {                            blobURL = URL.createObjectURL(FilesInput.FilesTextures[textureName], { oneTimeOnly: true });                        }                        catch (ex) {                            // Chrome doesn't support oneTimeOnly parameter                            blobURL = URL.createObjectURL(FilesInput.FilesTextures[textureName]);                        }                        img.src = blobURL;                    }                    catch (e) {                        img.src = null;                    }                }            }

What does it need as a parameter? Just "localStorage"?  And how can one use this function to create a new BABYLON.Texture? 

I would be very glad about an example that would show how to use this to create a Texture...

[Dinkelborg]

I found this thread

 

that describes the same problem that I'm facing and the authors problem, like mine remains unanswered:

 

While a function like BABYLON.Tools.LoadImage() will allow one to load an Image, how does one create a BABYLON.Texture from that?

 

"binyan" describes the same problem in his last post...