Fork me on GitHub
Current releases are 2.1 (gold) and 2.0.18.11 (security patch for 2.0)
Ready for 2.1? Find out if your favorite plugins are compatible.
The 2.0 branch will no longer receive updates after Dec 2014.

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

edited February 2011 in Vanilla 2.0 Help
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.

Comments

  • 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.
  • edited February 2011
    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 image - 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...

  • 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
    buxiangshuo
  • I think that Inserting image, Quote plugins and few others work strangely with ClEditor (and other WYSIWYG editors).
  • 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.
  • edited March 2011
    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()+'image');
    txtbox.val(txtbox.val()+'image');

    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


  • OK, the code is not shiowing properly here... Sorry
  • 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.
  • edited March 2011
    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?
  • Yea, this is really driving me nuts. This addon is pretty useless if it doesn't work w/ a rich text editor.
  • 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.
  • edited May 2011
    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?
  • 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
  • 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
  • I have extended my version of the patch to work with CLEditor and TinyMCE:

    https://github.com/vanillaforums/Addons/issues/22
Sign In or Register to comment.