Jump to content

Loading Texture from File Dialog


Recommended Posts



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.



Link to comment
Share on other sites



 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





Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...