I have an existing file upload (manual) in my web application. My application already shows existing uploaded files and a way to delete files.
I would like to incorporate the dropzone.js drag and drop into a small target area - but that is all. I don't want dropzone to print/render anything back to the screen - no messages, no images, nothing.
Could someone provide and example of how to configure dropzone for this limited functionality?
You can accomplish this by modifying the stylesheet. For example, setting
.dz-details
{
display:none;
}
will remove the box which shows what was uploaded. By modifying more styles, you should be able to remove the other elements that normally appear.
You can do that on init:
const dropzoneConfig = {
addedfile: file => { console.log(file); }
}
const myDropzone = new Dropzone(myDiv, dropzoneConfig)
Related
I'm using CKEditor and I want to allow people to place images by using a URL, but not upload. I can't figure out how to accomplish that. My toolbar is:
toolbar: {
items: [
'heading','|','bold','italic','link','bulletedList','numberedList','|','indent','outdent','alignment','|','HorizontalLine','ImageInsert','BlockQuote','InsertTable','MediaEmbed','Undo','Redo','|','FontColor','FontSize','Strikethrough','Subscript','Superscript'
]
},
Originally it had 'ImageUpload', so I removed that thinking it would work yet the image icon for ImageInsert, when clicked directly, opens the browser file dialog for an upload. You have to hit the down arrow to get the URL. What should I change it to such that clicking the icon opens the URL dialog directly?
Thanks!
PS, I inherited this, I didn't make it initially and as such I have no idea what version of CK it is nor how to determine that, sorry.
Try This :
CKEDITOR.editorConfig = function( config ) {
....
config.removePlugins = 'easyimage, cloudservices';
....
};
Then click on image tab on Editor and insert your Image Url In Url Field
We currently have code that handles all our image uploads via Dropzone.js. This includes functionality to paste from the clipboard and upload via dropzone.js, which currently works. This is that event code:
document.onpaste = function(event)
{
alert('pasted');
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
for (index in items) {
var item = items[index];
if (item.kind === 'file') {
// adds the file to your dropzone instance
myDropzone.addFile(item.getAsFile());
}
}
}
Following this, we have added a CKEditor (v4.10) html text editor to that page. The CKEditor has its own clipboard handling built in. If you activate the CKEditor (for example by clicking the text area), the CKEditor effectively takes control of the clipboard from that point. Which is correct, because we want the editor to be able to copy and paste text still.
However, CKEditor does not natively have image uploading built into it. It requires a plugin. But we would prefer not to use this plugin, and rather intercept the paste event, and if the data pasted is an image, pass that along to our dropzone.js handler instead.
While I am able to intercept that event, I am not sure what event data (if any) I can extract from the CKEditor paste event to pass along to the Dropzone handler. Here is the code so far:
var editor = CKEDITOR.instances.NoteText;
editor.on( 'paste', function( event )
{
alert('pasted ck');
console.dir(event);
//myDropzone.addFile(item.getAsFile());
} );
I have tried inspecting the event to see if anything is available for me to use, but don't seem to find anything.
Is what I'm trying to accomplish possible? Is it possible for me to somehow find and pass along the pasted event data from CKEditor to DropZone? Or am I going to have to implement the CKEditor image upload plugin?
Thanks.
I would like the ability to add a class to images which are added to the body field in Drupal.
I want to keep things as simple as possible for our users, whereby they don't have to add classes etc. Ideally they would just click on the image button in the toolbar, paste the URL or upload an image and set align either left or right:
Image properties for adding images in CKeditor
I've tried several options, including: CKEditor adding class to img tag but I cannot get anything to work.
The path to CKEditor is to the CDN //cdn.ckeditor.com/4.5.4/full-all
I'd like to us my own SCSS to make the images float left or right at desktop, and be centered for the small breakpoint.
The text format is 'filtered HTML'.
Is there any way I can get this to work?
Many Thanks
Update
Because I'm using the CKEditor CDN, I've added the following to my local 'ckeditor.config.js' file
config.extraPlugins = 'image, dialog, dialogui';
// Enable local "imagetoolbar" plugin from /myplugins/imagetoolbar/ folder.
CKEDITOR.plugins.addExternal( 'image', '/plugins/image/' 'plugin.js' );
CKEDITOR.plugins.addExternal( 'dialog', '/plugins/dialog/' 'plugin.js' );
CKEDITOR.plugins.addExternal( 'dialogui', '/plugins/dialog/' 'plugin.js' );
// extraPlugins needs to be set too.
CKEDITOR.replace( 'news', {
extraPlugins: 'image, dialog, dialogui'
} );
The example I copied this from has 'news' as the CKEDITOR.replace, which I'm sure is wrong, what should this be? https://www.pluginsforckeditor.com/Tutorials/149/How-to-add-a-plugin-to-CKEditor/en/n149.aspx
You can modify the image plugin in order to have the class of the image already entered. So users just have to paste URL or upload an image.
Fill the default field with what you want.
I hope to help you.
I've integrated dropzone and it's working fine with the files getting uploaded etc. What I'd like to do is hide the progress bar once the upload is successful and replace the filename with a link to the actual upload file automatically. This would happen automatically as each file finished uploading...
Looking at the documentation, I know I should use
this.on("success", function(file, response) {
if (response.success == 'true') {
// hide progress bar '.dz-progress'
// replace .data-dz-name with url from response
}
});
However, I haven't been able to figure out how to get access to that specific html element to replace/hide etc.
Edit: I was able to use css classes from the original dropzone.css to hide/transition the progress bar. Now just need to find a way to replace the filename with an 'a' tag.
For Dropzone 5.x and above
The correct way to update the thumbnail is by modifying the Preview Template in the success callback as follows:
this.on("success", function(file, response) {
// modify the preview template
file.previewTemplate.appendChild(document.createTextNode(response.filePath));
});
Reference tutorial for Dropzone along with server side handling
$('.dz-progress').hide();
or
$(".dz-progress").remove();
and to replace .data-dz-name
$('.data-dz-name').html(url from response);
I have an uploader that has two modes where it uploads different file types. Which one is active depends on what the user is doing. I am using FineUploaderBasic.
Right now to dynamically modify the allowedExtensions I do something like this:
if(type==<?=Campaign_Placement::AD_TYPE_USER_FLASH?>) // SWF
uploader._options.validation.allowedExtensions = ['swf'];
else // Static image
uploader._options.validation.allowedExtensions = ['jpeg', 'jpg', 'gif', 'png'];
uploader.reset(); // Resets with the new extensions
And to modify the acceptFiles:
if(type==<?=Campaign_Placement::AD_TYPE_USER_FLASH?>) // SWF
$('input[name="userfile"]').attr("accept", "application/x-shockwave-flash");
else // Static image
$('input[name="userfile"]').attr("accept", "image/jpeg, image/jpg, image/gif, image/png");
Both are ugly ways to do this, would appreciate a simple way to do both of these through the API, or some other elegant solution. Thanks!
You have 3 other options to solve this problem:
Don't set the allowedExtensions validation value at all. Then contribute a validate event handler that returns false if the user has submitted an invalid file, based on the value of the select you have provided.
Simply construct or re-construct the uploader instance whenever the user changes their selection.
Consider using the relatively new extraButtons feature, where you can connect additional upload buttons to a single Fine Uploader with varying validation options. For example, you can contribute some default allowed extensions (tied to the default upload button), and then provide an extraButtons button with alternate allowedExtensions. Simply display the appropriate button via JavaScript when the user changes their selection.