How to upload a smaller version and the original image in dropzone.js?

1

<form action="/upload" class="dropzone" id="myDropzone"></form>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

Dropzone.options.myDropzone = {
  paramName: "file", // The name that will be used to transfer the file to the server
  maxFilesize: 2, // MB
  accept: function(file, done) {
    // Validate the file before adding it to the Dropzone
    done();
  },
  init: function() {
    this.on("addedfile", function(file) {
      // Create a smaller version of the image
      var reader = new FileReader();
      reader.onload = function(event) {
        var img = new Image();
        img.src = event.target.result;

        img.onload = function() {
          var canvas = document.createElement('canvas');
          var ctx = canvas.getContext('2d');
          canvas.width = 100; // Set the width of the thumbnail
          canvas.height = 100; // Set the height of the thumbnail
          ctx.drawImage(img, 0, 0, 100, 100);
          var dataURL = canvas.toDataURL('image/jpeg');

          // Attach the smaller version of the image to the file
          file.thumbnail = dataURL;
          file.previewElement.addEventListener('click', function() {
            // Open the smaller version of the image in a new window
            window.open(dataURL);
          }, false);
        };
      };
      reader.readAsDataURL(file);
    });
  }
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

var express = require('express');
var multer = require('multer');

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/')
  },
  filename: function (req, file, cb) {
    cb(null, file.originalname)
  }
});

var upload = multer({ storage: storage });

var app = express();

app.post('/upload', upload.single('file'), function (req, res, next) {
  // Save the original image
  // Code to save the smaller version of the image
  res.send('File uploaded successfully');
});

app.listen(3000, function () {
  console.log('Server listening on port 3000');
});