How can we possibly add a file in our project directory using the javascript onclick is it possible? Need your help guys. I have done many research about this and nothing helped. If possible I dont want to add enctype multipart/form-data in my form because it wont allow me to store my data to mysql.
<form class="add-music-form" action="/save" method="POST">
<div class="form-group">
<div class="song-feaured-image">
<input style="display: none;" type="file" accept="image/*" id="file" name="featured_img" onchange="loadFile(event)" required>
<img id="output" class="image-preview" width="130" src="/img/rock-on.jpg" />
<label for="file" class="attach_file" style="cursor: pointer">
<i class="material-icons">attach_file</i></label>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Title" id="title" name="title" required>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Band name" id="band_name" name="band_name" required>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile" name="audio" required>
<label class="custom-file-label" for="customFile">Select audio file</label>
</div>
<div class="mt-3">
<button type="submit" class="btn btn-primary" onclick="submit()">Submit</button>
<a onclick="cancel()" class="btn btn-default">Cancel</a>
</div>
</form>
<script>
function submit() {
let upload_img = document.getElementById("output");
//--------------???----------------//
}
</script>
app.js
app.post('/save', (req, res) => {
let sql = "INSERT INTO `music`(`featured_img`, `title`, `band_name`, `audio`) VALUES ('" + req.body.featured_img + "', '"+req.body.title+"', '"+req.body.band_name+"', '"+req.body.audio+"')";
let query = connection.query(sql, (err, results) => {
if(err) throw err;
res.redirect('/');
});
});
(Note: I had trouble getting this working with EJS)
/client/index.html
<form class="add-music-form" action="/save" method="POST">
<div class="form-group">
<div class="song-featured-image">
<input style="display: none;" type="file" accept="image/*" id="file" name="featured_img" required>
<img id="output" class="image-preview" width="130" src="/img/rock-on.jpg" />
<label for="file" class="attach_file" style="cursor: pointer">
<i class="material-icons">attach_file</i></label>
</div>
</div>
<div class="mt-3">
<button type="submit" class="btn btn-primary">Submit</button>
<a onclick="cancel()" class="btn btn-default">Cancel</a>
</div>
</form>
app.js
var express = require('express');
const fileUpload = require('express-fileupload');
var app = express();
app.use(fileUpload());
app.use(express.static('client'));
app.listen(80, function () {
console.log("Server loaded.");
});
app.post('/save', (req, res) => {
let fileName = req.files.featured_img.name;
let data = req.files.featured_img.data;
console.log(fileName);
console.log(data);
// Do SQL
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments