0
votes

I am newer to Node.js/Express and am attempting a simple file upload to Azure blob storage. I am using AngularJS for the front end form. When I attempt to upload a file I receive the following error:

TypeError: Cannot read property 'myfile' of undefined

I have seen some examples where they are leveraging a node module named multiparty but am unsure if it applies to this basic upload need. Coming from the jQuery/front end JavaScript world, I would need to base64 encode my file for upload in some cases. Is that the case in this instance? Or am I just missing a simple pass through so that Node/Express can read "myfile"?

Since Express has its own router and I have AngularJS routing in place, could that be causing the issue?

Here is my form in my AngularJS view:

<form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="myfile" />
    <input type="submit" value="Upload" />
</form>

Here is my server.js config. Please note that I am using Azure blob storage:

var express = require('express');
var azure = require('azure-storage');

// Initialize Express App
var app = express();
var port = process.env.port || 1337;
app.use(express.static(__dirname + "/public")).listen(port);

var accessKey = 'mykey';
var storageAccount = 'myblobaccount';

var blobSvc = azure.createBlobService(storageAccount,accessKey);

// Upload to Azure Blob Storate
app.post('/upload', function (req, res) {
    var path = req.files.myfile.path;
    blobSvc.createBlockBlobFromLocalFile('mycontainer', 'myblob.png', path, function (error, result, response) {
        if (!error) {
            console.log("Uploaded" + result);
    // file uploaded
        }
        else {
            console.log(error);
        }
    });
});

Update 1:

If I use the following, it generates a POST 200 OK, but when I look at my blob container using something like Azure Storage Explorer, the blob is not there.

app.post('/upload2', function (req, res) {
    var multiparty = require('multiparty');

    var container = 'mycontainer';

    var form = new multiparty.Form();

    form.on('part', function (part) {
        if (part.filename) {

            var size = part.byteCount - part.byteOffset;
            var name = part.filename;

            blobSvc.createBlockBlobFromStream(container, name, part, size, function (error) {
                if (error) {
                    //res.send(' Blob create: error ');
                }
            });
        } else {
            form.handlePart(part);
        }
    });
    form.parse(req);
    res.send('OK');
});
2

2 Answers

1
votes

There is a sample "blobuploader" in GitHub/Azure/azure-sdk-for-node https://github.com/Azure/azure-sdk-for-node/tree/master/examples/blobuploader.

I refered to this sample and your code to make a simple example below:

var azure = require('azure');
var storageAccount = '<Your Storage Account>';
var accessKey = '<Your Access Key>'
var blobSvc = azure.createBlobService(storageAccount, accessKey);

var express = require('express');
var formidable = require('formidable'); // the same node module as Azure sample
var app = express();

app.use(express.static('public'));   // contains a form page using the same code as yours

app.get('/', function(req, res) {
    res.send('Hello World!');
});

app.post('/upload', function(req, res) {
    var form = new formidable.IncomingForm();
    form.parse(req, function(err, fields, files) {
        var options = {
                contentType: files.myfile.type,
                metadata: { fileName: files.myfile.name }
        };
        blobSvc.createBlockBlobFromLocalFile('mycontainer', files.myfile.name, files.myfile.path, options, function(error, result, response) {
            if(!error){
            // file uploaded
                res.send('file uploaded!');
            }
        });
    });
    //console.log(req);
});

var server = app.listen(3000, function() {
    var host = server.address().address;
    var port = server.address().port;
    console.log('Example app listening at http://%s:%s', host, port);
});

It works!

Best Regards.

1
votes

You could save the file on server and then upload it to azure.

    fs.readFile(req.files.displayImage.path, function (err, data) {
  // ...
  var newPath = __dirname + "/uploads/uploadedFileName";
  fs.writeFile(newPath, data, function (err) {
    res.redirect("back");
  });
});

Or pipe directly to azure as shown in this gist