[FileUpload Addon] Selected 'Insert Image' after upload, no feedback to user?

3dmotive

This discussion is related to the FileUpload addon.

Once an image has been uploaded, I press the 'Insert Image' button but receive no feedback (i.e. I don't see the image inserted into my post). It's not until I submit my post that I can see the image. I'm using FF 3.6.1.

Anyone else experiencing this? Everything else is working fine for me.

CrazyBird

I experience the same problem, especially when you use CLEditor or tinyMCE - plugin you don't even see that there is an image tag inserted into Message body.

If you turn off tinyMCE and CLEditor, at least you can see that the image tag is inserted.

Still, it would be very nice if the plugin could work together with thesere WYSIWYG editors.

ottorobba

Same here. Would love a solution. :)

CrazyBird

hi, think I found out the cause of the problem:

When you upload a file, at first it is stored to uploads/FileUpload/scratch with a temporrary file name (something like "fresh-54792e6b0d6aa5aa2507c35ec292f914-1296745994.4629.jpg"

When you click "insert image" it inserts an - Tag into the editor which already links to the final image directory (like uploads/FileUpload/7/7.jpg.

Problem is that the image file is moved to the new path when the Comment is posted.

When I've time I will try makeing up something...

Dan Devine

Any luck with a fix on this. At least it sounds like you are seeing a image in the comment field. Like the others, I am getting no feedback when I "insert an image", but I don't even get an image displayed when posted. I get an "img scr" (or similar) line with a generic jpeg tag box but no image. If I select "edit" the image does display inline but then when I save the post it goes back to the img scr and generic jpeg tag line. I am running the latest version of Vanilla 2 and the ClEditor plugin

tester13

I think that Inserting image, Quote plugins and few others work strangely with ClEditor (and other WYSIWYG editors).

Dan Devine

I found that the Magic plugin was causing the generic tag line problem. Removed Magic and now I get the image posted in the comment field as well as the file thumbnail. It does not however solve the problem with no image in the comment field seen when the "insert an image" tag is clicked. The image is only seen in the comment when the comment is posted. Magic was the only plugin I had to disable, quotes and other plugins seem to be working.

IanC22

Hey Guys,

I got this to work... Well it still needs some work but it functions ;) I'm using FileUpload and CLEditor. It's really late and I might be missing something here but it's at least a head start! I amended FileUpload\js\fileupload.js from line 516:

//txtbox.val(txtbox.val()+'');
txtbox.val(txtbox.val()+'');

try { success = ed.doc.execCommand('insertimage', 0, gdn.url('discussion/download/'+MediaID+'/'+Filename) || null); }
catch (err) { description = err.description; success = false; }
if (!success) {
if ("cutcopypaste".indexOf(command) > -1)
showMessage(editor, "For security reasons, your browser does not support the " +
command + " command. Try using the keyboard shortcut or context menu instead.",
button);
else
showMessage(ed,
(description ? description : "Error executing the " + command + " command."),
button);
}

The img source for the link is now pointing to the uploaded file, and not the copy that will be created when the post is being submitted (as noted by @CrazyBird). Not sure if it's nescesary to have these duplicate files (one for the upload and then also a copy for the image added to the body?!)

Secondly, call the CLEdit execCommand function to update the image link and have it displayed in the iframe.

If I think if something I missed I'll let you know ;)

I hope this helps someone!

Thx,

Ian

IanC22

OK, the code is not shiowing properly here... Sorry

AppleFish

Good! it works!

CrazyBird

unfortunately it doesn't work:

at first the image shows up in the editor when clicking "Add Image", but when i save the changes, there is no photo in the discussion message.

tested it with a text and behind that a png- image.

scoobeee

As an admin I can insert an image, then view it in the post. But if I view as a guest or just a member I cannot see it in the post. When I try to follow the url I get this
Fatal error: Class 'PermissionException' not found in mysite/public_html/plugins/FileUpload/class.fileupload.plugin.php on line 320

So when I comment out

if (!$this->CanDownload) throw new PermissionException("File could not be streamed: Access is denied");

it works but I would like it if when the picture is clicked the original is viewed instead of downloaded. Is avoiding that the thing that was causing this in the first place?

twanlass

Yea, this is really driving me nuts. This addon is pretty useless if it doesn't work w/ a rich text editor.

drummingpariah

I'm running into the same problem, where I can upload images fine, but the actual images are uploaded to:
(server url)/discussion/download/3/240z.jpg

... Insert Image doesn't do anything with CLEditor enabled, and only inserts a download link when using the HTML editor. I have not looked at the code yet, but I'm curious as to whether or not anyone can confirm a fix.

WebDevNoviceBKK

I'm having the same problems when using the CLEditor. Clicking on the insert image link doesn't give any feedback to the user. How are they supposed to know the image uploaded successfully without getting any sort of feedback?

Also, I noticed if I save the post with an attachment, and then come back to edit the post and move the attachement around within the post, it will break the attachment and it won't show any longer.

Are there any plans to update this mod to address these issues?

ChrisMaissan

I was able to fix this by replacing the "Add insert image button" code with the following. This is found around line 509 of fileupload.js.

// Add "insert image" button
if (JResponse.MediaResponse.FinalImageLocation != '') {
  var ImageAnchor = $(FileListing.find('a.InsertImage'));
  ImageAnchor.attr('href', JResponse.MediaResponse.FinalImageLocation);
  ImageAnchor.show();
  ImageAnchor.live('click', function() {
    var txtbox = $(FileListing.parents('form').find('textarea'));
    txtbox.val(txtbox.val()+'<img src="'+ImageAnchor.attr('href')+'" />');
		
    // Add preview image to CLEditor
    ed.doc.execCommand('insertimage', 0, jResponse.MediaResponse.PreviewImageLocation); 
    txtbox.cleditor()[0].updateTextArea();
								
    // Replace preview image with final image on post
    $(FileListing.parents('form')).submit(function() {
      txtbox.val(txtbox.val().replace(
        JResponse.MediaResponse.PreviewImageLocation, 
        JResponse.MediaResponse.FinalImageLocation
      ));
    });

    return false;
  });
}

Cheers,
Chris

chdh

Chris,

Thanks for your patch. I tried it, but it didn't work because "jResponse" is written with a lowercase "j" for the "insertImage" command.

I modified some other things, e.g. inserting the full image in the editor area instead of the thumbnail.

I came up with the following version:

// Add "insert image" link
if (JResponse.MediaResponse.FinalImageLocation != '') {
  var imageUrl = JResponse.MediaResponse.FinalImageLocation;          // the full size version of the image
  // var thumbnailUrl = JResponse.MediaResponse.PreviewImageLocation; // the thumbnail version of the image
  var insertLink = $(FileListing.find('a.InsertImage'));              // the "insert image" link
  var txtbox = $(FileListing.parents('form').find('textarea'));       // the text box containing the HTML code beeing edited
  var cleditor = txtbox.cleditor ? txtbox.cleditor()[0] : undefined;  // the CLEditor object
  insertLink.css('cursor', 'pointer');
  insertLink.show();
  insertLink.click(function() {
    if (cleditor) {
       cleditor.doc.execCommand('insertImage', 0, imageUrl);
       cleditor.updateTextArea(); }
     else {     // fallback if the CLEditor plugin is not enabled
       txtbox.val(txtbox.val()+'<img src="'+imageUrl+'"/>'); }
    return false; }); }

Christian

chdh

I have extended my version of the patch to work with CLEditor and TinyMCE:

https://github.com/vanillaforums/Addons/issues/22