CODEWITHSUNDEEP
javascriptjsonnode.jsbusboy
AESTHETICS
AESTHETICS

Reputation: 1049

POSTing created file object with DataForms to busboy

I am having some problems with POSTing JSON to server. I have working code for file submission using input file Form.

Code for file submission.

var http = require('http'),
path = require('path'),
fs = require('fs');

var Busboy = require('busboy');
var express = require('express');
var app = express();
app.set('view engine', 'hjs');
var dir = './Files';
if (!fs.existsSync(dir)){
    fs.mkdirSync(dir);
}

app.get('/', function (req, res) {
    res.render('index', {})
})
app.post('/', function (req, res) {
    var busboy = new Busboy({ headers: req.headers });
    busboy.on('file', function (fieldname, file, filename,encoding, mimetype) {

        var saveTo = path.join(dir, path.basename(filename));
        console.log(path.basename(filename));
        file.pipe(fs.createWriteStream(saveTo));


    });
    busboy.on('finish', function () {
        console.log('Done parsing form!');
        res.writeHead(303, { Connection: 'close', Location: '/' 
    });
        res.end();
    });
    req.pipe(busboy);
    })
app.listen(8000, function () {
    console.log('Example app listening on port 8000!')
})

Working with this client side code:

<html>
<body>

    <form method="POST" enctype="multipart/form-data">
    <input type="file" name="filefield"><br />
    <input type="submit">

</body>
</html>

Here is my new client side code i am trying to make work but with no success:

<body>
<script>
 var data = {a:1, b:2, c:3};
 var json = JSON.stringify(data);
 var parts = [new Blob([json], {type: 'application/json'})];

var fileToSend = new File(parts, 'sample.json', {
type: "application/json"
})

var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function(ev) {

oData = new FormData(form);

oData.append("files", fileToSend);

var oReq = new XMLHttpRequest();
oReq.open("POST", "http://localhost:8000/", false);
oReq.send(form);


};

oReq.send(oData);
ev.preventDefault();
}, false);</script>


<form enctype="multipart/form-data" method="post" name="fileinfo">
<input type="submit" value="Stash the file!" />
</form>
<div></div>
</body>

I want to post JSON file i created to server with name i have given on the creation of the object to server and with content from JavaScript. Form was working quite well so i would like to stick to it but i am not sure if there is any need.

Upvotes: 0

Views: 1028

Answers (1)

AESTHETICS
AESTHETICS

Reputation: 1049

Okay, so i removed listener as i have been getting some errors using it and replaced it with a function and onclick event.

Here is the code:

<body>
<script>
    function PassJSON() {
        var data = { a: 1, b: 2, c: 3 };
        var json = JSON.stringify(data);
        var parts = [new Blob([json], { type: 'application/json' })];

        var fileToSend = new File(parts, 'sample.json', {
            type: "application/json"
        })
        var form = document.forms.namedItem("fileinfo");
            formData = new FormData(form);

            formData.append("file", fileToSend);


            var request = new XMLHttpRequest();
            request.open("POST", "http://localhost:8000/");
            request.send(formData);



};
</script>
<form enctype="multipart/form-data" method="post" name="fileinfo">
    <button type="button"  onclick="PassJSON()">Send JSON'a</button>
</form>
<div></div>

Here is a solution with listener:

<body>

<form enctype="multipart/form-data" method="post" name="fileinfo">
    <input type="submit" value="Stash the file!" />
</form>
<div></div>
<script>var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function(ev) {


var data = { a: 1, b: 2, c: 3 };
        var json = JSON.stringify(data);
        var parts = [new Blob([json], { type: 'application/json' })];

        var fileToSend = new File(parts, 'sample.json', {
            type: "application/json"
        })

        var oOutput = document.querySelector("div"),
        oData = new FormData(form);

        oData.append("CustomField", fileToSend);

        var oReq = new XMLHttpRequest();
        oReq.open("POST", "", true);
        oReq.onload = function(oEvent) {
        if (oReq.status == 200) {
        oOutput.innerHTML = "Uploaded!";
        } else {
        oOutput.innerHTML = "Error " + oReq.status + " occurred when trying 
     to upload your file.<br \/>";
  }
};

oReq.send(oData);
ev.preventDefault();
}, false);</script>
</body>

Upvotes: 1

Related Questions