Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

NEW: Files can be uploaded directly in the 'Insert Link' form #2908

Closed
wants to merge 1 commit into from

8 participants

@kinglozzer
Collaborator

This seems like it was far too easy... but everything in my initial testing works. Uploading works, “From files” works, editing an inserted link works, the UploadField edit form works.

Still need to do some more cross-browser testing, but wanted to get this on here now in case I’ve missed something glaringly obvious which would explain why it’s almost too simple :wink:.

Sorry for the stupidly large screenshots.

screen shot 2014-02-28 at 22 26 32
screen shot 2014-02-28 at 22 27 07

@kinglozzer
Collaborator

Okay, so the glaringly obvious thing that I missed is that editing an existing link doesn’t work. Not sure of the best approach though, attaching the file to the UploadField after the dialog has loaded results in an extra delay. Ideally, we’d post the file ID when loading the dialog (LinkForm), but then we’d need to AJAX load the form again every time the dialog is opened.

Any thoughts?

@kinglozzer
Collaborator

If #2914 is merged we could trigger an attach and show the loading indicator after opening the form. There would be a slight delay, but as mentioned above: we're not ajax loading the LinkForm each time so I can't see any way around this. Anyone else have any bright ideas? :)

@chillu
Owner

I'd prefer to have the UploadField loaded once the dialog opens, rather than the whole form. Not sure if its possible to pass through an ID to a ajax request to UploadField->FieldHolder yet though

@kinglozzer
Collaborator

That makes sense, but I think you’re right in that it’s not currently possible to pass in an ID like that. Do you have any feedback on this vs. #2976? You can insert any file with any extension using the MediaForm, which seems wrong to me, but could we make use of that existing AssetUploadField functionality for this somehow?

@kinglozzer
Collaborator

bump. With #2914 merged this looks a bit nicer now. Does this seem like a good solution? Also, can anyone spot a way of ensuring the UploadField has initialised without using setTimeout (I hate myself for submitting a pull request with that in).

@sminnee
Owner

Looks like this feature is getting quite a few votes on uservoice: http://silverstripe.uservoice.com/forums/251266-new-features/filters/top

@kinglozzer
Collaborator

So it is! I’ll take another look at this soon and try to get it cleaned up ready for merging.

Just to clarify: the PR in its current form will show either the empty UploadField or, if a file has already been added, the ‘attaching’ indicator from #2914 until the details of that file have been loaded in.

@kinglozzer kinglozzer changed the title from *Don’t merge* NEW: Files can be uploaded directly in the 'Insert Link' form to NEW: Files can be uploaded directly in the 'Insert Link' form
@kinglozzer
Collaborator

This is what users will see when picking an item from the CMS, or editing an existing file link (while it loads the info):

screen shot 2014-07-22 at 12 15 29

There’s another issue in that users can insert links such as [file_link,id=undefined], but the same issue applies to editing any other links too: inserting a blank/empty link still adds an anchor, it should probably just discard it.

Also, the “Remove link” button (inside the link dialog) doesn’t appear to be working for any links. That’s a separate issue though.

@kinglozzer kinglozzer NEW: Files can be uploaded directly in the 'Insert Link' form
5290a9c
@kinglozzer
Collaborator

Rebased this, tests are passing now but there were one or two other changes that crept in during the rebase. I think I rooted them out properly, but I’m yet to double check. Kinda need other devs to review the functionality and see what they think - not sure if the delay while the file loads is too intrusive.

@camfindlay

hey @kinglozzer are you still actively looking at this feature? I'm keen to set the flag on UserVoice for this one officially to "Started" given your awesome amount of work on this so far :)

@kinglozzer
Collaborator

Hey @camfindlay. I’m still happy to work on it, but I’m not sure there’s anything else I can do for now. I’m just really waiting to see whether people think that the delay while the file is attached to the UploadField is acceptable!

@camfindlay

ok cool, so you are looking for a big of peer review? Might be good if you go update the mention about it on UserVoice given it has a good number of votes you might get some traction :+1:

@purplespider

I've just had a good play with this and I think it works great! I've got no issues with the very slight delay when editing an existing link, and as it displays a loading indicator it's clear what's it's doing.

@sminnee
Owner

This looks great—is it better merged into 3.1 or master?

@kinglozzer
Collaborator

I’m thinking this might be better in master. It shouldn’t be a BC-breaking change, but I guess if someone applied an extension to HtmlEditorField_Toolbar expecting to encounter a TreeDropdownField it could cause some issues. Heck, it could probably be merged into master and broken out as a module for 3.1 for anyone desperate for it :)

@mandrew

One note is that '/Uploads' might not be where I want the file to upload. Is it possible to change this folder to point to somewhere else via the CMS? A drop down could help here?

@kinglozzer
Collaborator

That’s a fair point @mandrew, it should be fairly easy to integrate the selectupload module to handle this, though I haven’t tested it. The module already adds a dropdown for “insert media”, which also defaults to /Uploads for uploading images :)

@kinglozzer
Collaborator

I’ve packaged this up into a module for 3.1: https://github.com/kinglozzer/htmleditoruploadfield. When I get round it it I’ll reopen this against master, unless anyone else fancies taking this on or has any other ideas for how to approach this :)

@kinglozzer kinglozzer closed this
@kinglozzer kinglozzer deleted the kinglozzer:htmleditorfield-linkform-uploadfield branch
@purplespider

