Dragging an added image causes Chrome to crash and crash hard

[cdelguercio]

When I upload an image into Dropzone and then I click on it and move my mouse, Chrome crashes with this error:

He's dead, Jim!

Either Chrome ran out of memory of the process for the webpage was terminated for some other reason. To continue, reload or go to another page.

Learn more

To be precise, when I click down on the preview image with my mouse pointer the crash occurs exactly when I start to move my mouse. I put alerts on all of the drag events and found that dragstart gets called before the crash. When the alert is activated, I click down the mouse, start to move, my debug alert pops up saying "dragstart", I click okay, and the Chrome crashes.

Here is my Dropzone code:

// Dropzone JS at end of page
Dropzone.autoDiscover = false;
var dropzone = new Dropzone("div#dropzone", { url: '/upload/',
        enqueueForUpload: true,
        autoProcessQueue: false,
        thumbnailWidth: "700",
        parallelUploads: 100,
        resize: function(file) {
            var info;
            // drawImage(image, srcX, srcY, srcWidth, srcHeight, trgX, trgY, trgWidth, trgHeight) takes an image, clips it to
            // the rectangle (srcX, srcY, srcWidth, srcHeight), scales it to dimensions (trgWidth, trgHeight), and draws it
            // on the canvas at coordinates (trgX, trgY).
            info = {
                srcX:0,
                srcY:0,
                srcWidth: file.width,
                srcHeight: file.height,
                trgX:0,
                trgY:0,
                trgWidth: this.options.thumbnailWidth,
                trgHeight: parseInt(this.options.thumbnailWidth * file.height / file.width)
            }
                return info;
        },
        init: function() {
            this.on("dragstart", function(event) {
                alert("dragstart")
            });
            this.on("dragenter", function(event) {
                alert("dragenter")
            });
            this.on("dragleave", function(event) {
                alert("dragleave")
            });
            this.on("dragover", function(event) {
                alert("dragover")
            });
            this.on("dragend", function(event) {
                alert("dragend")
            });
            this.on("complete", function(file) {
                window.location.href = "/upload_complete/"
            });
            this.on("addedfile", function(file) {
              $(".dz-default").animate({'opacity':'0','height':'0'}, 300, function() {
                $(".dz-default").css("display","none");
              });
            });
            this.on("sending", function(file, xhr, formData) {
                formData.append("title", document.getElementById("title").value);
                formData.append("tags", document.getElementById("tags").value);
                formData.append("contributor_type_1", document.getElementById("contributor_type_1").value);
                formData.append("contributor_name_1", document.getElementById("contributor_name_1").value);
                formData.append("contributor_type_2", document.getElementById("contributor_type_2").value);
                formData.append("contributor_name_2", document.getElementById("contributor_name_2").value);
                formData.append("contributor_type_3", document.getElementById("contributor_type_3").value);
                formData.append("contributor_name_3", document.getElementById("contributor_name_3").value);
                formData.append("contributor_type_4", document.getElementById("contributor_type_4").value);
                formData.append("contributor_name_4", document.getElementById("contributor_name_4").value);
                formData.append("contributor_type_5", document.getElementById("contributor_type_5").value);
                formData.append("contributor_name_5", document.getElementById("contributor_name_5").value);
                formData.append("street_address_1", document.getElementById("street_address_1").value);
                formData.append("street_address_2", document.getElementById("street_address_2").value);
                formData.append("city", document.getElementById("city").value);
                formData.append("state", document.getElementById("state").value);
                formData.append("zip_code", document.getElementById("zip_code").value);
                formData.append("place", document.getElementById("place").value);
                formData.append("tool", document.getElementById("tool").value);
                formData.append("iso", document.getElementById("iso").value);
                formData.append("aperture", document.getElementById("aperture").value);
                formData.append("exposure", document.getElementById("exposure").value);
                formData.append("focal_length", document.getElementById("focal_length").value);
                formData.append("private", document.getElementById("private").value);
                formData.append("brand_1", document.getElementById("brand_1").value);
                formData.append("product_1", document.getElementById("product_1").value);
                formData.append("product_url_1", document.getElementById("product_url_1").value);
                formData.append("brand_2", document.getElementById("brand_2").value);
                formData.append("product_2", document.getElementById("product_2").value);
                formData.append("product_url_2", document.getElementById("product_url_2").value);
                formData.append("brand_3", document.getElementById("brand_3").value);
                formData.append("product_3", document.getElementById("product_3").value);
                formData.append("product_url_3", document.getElementById("product_url_3").value);
            });
        }
    });

[enyo]

I'll look into it. Thanks for your report. Please provide information about your chrome version.

[cdelguercio]

Chromium - Version 28.0.1500.95 custom (213514)

I've restarted my computer and the problem has gone away.

I bet this is still something worth looking into. Probably some function that uses a large amount of memory.

[DeZZar]

Just wondering if there was any update on this issue? I just found this after a general Google search as I'm experiencing the same issue although it is intermittent. Seems to be exactly the same as described here. (note: I'm not using the dropzone library, but seems this issue might be a little broader than specific scripts, only seems to occur in Chrome).

In simple terms, I have a container div which has a dragover event listener to upload an image file. Once the image file is uploaded, an event listener is added to the image tag for mousedown mouseup and drag to allow it to be re-positioned within the div. When the image file is dragged onto the div it is read using file reader and the source of the image tag is updated with base64 data.

