I am trying to upload file from my local computer to localhost directory using multer and then send this file details along with some other form datas to mongodb.
When i am creating a post request using Thunder extension in VS Code, everything works fine. But when i use the index.html for doing the same, only file get uploaded in the localhost, but the details are not sent to mongodb and even no error occurs. So i am stuck why uploading file using frontend is not working.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>File Upload</title>
</head>
<body>
<div class="container">
<h1>File Upload</h1>
<form
id="form"
enctype="multipart/form-data"
action="/upload"
method="post"
>
<div class="input-group">
<label for="clothid">Cloth id</label>
<input name="clothid" id="clothid" placeholder="Enter cloth id" />
</div>
<div class="input-group">
<label for="swidth">Shoulder width</label>
<input name="swidth" id="swidth" placeholder="Enter shoulder width" />
</div>
<div class="input-group">
<label for="sleeveLength">Sleeve Length</label>
<input
name="sleeveLength"
id="sleeveLength"
placeholder="Enter cloth id"
/>
</div>
<div class="input-group">
<label for="frontLength">Front Length</label>
<input
name="frontLength"
id="frontLength"
placeholder="Enter cloth id"
/>
</div>
<div class="input-group">
<label for="file">Select file</label>
<input id="file" type="file" />
</div>
<button class="submit-btn" type="submit">Upload</button>
</form>
</div>
<script src="./script.js"></script>
</body>
</html>
Script.js
const form = document.getElementById("form");
async function submitForm(e) {
e.preventDefault();
const clothid = document.getElementById("clothid");
const swidth = document.getElementById("swidth");
const sleeveLength = document.getElementById("sleeveLength");
const frontLength = document.getElementById("frontLength");
const file = document.getElementById("file");
const formData = new FormData();
formData.append("clothid", clothid.value);
formData.append("swidth", Number(swidth.value));
formData.append("sleeveLength", Number(sleeveLength.value));
formData.append("frontLength", Number(frontLength.value));
formData.append("file", file.files[0]);
// console.log(formData.getAll("file"));
const response = await fetch("http://localhost:9000/upload", {
method: "POST",
body: formData,
});
const result = await response.json();
console.log(result);
}
form.addEventListener("submit", submitForm);
Index.js
import express from "express";
import mongoose from "mongoose";
import dotenv from "dotenv";
import bodyParser from "body-parser";
import Cloth from "./modals/cloth.js";
import upload from "./helper/helper.js";
import cors from "cors";
const app = express();
dotenv.config();
mongoose.set("strictQuery", true);
app.use(express.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cors());
const connect = async () => {
try {
await mongoose.connect(process.env.MONGO);
console.log("Connected to Database");
} catch (error) {
throw error;
}
};
mongoose.connection.on("disconnected", () => {
console.log("mongoDB disconnected!");
});
app.post("/upload", upload.single("file"), async (req, res) => {
console.log(req.body);
try {
const file = new Cloth({
fileName: req.file.originalname,
model_link: req.file.path,
fileType: req.file.mimetype,
cloth_id: req.body.cloth_id,
accross_shoulder: req.body.accross_shoulder,
sleeve_length: req.body.sleeve_length,
front_length: req.body.front_length,
});
await file.save();
res.status(201).send("File Uploaded Successfully");
} catch (error) {
res.status(400).send(error);
}
});
const Port = 9000;
app.listen(Port, () => {
connect();
console.log(`Listening to port ${Port}`);
});
Note that the above things work when using Postman or Thunder but not using index.html file.
Related
i want a user to input data in a form i created and i want the data to be sent to mongodb atlas.
so i host the form locally and it gives me an error "require is not defined".
my question is do i have to bundle the mongodb module or is there a way to do it without bundleing.
this is the code.
I USE THE VSCODE LIVE EXTENSION TO HOST.
document.querySelector(`input[type="submit"]`).onclick = () =>
{
var x = document.forms["form1"]["username"].value;
var password = document.forms["form1"]["password"].value;
var email ={
name : `${x}`,
password : `${password}`
};
if(document.querySelector(`input[type="checkbox"]`).checked){
var json = JSON.stringify(email);
var MC = require('mongodb').MongoClient;
var url = "mongodb+srv://<username>:<password>#cluster0.xjoqb.mongodb.net/myFirstDatabase?retryWrites=true&w=majority";
MC.connect(url, (err, db) => {
if (err) {
throw err;
}
console.log(`Connected`);
var data = db.db(`mydb`);
data.createCollection(`first`, (err, res) => {
if (err) throw err;
console.log(`collection created`)
});
data.collection(`first`).insertOne(email, (err, res) => {
if(err) throw err;
console.log(`inserted`);
db.close();
});
});
}
}
This is the html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="google-signin-client_id" content="707054985283-cirkm54740d0pm838hrgq7etkp3hu3ej.apps.googleusercontent.com">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<fieldset>
<h1 id="greeting">Welcome Back</h1>
<p id="greeting2">Let's Get Signed In</p>
<form name="form1" class="form" method="POST" autocomplete="off" spellcheck="false">
<div class="g-signin2" data-onsuccess="onSignIn"></div>
<div class="con1">
<input type="text" id="name" name="username" placeholder="Enter Your Email Address">
<img src="https://img.icons8.com/windows/50/000000/name.png" class="nameicon">
</div>
<div class="con2">
<input type="password" id="pass" name="password" placeholder="Enter Your Password">
<img src="https://img.icons8.com/windows/50/000000/password.png" class="passicon">
</div>
</form>
Forgot Password?
<div id="alm">
<input type="checkbox" id="remember" name="remem">
<label for="remem">Remember Me</label>
</div>
<form class="button1">
<input type="submit" name="submit" id="submit1">
</form>
</fieldset>
</body>
<script src="script.js"></script>
</html>
Databases (remote or local) are server side services. You need a back end app that handles the post request from the form located in the front end part and then from the backend trigger any action into Mongo Atlas.
Going with a NodeJS & Express stack could be a good option for you (you will also need to work with mongo in the backend, but in this case you will be storing the data in a remote Mongo Database).
I am currently learning node.js
And I have a question about PUT request
I can create the object
And see it in the URL
But I do not know how to write a request to edit it
For example change the price of the vehicle?
I would love to know how to write the edit request
this my HTML code
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Add car to the storege</h1>
<form action="/addCar" method="post">
<label for="">Car model</label>
<input name="car_model" type="text">
<label for="">Color</label>
<input name="color" type="text">
<label for="">Engine capacity</label>
<input name='Engine' type="number">
<label for="">Price</label>
<input name='price' type="number">
<label for="">id</label>
<input name='id' type="number">
<input type="submit" value="Send">
</form>
</body>
</html>
const express = require('express')
const bodyParser = require('body-parser')
const app = express()
const port = 3002
const Joi = require('#hapi/joi');
app.use(bodyParser.urlencoded({ extended: true }))
let carStorege = []
app.post('/addCar', (req,res) => {
const schema = Joi.object({
car_model: Joi.string().required(),
color: Joi.string().required(),
Engine: Joi.number().required(),
id: Joi.number().required(),
price: Joi.number().required()
})
const validation = schema.validate(req.body)
if(validation.error){
res.send('something worng!')
}
carStorege.push(req.body)
console.log(req.body)
res.send('<h1>Upload success !</h1>')
})
app.get('/', (req, res) => {
res.sendFile(__dirname+'/addCar.html')
})
app.get('/carStorege', (req, res)=> {
res.send(carStorege)
res.sendFile(__dirname+'/carStorge.html')
})
// put requset to edit the object..
app.listen(port, () => console.log('srever is live'))
send a PUT request with experss.js
use methodOverride and <input type="hidden" name="_method" value="PUT" />
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Add car to the storege</h1>
<form action="/addCar" method="post">
<input type="hidden" name="_method" value="PUT" />
<label for="">Car model</label>
<input name="car_model" type="text">
<label for="">Color</label>
<input name="color" type="text">
<label for="">Engine capacity</label>
<input name='Engine' type="number">
<label for="">Price</label>
<input name='price' type="number">
<label for="">id</label>
<input name='id' type="number">
<input type="submit" value="Send">
</form>
</body>
</html>
const express = require('express')
const bodyParser = require('body-parser')
const app = express()
const port = 3002
const Joi = require('#hapi/joi');
var methodOverride = require('method-override')
app.use(bodyParser.urlencoded({ extended: true }))
app.use(methodOverride(function (req, res) {
console.log(req.body);
if (req.body && typeof req.body === 'object' && '_method' in req.body) {
// look in urlencoded POST bodies and delete it
console.log('sss');
var method = req.body._method
delete req.body._method
return method
}
}))
let carStorege = []
app.post('/addCar', (req, res) => {
const schema = Joi.object({
car_model: Joi.string().required(),
color: Joi.string().required(),
Engine: Joi.number().required(),
id: Joi.number().required(),
price: Joi.number().required()
})
const validation = schema.validate(req.body)
if (validation.error) {
res.send('something worng!')
}
carStorege.push(req.body)
console.log(req.body)
res.send('<h1>Upload success !</h1>')
})
app.get('/', (req, res) => {
res.sendFile(__dirname + '/addCar.html')
})
app.get('/carStorege', (req, res) => {
res.send(carStorege)
res.sendFile(__dirname + '/carStorge.html')
})
app.put('/addCar', function (req, res) {
var car = req.car;
console.log(req.car)
res.send('<h1>sss success !</h1>')
//do update
});
app.listen(port, () => console.log('srever is live'))
So I've been trying to get the data from my form and input it into my database for ages and it just isn't working. There are no errors and nothing is logging.
This is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta charset="UTF-8">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Signup for NGOs</title>
</head>
<body>
<form class="mt-4 mr-4 ml-4" id="form" method="post">
<div class="form-group">
<label for="name">Name</label>
<input type="name" class="form-control" id="name" aria-describedby="emailHelp" placeholder="Enter name of NGO">
</div>
<div class="form-group">
<label for="address">Address</label>
<input type="text" class="form-control" id="address" placeholder="Address">
</div>
<div class="form-group">
<label for="phone">Contact Information</label>
<input type="number" class="form-control" id="phone" placeholder="Contact Number">
</div>
<div class="form-group">
<label for="requirements">Requirements (Seperate by Commas)</label>
<input type="text" class="form-control" id="requirements" placeholder="Requirements">
</div>
<button type="submit" class="btn btn-primary" id="submitButton">Submit</button>
</form>
<!-- Optional JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="signup.js"></script>
</body>
</html>
And this is my Node.js code:
var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var mongodb = require('mongodb');
var MongoClient = mongodb.MongoClient;
var app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.resolve(__dirname, 'public')));
// I've replaced my original username and password with placeholders
var uri = "mongodb+srv://username:password#helpbook-rlpsi.gcp.mongodb.net/test?retryWrites=true";
var dbConn = MongoClient.connect(uri, { useNewUrlParser: true });
app.post('/signup', function (req, res) {
dbConn.then(function(db) {
delete req.body._id; // for safety reasons
dbConn.db("NGOs").collections("partners").insertOne(req.body);
console.log('test');
});
});
I don't know what's going wrong. My data isn't being uploaded to the database and for some reason none of the console.log() statements are being executed.
The promise probably resolves before the signup handler is called.
Try the following:
var dbConn = MongoClient.connect(uri, { useNewUrlParser: true });
dbConn.then(function(client) {
app.post('/signup', function (req, res) {
delete req.body._id; // for safety reasons
client.db("NGOs").collections("partners").insertOne(req.body);
console.log('test');
});
})
.catch(function(err){
console.log(err)
});
Looking at your question specifically, you are not using any action in your form.
<form class="mt-4 mr-4 ml-4" id="form" method="post" action="/signup">
...
</form>
So it is not getting posted to your route. (That's why I specifically asked if console logging before the dbconn is working or not)
I'm trying to build an app that lets me enter in information about an event and then have that pinned on a map. I'm stuck at the beginning though on actually saving the information. When I use Inspect in Chrome, it tells me it posted, but the data is blank. I'm pretty new to this kind of stuff and not sure where I'm going wrong.
The first file is the app.js where I set up the database, a simple partial schema, etc.
The second file is my dashboard.html that displays the map and the form. I was trying the onsubmit/javascript stuff which displays the data without refreshing the page, but ideally I want to be able to refresh the page and have the data still be posted somewhere.
Any help would be greatly appreciated! Thanks! :)
require('dotenv').config({ silent: false }); // Retrieve .env contents
var http = require('http'); // Basic HTTP functionality
var path = require('path'); // Parse directory paths
var express = require('express'); // Provide static routing to pages
var app = express();
var Router = require('router')
var router = Router()
var server = http.Server(app);
var port = 8080;
var app = setupExpress();
// Import mongoose module and connect the database
var mongoose = require('mongoose');
var mongoDB = 'mongodb://Username:Password#ds159180.mlab.com:59180/app-database';
mongoose.connect(mongoDB);
//Get the default connection
var db = mongoose.connection;
// Start server on port 8080
// localhost:8080
server.listen(port);
//Bind connection to error event (to get notification of connection errors)
db.on('error', console.error.bind(console, 'MongoDB connection error:'));
//Define a schema
var Schema = mongoose.Schema;
var EventSchema = new Schema({
eventName : String,
eventType : String
});
var Event = mongoose.model('Event', EventSchema);
app.post('/dashboard', function(req, res) {
res.json(req.body); // req.body is your form data
});
app.post('/dashboard', function(req,res){
var content = new Event({
eventName : req.body.eventName,
eventType : req.body.eventType
}).save(function(err,doc){
if(err){
return handleError(err);
} else {
console.log('your form has been saved');
}
})
});
function setupExpress()
{
// Set default path for views and public
var viewsDir = path.join(__dirname, 'views');
var publicDir = path.join(__dirname, 'public');
app.use(express.static(publicDir));
// Root page is login form
app.get('/', function(req, res)
{
res.sendFile('views/index.html', { root: '.' });
});
// Once logged in, home page is dashboard
app.get('/dashboard', function(req, res)
{
res.sendFile('views/dashboard.html', { root: '.' });
});
// Redirect to error page if there's an issue
app.use(function(err, req, res, next)
{
console.log(err.stack);
res.status(err.status || 500);
res.sendFile('/views/error.html', { root: '.' });
});
return app;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Web browser tab title -->
<title>App</title>
<!-- Bootstrap Core CSS -->
<link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="../vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../css/sb-admin-2.css" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="../vendor/morrisjs/morris.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="../vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript"
src="http://www.your-domain.com/easy-comment/jquery.easy-comment.min.js"></script>
<title>App Tester</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="page-wrapper">
<div class="row">
<div class="col-lg-8" style="margin-top: 30px">
<div class="panel panel-default">
<div class="panel-heading text-center">
<i class="fa fa-map-marker fa-3x"> Add Event</i>
</div>
<div class="panel-body">
<div class="col-lg-6">
<form id="eventForm" method="post" onsubmit="return false">
<div class="form-group">
<label for="eventName">Event Name</label>
<input type="text" class="form-control" id="eventName" placeholder="Event name">
</div>
<div class="form-group">
<label for="eventType">Type</label>
<select class="form-control" id="eventType">
<option>Study Group</option>
<option>Food</option>
<option>Meeting</option>
<option>Danger</option>
</select>
</div>
<div class="form-group">
<label for="eventLocation">Location</label>
<select class="form-control" id="eventLocation">
<option>Location 1</option>
<option>Location 2</option>
<option>Location 3</option>
</select>
</div>
<div class="form-group">
<label for="eventNotes">Event Notes</label>
<textarea class="form-control" id="eventNotes" rows="2" placeholder="Add details about your event"></textarea>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
<div id="confirm"><div>
<script type="text/javascript">
var txt = document.getElementById("eventName");
document.getElementById("eventForm").addEventListener("submit", confirmdata);
function confirmdata(event) {
event.preventDefault();
var eventName = txt.value;
document.getElementById("confirm").innerHTML += '<p>Name: ' + eventName + '</p>';
}
</script>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
You should use body-parser to change your data post from client to json
var bodyParser = require('body-parser')
app.use(bodyParser.json())
You can get json data via req.body
her is my app.js which is confugaration file of express.js
<
var express = require('express')
, argv = require("optimist").argv
, fs = require("fs")
, hbs = require("hbs")
, WatsonClient = require("watson-js");
var clientId = argv.key || '5b1cb9a9c097e1100eeeebaf66117265'
, clientSecret = argv.secret || '01b8417ac6872450'
, appPort = argv.port || '3000';
function cp(source, destination, callback) {
// Read a buffer from `source`
fs.readFile(source, function(err, buf) {
if (err) { return callback(err); }
// Write that buffer to the new file `destination`
fs.writeFile(destination, buf, callback);
})
}
var Watson = new WatsonClient.Watson({ client_id: clientId, client_secret: clientSecret });
var app = express();
app.configure(function() {
console.log('inside function');
// Set the location of views and type of view engine
app.set('views',__dirname + '/app/views');
console.log(__dirname + '/app/views');
app.set('view engine', 'html');
app.engine('html', require('hbs').__express);
console.log('after view');
// Set up a standard Express configuration
app.use(express.logger());
app.use(express.cookieParser());
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.session({
secret: "This is an example."
}));
app.use(app.router);
console.log('before public');
// Set the location of static assets
app.use(express.static(__dirname+'/public'));
console.log(__dirname+'/public');
console.log('after public');
});
app.get('/', function(req, res) {
res.render('layout');
});
app.post('/upload', function(req, res) {
cp(req.files.upload_file.filename.path, __dirname + req.files.upload_file.filename.name, function() {
res.send({ saved: 'saved' });
});
});
app.post('/speechToText', function(req, res) {
// Traditionally, you would store this access token somewhere safe like a database. For the purposes of this example, we're going to generate a new one on the first request and store it in the session so we don't have to deal with a database or tracking expiry and refreshing access tokens.
if(!req.session.accessToken) {
// !AT&T API: Get Access Token
Watson.getAccessToken(function(err, accessToken) {
if(err) {
// Handle an error getting an access token
res.send(err);
return;
} else {
req.session.accessToken = accessToken;
token.
Watson.speechToText(__dirname + '/public/audio/audio.wav', req.session.accessToken, function(err, reply) {
if(err) {
res.send(err);
return;
}
res.send(reply);
return;
});
}
});
} else {
Watson.speechToText(__dirname + '/public/audio/audio.wav', req.session.accessToken, function(err, reply) {
if(err) {
res.send(err);
return;
}
return;
});
}
});
app.listen(appPort);
console.log('AT&T Speech API Basic Walkthrough App started on Port ' + appPort + '.');
// !USAGE: node app.js --key= --secret= --port=
// !SETUP: Dependencies
/*
* Express: Minimal web application framework
* FS: Node.js File System module
* Optimist: Lightweight option parsing
* HBS: Express View Engine wrapper for Handlebars
* Watson.js: Simple API Wrapper for the AT&T Speech API
*/
and my layout.html is
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>AT&T Speech API Example: Basic Walkthrough</title>
<meta name="description" content="Application for the AT&T Speech API Deep Dive Presentation at DevLab 2012">
<meta name="author" content="Michael Owens">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="public/styles/bootstrap.css">
<link rel="stylesheet" href="public/styles/example-basic.css">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js'></script>
</head>
<body>
<a onclick="Recorder.playBack('audio');" href="javascript:void(0);" title="Play">
Play
</a>
<div class="container">
<div class="row">
<div class="span12">
</div>
</div>
<div class="row">
<div class="span4">
<h2 id="progress-title">Progress (Step <span id="progress-step">1</span> of 5)</h2>
<div id="progress-indicator" class="progress progress-striped">
<div class="bar" style="width: 20%;"></div>
</div>
<ol class="progress-list">
<li id="progress-01" class="active">Access User's Microphone</li>
<li id="progress-02">Record Audio from Mic</li>
<li id="progress-03">Save Audio to File</li>
<li id="progress-04">POST File to AT&T Speech API</li>
<li id="progress-05">Receive Results from AT&T Speech API</li>
</ol>
<div>
<i class="icon-refresh"></i> Start Over
</div>
</div>
<div class="span8">
<h2>Current Status</h2>
<div id="status-mic" class="alert alert-info">
Audio Status: <strong>waiting</strong>
</div>
<div id="status-upload" class="alert alert-info">
File Status: <strong>waiting</strong>
</div>
<div id="control_panel">
<div class="btn-group">
<button id="button-connect" class="btn btn-large btn-success"><i class="icon-off icon-white"></i> <span class="action">Connect</span></button>
<button id="button-recorder" class="btn btn-large" disabled="disabled"><i class="icon-music"></i> <span class="action">Record</span></button>
<span id="button-save" class="btn">
<button disabled="disabled" class="btn btn-large"><i class="icon-download-alt"></i> <span class="action">Save</span></button>
<span id="save_button"><span id="flashcontent"></span></span>
</span>
<button id="button-transcribe" class="btn btn-large" disabled="disabled"><i class="icon-share-alt"></i> <span class="action">Transcribe</span></button>
</div>
</div>
<div id="transcribe-container">
<h2>Speech API Response</h2>
<div id="transcribe-response"></div>
</div>
</div>
</div>
<form id="uploadForm" name="uploadForm" action="/upload" >
<input name="authenticity_token" value="xxxxx" type="hidden">
<input name="upload_file[parent_id]" value="1" type="hidden">
<input name="format" value="json" type="hidden">
</form>
<script type="text/javascript" src="public/scripts/swfobject.js"></script>
<script type="text/javascript" src="public/scripts/example-basic.js"></script>
</div>
</body>
</html>
When i run app.js on node in cmd, it gives me error of not able to load static files i.e js and css files but it load view part i.e layout.html
exact errors is
<
GET h://ip:3000/public/scripts/swfobject.js 404 (Not Found)
GET h://ip:3000/public/scripts/example-basic.js 404 (Not Found)
GET h://ip:3000/public/styles/bootstrap.css 404 (Not Found)
GET h://ip:3000/public/styles/example-basic.css 404 (Not Found)
>
ip -localhost
h -https
my foldr structute is
example(parent folder)
subfolders
app/views/layout.html(code is given above)
public/scripts/js files
public/styles/css files
app.js(code is given above)
all the above subfolder(app,public,app.js) at the same level
so please suggest me some thing
It should work if you remove the 'public' from your URLs, like:
<link rel="stylesheet" href="/styles/bootstrap.css">
<link rel="stylesheet" href="/styles/example-basic.css">
You setup the static directory to be /public so its going to look in there for static resources. You did that here:
app.use(express.static(__dirname+'/public'));
When you add public to those URLs, it will be looking in /public for a folder called public, which it won't find. It will however find a folder called styles.