0

It's a part of a function to Read and Display STL files. As you can see it takes the file uploaded by user using File Input and passes it to openFile that reads the file using FileReader API.

window.addEventListener("load", function () {

    ...
    ...

    // file load
    var openFile = function (file) {
        console.log(file);
        var reader = new FileReader();
        reader.addEventListener("load", function (ev) {
            var buffer = ev.target.result;
            var geom = loadStl(buffer);
            scene.remove(obj);
            obj = new THREE.Mesh(geom, mat);
            scene.add(obj);
        }, false);
        reader.readAsArrayBuffer(file);
    };

    // file input button
    var input = document.getElementById("file");
    input.addEventListener("change", function (ev) {
        var file = ev.target.files[0];
        openFile(file);
    }, false);


}, false);

But I want to pass the file to openFile that exists on my server instead.

I have tried using :

var file = new File ("myfile.stl");
openFile(file);

but it doesn't work.

2 Answers 2

1

What you want is conceptually wrong at begining.

In your use case, all the file reading behavior happened in your local machine(browser). As you can see, before addressing any remote endpoint information, FileReader api loads your local file and represents it in buffer.(that is, your local memory)

And what you want is to operate remote files inside your local JavaScript code without any network setup!

Either you should load the remote file first then use FileReader api in local, or do the file operation on server program then return the result to browser.

Have a look on File API.

There is one use case of File API seems similar to your need but actually a different scenario.

3
  • Hey Thanks. I understood what you saying. How about if I use AJAX xhttpRequest first to load the file from my server to local JS and then pass that to FileReader ??? Mar 21, 2017 at 2:50
  • I think you may not need FileReader for remote files. See ArrayBuffer. I guess you need to handle the buffer directly as in your load event handler.
    – hankchiutw
    Mar 21, 2017 at 3:21
  • 1
    Awesome. That worked perfectly. Thank you so much :) :) Mar 21, 2017 at 7:57
1

Here's the solution:

window.addEventListener("load", function () {

        ...
        ...

        var openFile = function(file) {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', file, true);
            xhr.responseType = 'arraybuffer';

            xhr.onload = function(e) {
                var buffer = this.response;
                var geom = loadStl(buffer);
                scene.remove(obj);
                obj = new THREE.Mesh(geom, mat);
                scene.add(obj);
            };

            xhr.send();
        };

        openFile('filename');

    }, false);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.