Chrome randomly crashes the moment the drag event is triggered on a newly uploaded image. I've not had the issue on any image that is a direct url instead of base64 - so not sure if this might be the cause of the issue?

[enyo]

Thanks @DeZZar for your detailed report. What is your exact Chrome version?

[DeZZar]

Chrome version is 32.0.1700.72

[enyo]

Mh... and which OS?

[DeZZar]

Sorry this was Windows 7 64Bit

[enyo]

Ok, if this problem still exists, I will try to find a windows machine :)

[DeZZar]

A small update on this.

I seem to be able to replicate the crash specifically now - but it is based on a particular image file. Again, I'm not using this specific Dropzone script, but my own procedures. From my end this is what happens:

I use two defined objects - one to handle drag/drop for file upload and the other to capture mouse/touch down, up and move to re-position images.

A user will drag/drop an image file over a specified element. This image file will then be processed, read and displayed using filereader and then uploaded to the server. Once the upload is complete, the move object is instantiated for the new image. Now the user can click on the image and re-position it within the containing element. The new top, left and zoom position is then captured and passed to the server.

The chrome crash only occurs when a newly loaded image is clicked and dragged after it has been read and displayed (displaying with src as base64 data). It never (so far) occurs for an image with traditional url as the src.

The crash does not always occur however. Therefore I thought it was just random in the past.

Recently I have found an image file that the crash always occurs on. It does not occur when the image is linked with url src, only when it is displayed as data.

I am going to attempt to analyse the image and see if I can determine a difference between it and other images that do not crash. I'm not an expert on image files, so I'm not certain I will be able to find anything, but I will report back if I do. Perhaps it will hold a clue to what's going on....

[DeZZar]

Just another quick update as I've resolved this issue at my end, which isn't an exact fix for the problem as such, but resolves it from a design perspective.

Once an image is dropped a preview is loaded as a data uri. In the background the image is uploaded to the server and its final resting place returned once the upload has completed. The src element is then switched out for the real image url BEFORE any drag event handlers are added. This has completely eliminated the behaviour in my testing and hasn't created any 'double loading' type effects on the image with the change in src attribute.

The original chrome crash problem appears to boil down to larger (1.5mb +) images displayed using data uri as the src attribute.

[specterstudios]

I also have this crash with Chrome 35.0.1916.114. Haven't tested other browsers yet. I'll likely implement your fix, DeZZar.

There's another easy way to prevent this. Just put another div around, or prevent pointer events, on the preview container.

[AndreiGavriliu]

Any updates on this issue? Btw what do you mean "Just put another div around"?

[RyanPaiva56]

I'm still running into this. Any suggestions?

[VMNalwad]

Hi Enyo,

My chrome is getting crashed as I drag and drop the file. It starts happening after you drop the 2nd file and then click cancel on the browser window. My Chrome Version 43.0.2357.134. Please keep me posted on this issue

[RyanPaiva56]

We solved it by disabling thumbnails. Hope that helps for now.

[VMNalwad]

Did you make this change "createImageThumbnails:false,"

" Dropzone.options.dropZoneWrapper = {
url: "/Draft/SaveUploadedFile",
autoDiscover: true,
addRemoveLinks: false,
uploadMultiple: false,
createImageThumbnails:false,
dictDefaultMessage: "Drag and drop a file here(Max size allowed 10MB/file and Max upload allowed is 5 files)",
maxFiles: 5,
init: function () {
this.hiddenFileInput.removeAttribute('multiple');
this.on("maxfilesexceeded", function (file) {
this.removeFile(file);
$('#drop-zone-wrapper').addClass('input-error-style');
$("#error-file-attachment").html("Only 5 files can be uploaded");
});"

It still crashes !!!!

[RyanPaiva56]

Nope, I gave it a 1MB threshold. There's info for it in the docs.

[alex-shamshurin]

+1 the same issue with Chrome 51.0.2704.103m
Firefox is ok but logs "out of memory" on line
data = ctx.getImageData(0, 0, 1, ih).data;

[vijeetgv]

BTW, still the issue exists. I'm using latest version of dropzone. Whenever I upload large video files like 257 MB video then Chrome crashes within less than a minute. For smaller videos it's fine. And larger videos on Firefox etc. are fine.

[byzheng]

Have the same issue with Chrome 75 and latest dropzone after uploading more than 50-100 images.

[byzheng]

Set createImageThumbnails:false can solve this problem. Confirm after uploading 470 images (8.2 MB for each).

[ankit9giri]

<Dropzone onDrop={ this.handleDropParamFile } accept=".yml"> { ( { getRootProps, getInputProps } ) => ( <section className="container d-flex align-items-center justify-content-center"> <img src={ require( "images/browse.svg" ) } alt="browse" /> <div { ...getRootProps( { className: 'dropzone' } ) }> <input { ...getInputProps() } /> <div class="myw-upload-browse d-flex align-items-center justify-content-center"> <span class="fs-12 text-secondary mx-1">Drag and Drop files here</span> <span class="fs-12 myw-600">Or</span> <label class="btn btn-secondary btn-sm mx-1"> <span>Browse</span> </label> </div> </div> </section> ) } </Dropzone>

When I try to upload yml file, chrome window get crash, Chrome verions- 92.0.4515.159, Further Why does file upload ask permission to upload file. how to give upload permission by default.