Dropzone processQueue not doing anything

Question

I'm using dropzone.js to upload a picture to my rails app, but I want to process it through cropper.js first.

I've set autoprocessQueue to false, so the image can be cropped, but when I run the processQueue() function, nothing happens. No errors, or anything. Just nothing.

The dropzone is recognised and file can be seen in the dropzone files array, so it's in the queue, as far as I can tell. I'm not sure why it's not sending.

This issue happens when the submit button is clicked.

var cropped = false;

  var myDropzone = new Dropzone('#cover-dropzone', {
// createImageThumbnails: true,
url: '/posts',
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
acceptedFiles: 'image/jpg',
previewsContainer: document.getElementById("dz-preview-container"),
maxFiles: 1,

  // The setting up of the dropzone
init: function() {
  var currentDropzone = this;
  
  this.on('dragover', function(file){
    console.log('dragover');
    // debugger;
  });

  // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
  // of the sending event because uploadMultiple is set to true.
  this.on('addedfile', function(file) {
    if (!cropped) {
      currentDropzone.removeFile(file);
      cropper(file);
    } else {
      cropped = false;
      var previewURL = URL.createObjectURL(file);
      var dzPreview = $(file.previewElement).find('img');
      dzPreview.attr("src", previewURL);
    }
   });

  this.on("sending", function() {
    console.log('sending');
  });
  this.on("sendingmultiple", function() {
    console.log('sendingmultiple');
    // Gets triggered when the form is actually being sent.
    // Hide the success button or the complete form.
  });
  this.on("successmultiple", function(files, response) {
    // Gets triggered when the files have successfully been sent.
    // Redirect user or notify of success.
  });
  this.on("errormultiple", function(files, response) {
    // Gets triggered when there was an error sending the files.
    // Maybe show form again, and notify user of error
  });
}
});


function cropper(file) {
  $('#dz-button-container').fadeOut('fast').hide('fast');
  showCropper(file);
  $cropperDiv.show('slow');
};

function showCropper(file) {

var c = 0;
var fileName = file.name;
var loadedFilePath = getSrcImageFromBlob(file);

$('#cropper-container').html('<img id="img-' + c + '" src="' + loadedFilePath + '" data-vertical-flip="false" data-horizontal-flip="false">')

var $image = null;  

var $image = $('#img-' + c);

var cropper = $image.cropper({
    autoCropArea: 1,
    aspectRatio: 24 / 7,
    movable: true,
    rotatable: true,
    scalable: true,
    viewMode: 1,
    minContainerWidth: 250,
    maxContainerWidth: 250
});

// controller buttons
$('.move-btn').on('click', function() { $image.cropper('setDragMode', 'move'); })
$('.crop-btn').on('click', function() { $image.cropper('setDragMode', 'crop'); })

// rotate buttons
$('.rotate-r').on('click', function() { $image.cropper('rotate', 45); })
$('.rotate-l').on('click', function() { $image.cropper('rotate', -45); })

// zoom buttons
$('.zoom-in').on('click', function() { $image.cropper('zoom', 0.1); })
$('.zoom-out').on('click', function() { $image.cropper('zoom', -0.1); })

// horizontal flip toggle
var hDirection = -1
$('.flip-v').on('click', function() { 
  $image.cropper('scaleX', hDirection);
  hDirection = hDirection === -1 ? 1 : -1;
})

// vertical flip toggle
var vDirection = -1
$('.flip-h').on('click', function() { 
  $image.cropper('scaleY', vDirection); 
  vDirection = vDirection === -1 ? 1 : -1;
})

// save image
$('#save-cropped-image').on('click', function(e) {
  // get cropped image data

  e.preventDefault();
  e.stopPropagation();

  console.log('i was clicked');

  $image.cropper('getCroppedCanvas', {
    width: 90,
    height: 160,
    minWidth: 256,
    minHeight: 256,
    maxWidth: 4096,
    maxHeight: 4096,
    fillColor: '#fff',
    imageSmoothingEnabled: false,
    imageSmoothingQuality: 'high'
  }).toBlob(function(blob) {
    var croppedFile = blobToFile(blob, fileName);
    croppedFile.accepted = true;
    // debugger;
    var files = myDropzone.getAcceptedFiles();
    for (var i = 0; i < files.length; i++) {
      var file = files[i];
      if (file.name === fileName) {
        myDropzone.removeFile(file);
      }
    }
    cropped = true;

    myDropzone.files.push(croppedFile);
    myDropzone.emit('addedfile', croppedFile);
    myDropzone.createThumbnail(croppedFile); //, width, height, resizeMethod, fixOrientation, callback)

    myDropzone.processQueue();
    console.log("process one didn't work")
  });
})

}

function getSrcImageFromBlob(blob) {
  var urlCreator = window.URL || window.webkitURL;
  return urlCreator.createObjectURL(blob);
};

function blobToFile(theBlob, fileName) {
  theBlob.lastModifiedDate = new Date();
  theBlob.name = fileName;
  return theBlob;
};

Answer 1

The problem was that I hadn't configured the acceptedFiles parameter properly and the files were not passing verification and not making their way to the queue, so when the processqueue function was called, there was nothing to process.

The fix was simple:

acceptedFiles: '.jpg,.jpeg',