0

Hi, I have a problem. When I overwrite an existing blob I can not clear the cache so I show the previous blob version. This brings a bad experience for the user.

The quickest way to display the new blob (But it is not instant either) is through the link myaccount-secondary.blob.core.windows.net/mycontainer/miblob (The access keys for your storage account are the same for both the primary and secondary endpoints.)

Because I do not like this solution... Then, try removing the blob previously but continue to cache the old blob. I need something to wipe the cache when uploading from the backend node.

here is my node code

var express       = require('express')
var app           = express()
var busboy        = require('connect-busboy')
var azure         = require('azure-storage')
var nconf         = require('nconf');
nconf.env().file({ file: 'config.json', search: true });
var tableName     = nconf.get("TABLE_NAME");
var partitionKey  = nconf.get("PARTITION_KEY");
var accountName   = nconf.get("STORAGE_NAME");
var accountKey    = nconf.get("STORAGE_KEY");

app.use(function (req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.setHeader('Access-Control-Allow-Methods', 'POST');
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
  res.setHeader('Access-Control-Allow-Credentials', true);
  //res.setHeader("Cache-Control", "public, max-age=01");
   var _send = res.send;
    var sent = false;
    res.send = function(data){
        if(sent) return;
        _send.bind(res)(data);
        sent = true;
    };

  next();
});

app.use(busboy())
app.use(express.static('public'))

app.get('/', function(req, res) {
  res.sendFile('index.html')
})

app.post('/upload', function(req, res, params) {
req.pipe(req.busboy);

var name;
req.busboy.on('field', function (fieldname, val) {
  name = val+'.jpg';
});

req.busboy.on('file', function(fieldname, file, filename) {
    var blobSvc = azure.createBlobService(accountName, accountKey);
    file.pipe(blobSvc.createWriteStreamToBlockBlob('images', name, function(error) {
      if (!error) {
            res.send(200, 'upload succeeded')
      } else {
        res.send(500, JSON.stringify(error))
      }
    }))
  })

})

app.listen(process.env.PORT || 3201, function() {
  console.log('Example app listening on port 3000!')
})
mcappato
  • 15
  • 1
  • 4
  • Not sure what your question is. When you talk about cache, are you talking about browser's cache? Also tell us how are you fetching the blob? – Gaurav Mantri Jan 03 '17 at 17:01
  • hi! I'm talking about the azure cache or the versioning that generates or metadata, I'm not sure. The method createWriteStreamToBlockBlob('mycontaniner', blob,.... overwrite the blob if exist. – mcappato Jan 03 '17 at 17:10
  • Yes, the code would overwrite the blob if it exists. – Gaurav Mantri Jan 03 '17 at 17:13

1 Answers1

0

Your node code looks fine. In my test, the browser will cache the old version if the blob URL is kept the same. So the old image still appears, even though the storage holds the right image. I think you face the same problem.

To prevent it you can try the following code in your frontend:

<img src="https://youraccount.blob.core.windows.net/mycontainer/miblob?" + Math.random() />

This will make sure that each request is unique, so you will get the latest image always.

More on this:

Refresh image with a new one at the same url

Disable cache for some images

Why am I seeing an old version of an image? - Clearing Your Browser Cache

Community
  • 1
  • 1
Aaron Chen
  • 9,291
  • 1
  • 12
  • 24