Would love for this to get into the new 3.2 beta! :)

@scott1702 scott1702 referenced this pull request
Merged

Update #2908 for 3.2 #4249

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Aug 15, 2014
  1. @kinglozzer

    NEW: Files can be uploaded directly in the 'Insert Link' form

    kinglozzer authored
This page is out of date. Refresh to see the latest.
View
1  admin/css/screen.css
@@ -671,6 +671,7 @@ body.cms-dialog { overflow: auto; background: url("../images/textures/bg_cms_mai
.htmleditorfield-dialog .CompositeField .text select { margin: 5px 0 0 0; }
.htmleditorfield-linkform .step2 { margin-bottom: 16px; }
+.htmleditorfield-linkform .ss-uploadfield .middleColumn { width: auto; }
.htmleditorfield-mediaform .ss-gridfield .gridfield-button-delete { display: none; }
.htmleditorfield-mediaform .ss-gridfield table.ss-gridfield-table tbody td:first-child { padding: 0; text-align: center; }
View
5 admin/scss/_style.scss
@@ -1518,6 +1518,11 @@ body.cms-dialog {
.step2 {
margin-bottom: $grid-x*2;
}
+ .ss-uploadfield {
+ .middleColumn {
+ width: auto;
+ }
+ }
}
.htmleditorfield-mediaform {
View
5 forms/HtmlEditorField.php
@@ -278,7 +278,7 @@ public function LinkForm() {
$siteTree,
new TextField('external', _t('HtmlEditorField.URL', 'URL'), 'http://'),
new EmailField('email', _t('HtmlEditorField.EMAIL', 'Email address')),
- new TreeDropdownField('file', _t('HtmlEditorField.FILE', 'File'), 'File', 'ID', 'Title', true),
+ $fileField = new UploadField('file', _t('HtmlEditorField.FILE', 'File')),
new TextField('Anchor', _t('HtmlEditorField.ANCHORVALUE', 'Anchor')),
new TextField('Description', _t('HtmlEditorField.LINKDESCR', 'Link description')),
new CheckboxField('TargetBlank',
@@ -300,7 +300,8 @@ public function LinkForm() {
$headerWrap->addExtraClass('CompositeField composite cms-content-header nolabel ');
$contentComposite->addExtraClass('ss-insert-link content');
-
+ $fileField->setAllowedMaxFileNumber(1);
+
$form->unsetValidator();
$form->loadDataFrom($this);
$form->addExtraClass('htmleditorfield-form htmleditorfield-linkform cms-dialog-content');
View
34 javascript/HtmlEditorField.js
@@ -479,6 +479,7 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
fromDialog: {
onssdialogopen: function(){
var ed = this.getEditor();
+
ed.onopen();
this.setSelection(ed.getSelectedNode());
@@ -488,8 +489,8 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
this.find(':input:not(:submit)[data-skip-autofocus!="true"]').filter(':visible:enabled').eq(0).focus();
- this.updateFromEditor();
this.redraw();
+ this.updateFromEditor();
},
onssdialogclose: function(){
@@ -563,6 +564,8 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
this.addAnchorSelector();
+ this.resetFileField();
+
// Toggle field visibility depending on the link type.
this.find('div.content .field').hide();
this.find('.field#LinkType').show();
@@ -593,7 +596,7 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
break;
case 'file':
- href = '[file_link,id=' + this.find(':input[name=file]').val() + ']';
+ href = '[file_link,id=' + this.find('.ss-uploadfield .ss-uploadfield-item').attr('data-fileid') + ']';
target = '_blank';
break;
@@ -620,14 +623,25 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
this.modifySelection(function(ed){
ed.insertLink(this.getLinkAttributes());
});
- this.updateFromEditor();
},
removeLink: function() {
this.modifySelection(function(ed){
ed.removeLink();
});
+
+ this.resetFileField();
this.close();
},
+ resetFileField: function() {
+ // If there's an attached item, remove it
+ var fileField = this.find('#file'),
+ fileUpload = fileField.data('fileupload'),
+ currentItem = fileField.find('.ss-uploadfield-item[data-fileid]');
+
+ if(currentItem.length) {
+ fileUpload._trigger('destroy', null, {context: currentItem});
+ }
+ },
/**
* Builds an anchor selector element and injects it into the DOM next to the anchor field.
@@ -763,7 +777,7 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
*/
updateFromEditor: function() {
var htmlTagPattern = /<\S[^><]*>/g, fieldName, data = this.getCurrentLink();
-
+
if(data) {
for(fieldName in data) {
var el = this.find(':input[name=' + fieldName + ']'), selected = data[fieldName];
@@ -775,6 +789,18 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
el.prop('checked', selected).change();
} else if(el.is(':radio')) {
el.val([selected]).change();
+ } else if(fieldName == 'file') {
+ // Can't rely on fieldName, as UploadFields have different naming convention
+ el = $('#' + fieldName);
+
+ // We have to wait for the UploadField to initialise
+ (function attach(el, selected) {
+ if( ! el.getConfig()) {
+ setTimeout(function(){ attach(el, selected); }, 50);
+ } else {
+ el.attachFiles([selected]);
+ }
+ })(el, selected);
} else {
el.val(selected).change();
}
Something went wrong with that request. Please try again.