browserify can't call the function i bundle, it's not defined

Question

I have some issue with browserify , i want to bundle the following node.js file project upload.js , i modified the file on the following code and call the file upload2.js on the same directory of upload.js:

var SketchfabDataApi = require( '../../index' );      
var Swagger = require('swagger-client');
var fs = require('fs');
var path = require('path');
var api = new SketchfabDataApi();

    function UploadModelBySketchfabdataApi(token,idinputfile) {
    //var file = jQuery(idinputfile)[0].files[0];
    var file = document.getElementById(idinputfile).files[0]
    if (file) {
        var fileName = file.name;
    }
    var fullPathFile = document.getElementById(idinputfile).value;

    //var fullPathFile = window.location.protocol + "//" + window.location.host;
    //if (window.location.port != "") fullPathFile += ":" + window.location.port + "/";
    //fullPathFile = fullPathFile + '/private/' + fileName;

    console.info('START UPLOAD2:' + fullPathFile);

    api.then(function (client) {

    // This is how you authenticate your requests with the "Token" scheme
    client.clientAuthorizations.add("Token",
        new Swagger.ApiKeyAuthorization(
            "Authorization",
            "Token " + token ,
            "header"
        )
    );

    // This is how you upload a file
    client.apis.models.post_v3_models({
        isPublished: 'false',
        modelFile: fs.createReadStream(path.resolve(fullPathFile)),
        private:false,
    }).then(function (response) {

        if (response.status === 201) {
            // The model URI is immediately returned, even if processing hasn't finished yet
            console.log('After processing, model will be available at: ' +
                response.headers.location);
            var uid = response.headers.location
                .replace('https://api.sketchfab.com/v3/models/', '');

            // You can poll the processing status to know when the model is ready
            // See how `pollStatus` is implemented below
            pollStatus(client,
                uid,
                function (err, res) {
                    console.log(err, res);
                });
            window.location.href = window.location.protocol + "//" + window.location.host + "/stealth/#/stealth/models3d/models3d";
        }


    }).catch(function (error) {
        console.error("ERROR ON UPLAOD:" + error);
    });

}).catch(function (error) {
    console.log("ERROR ON AUTHENTICATION:" + error);
});

}

    /**
     * Poll processing status
     * @param {object} client Swagger client
     * @param {string} uid Model uid
     * @param {function} callback will receive (err, result)
     */
    function pollStatus(client, uid, callback) {
        client.apis.models.get_v3_models_uid({
            uid: uid
        }).then(function (response) {
            if (response.obj.status.processing === 'SUCCEEDED') {
                callback(null, response.obj.status);
            } else if (response.obj.status.processing === 'FAILED') {
                callback(response.obj.status.processing, null);
            } else {
                setTimeout(function () {
                    console.log(response.obj.status);
                    pollStatus(client, uid, callback);
                }, 1000);
            }
        });
    }

Now i run the command of browserify,

browserify upload2.js -o bundleSketchFabDataApi.js -d

and here my call.js script :

   <script type="text/javascript" src="vendor/sketchfab/SketchfabDataApi/bundleSketchFabDataApi.js"></script>
<script type="text/javascript" src="vendor/sketchfab/SketchfabDataApi/SketchfabDataApi.js"></script>
............................
    UploadModelBySketchfabdataApi("mytoken", "myfile");

but i have always the same error on the console " Reference is undefined ":

UPDATE Ty to dnitro suggestion now i can access to my function with the window variable but i must keep doing something wrong with browserify because now my machine don't see my fs module return the text fs.createReadStream is not a function like in the screenshot:

any advice for that,ty in advance.

Answer 1

Browserify does not allow variables to pollute global scope. If you want to use one you should attach it to globals.

Here if you want UploadModelBySketchfabdataApi function available to window , you could attach it:

window.UploadModelBySketchfabdataApi = function (token, idinputfile) { ...

---

Update :

Browserify doesn't support fs module. See compatibility list .

You could use browserify-fs which uses level-filesystem . they claim that:

All async methods in the fs module are supported and well tested (including links!)

But watch out for browser support:

Installation :

 npm install browserify-fs 

Usage :

Directly:

 var fs = require('browserify-fs'); 

Or use regular fs module and at bundle time replace it with browserify-fs :

 var fs = require('fs'); // CLI browserify main.js -r fs:browserify-fs -o bundle.js 

Or use regular fs module and use package.json browser filed to replace it:

 var fs = require('fs'); // package.json "browser": { "fs": "browserify-fs" } 

---