New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

createThumbnailFromUrl not working #1628

Open
hounsellal opened this Issue Sep 21, 2017 · 7 comments

Comments

Projects
None yet
8 participants
@hounsellal

hounsellal commented Sep 21, 2017

I'm using the following code as described on the website FAQs in order to auto populate the dropzone with thumbnails of existing images:

init: function() {
          var mockFile = { name: "logo-light.png", size: 12345, accepted: true, kind: "image" };
          this.files.push(mockFile);
          this.emit('addedfile', mockFile);
          this.createThumbnailFromUrl(mockFile, "/public/logo.png");
          this.emit('complete', mockFile);
          this._updateMaxFilesReachedClass();
}

The webpage is hosted at http://localhost:3000/page
When I open the page and inspect the network traffic, it is continually trying to load the following file:
http://localhost:3000/page/undefined (which I'll call the "Undefined File")
This suggests to me that the "/public/logo.png" is not being passed properly into the createThumbnailFromUrl function.
The initiator of the request for the Undefined File is line 1237 of dropzone.js which is:
return img.src = file.dataURL;

So I added a dataURL parameter (equal to "/public/logo.png") to mockFile and now the network traffic appears to be fetching the correct image, but it is not showing up on the thumbnail element (it is just a blank thumbnail that shows the name and size).

Any ideas as to what is happening?

@dirq

This comment has been minimized.

Show comment
Hide comment
@dirq

dirq Sep 26, 2017

After reading this, I found out what you have to do. They need to create a matching method and/or update the docs.

dz is your Dropzone object. The key is to have dataURL set on your file.

var thumb = { name: filename, size: 0, dataURL: '/upload-directory/' + 'filename' };

dz.files.push(thumb);

// Call the default addedfile event handler
dz.emit('addedfile', thumb);

dz.createThumbnailFromUrl(thumb,
    dz.options.thumbnailWidth, dz.options.thumbnailHeight,
    dz.options.thumbnailMethod, true, function (thumbnail) {
        dz.emit('thumbnail', thumb, thumbnail);
    });

// Make sure that there is no progress bar, etc...
dz.emit('complete', thumb);

// If you use the maxFiles option, make sure you adjust it to the
// correct amount:
var existingFileCount = 1; // The number of files already uploaded
dz.options.maxFiles = dz.options.maxFiles - existingFileCount;

dirq commented Sep 26, 2017

After reading this, I found out what you have to do. They need to create a matching method and/or update the docs.

dz is your Dropzone object. The key is to have dataURL set on your file.

var thumb = { name: filename, size: 0, dataURL: '/upload-directory/' + 'filename' };

dz.files.push(thumb);

// Call the default addedfile event handler
dz.emit('addedfile', thumb);

dz.createThumbnailFromUrl(thumb,
    dz.options.thumbnailWidth, dz.options.thumbnailHeight,
    dz.options.thumbnailMethod, true, function (thumbnail) {
        dz.emit('thumbnail', thumb, thumbnail);
    });

// Make sure that there is no progress bar, etc...
dz.emit('complete', thumb);

// If you use the maxFiles option, make sure you adjust it to the
// correct amount:
var existingFileCount = 1; // The number of files already uploaded
dz.options.maxFiles = dz.options.maxFiles - existingFileCount;
@djandiek

This comment has been minimized.

Show comment
Hide comment
@djandiek

djandiek Sep 27, 2017

Thank you for that! I was going crazy trying everything to get this to work with the latest DropzoneJS

djandiek commented Sep 27, 2017

Thank you for that! I was going crazy trying everything to get this to work with the latest DropzoneJS

@kleinkauff

This comment has been minimized.

Show comment
Hide comment
@kleinkauff

kleinkauff Sep 27, 2017

Hey friends!

I'm getting

"Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data."

Someone can help me with this?

kleinkauff commented Sep 27, 2017

Hey friends!

I'm getting

"Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data."

Someone can help me with this?

@pripatel93

This comment has been minimized.

Show comment
Hide comment
@pripatel93

pripatel93 Oct 24, 2017

@kleinkauff You must add a parameter for crossOrigin, example given below:

dz.createThumbnailFromUrl(thumb,
    dz.options.thumbnailWidth, dz.options.thumbnailHeight,
    dz.options.thumbnailMethod, true, function (thumbnail) {
           dz.emit('thumbnail', thumb, thumbnail);
    },
'anonymous');

pripatel93 commented Oct 24, 2017

@kleinkauff You must add a parameter for crossOrigin, example given below:

dz.createThumbnailFromUrl(thumb,
    dz.options.thumbnailWidth, dz.options.thumbnailHeight,
    dz.options.thumbnailMethod, true, function (thumbnail) {
           dz.emit('thumbnail', thumb, thumbnail);
    },
'anonymous');
@oobravom

This comment has been minimized.

Show comment
Hide comment
@oobravom

oobravom Nov 7, 2017

Thank you so much for that!

oobravom commented Nov 7, 2017

Thank you so much for that!

@shaharsol

This comment has been minimized.

Show comment
Hide comment
@shaharsol

shaharsol commented Mar 18, 2018

@dirq & @pripatel93 thanks!

@wahkiz

This comment has been minimized.

Show comment
Hide comment
@wahkiz

wahkiz Apr 27, 2018

@pripatel93 thanks so much for this, this should be in the faq.

wahkiz commented Apr 27, 2018

@pripatel93 thanks so much for this, this should be in the faq.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment