Question

0

147

Views

Give local file access to Webserver

I just began learning JavaScript and I have been trying to upload a file to a webserver I am locally hosting. I am using a webpack JS file to start the server and the command "npm run dev" but I think I have something misconfigured as I can't upload local files to the webserver. I know that Google Chrome has that security feature where it stops you from accessing local files but I ran chrome with the required arguments to disable that security feature but it didn't work so I guess it's my server. This is what I am trying to do:

let uploadFile = document.createElement("input");
uploadFile.type = "file"
uploadFile.id = "inputFile"
uploadFile.innerText = "Upload File"
document.body.appendChild(uploadFile)
let fake_path
uploadFile.onchange = function () {
    fake_path = uploadFile.value
    alert(fake_path)
    const loader = new GLTFLoader();
    loader.load( fake_path, function ( gltf ) {
        scene.add( gltf.scene );
    }, undefined, function ( error ) {
        console.error( error );
    } );
};`

This is my webpack common file:

const path = require('path');

module.exports = {
    entry: './src/client/client.ts',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.(glb)$/i,
                type: 'src/client/',
            },
        ],
    },
    resolve: {
        alias: {
            three: path.resolve('./node_modules/three')
        },
        extensions: ['.tsx', '.ts', '.js', '.glb'],
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, '../../dist/client'),
    }
};

And this is my Dev file:

const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')
const path = require('path');

module.exports = merge(common, {
    mode: 'development',
    devtool: 'eval-source-map',
    devServer: {
        static: {
            directory: path.join(__dirname, '../../dist/client/'),

        },
        hot: true,
    },
})

Am I doing something wrong or why can't i access a local file? This is the error that Chrome is giving me:

Help would be much appreciated.

about 4 years ago · Santiago Trujillo

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-30T14:12:36.359Z

You seem to be operating under several different misapprehensions here. Here are the facts which contradict them:

The Webpack dev server does not support file uploads.
While you are using a file input to let the user select a local file, you aren't doing anything to try to upload it to the server
The value of a file input is only useful to telling the user the filename, you are trying to use it as a URL (which the webpack dev server can't resolve it to anything useful)

You need to pass an actual URL to loader.load. Not the fake_path you get from the value of a file input.

You can use FileReader to read the file and create a data: scheme URL from it. This blog entry explains how.

<input type="file" />

<script>
    // Get a reference to the file input
    const fileInput = document.querySelector('input');

    // Listen for the change event so we can capture the file
    fileInput.addEventListener('change', (e) => {
        // Get a reference to the file
        const file = e.target.files[0];

        // Encode the file using the FileReader API
        const reader = new FileReader();
        reader.onloadend = () => {
            console.log(reader.result);
            // Logs data:<type>;base64,wL2dvYWwgbW9yZ...
        };
        reader.readAsDataURL(file);
    });
</script>

You then need to replace console.log(reader.result); with your call to loader.load (replacing fake_path with reader.result).

0

147

Give local file access to Webserver

1 answers

0

Find remote jobs

Andres GPT