Loading ...
Sorry, an error occurred while loading the content.

yuiImgUploader for yui 2.6.0

Expand Messages
  • benkinseyhawaii
    orginally from: http://allmybrain.com/2007/10/16/an-image-upload-extension-for-yui-rich-text-editor/#comment-698 Hope this helps somebody... /* yuiImgUploader
    Message 1 of 3 , Oct 31, 2008
    • 0 Attachment
      orginally from:
      http://allmybrain.com/2007/10/16/an-image-upload-extension-for-yui-rich-text-editor/#comment-698

      Hope this helps somebody...

      /*
      yuiImgUploader
      variables:
      rte: The YAHOO.widget.Editor instance
      upload_url: the url to post the file to
      upload_image_name: the name of the post parameter to send the file as

      Your server must handle the posted image. You must return a JSON object
      with the result url that the image can be viewed at on your server. If
      the upload fails, you can return an error message. For successful
      uploads, the status must be set to UPLOADED. All other status messages,
      or the lack of a status message is interpreted as an error. IE will
      try to open a new document window when the response is returned if your
      content-type header on your response is not set to 'text/javascript'

      Example Success:
      {status:'UPLOADED', image_url:'/somedirectory/filename'}
      Example Failure:
      {status:'We only allow JPEG Images.'}

      */

      function yuiImgUploader(rte, editor_name, upload_url, upload_image_name) {
      // customize the editor img button


      YAHOO.log( "Adding Click Listener" ,'debug');
      rte.addListener('toolbarLoaded',function() {
      rte.toolbar.addListener ( 'insertimageClick', function(o) {
      try {
      var imgPanel=new YAHOO.util.Element(editor_name +
      '-panel');
      imgPanel.on ( 'contentReady', function() {
      try {
      var Dom=YAHOO.util.Dom;

      if (! $(editor_name + '_insertimage_upload'))
      {
      var label=document.createElement('label');
      label.innerHTML='<strong>Upload:</strong>'+
      '<input type="file" id="' +
      editor_name + '_insertimage_upload" name="'+upload_image_name+
      '" size="10" style="width: 300px" />'+
      '</label>';

      var img_elem=Dom.get(editor_name +
      '_insertimage_url');
      Dom.getAncestorByTagName(img_elem,
      'form').encoding = 'multipart/form-data';

      Dom.insertAfter(
      label,
      img_elem.parentNode);

      YAHOO.util.Event.on ( editor_name +
      '_insertimage_upload', 'change', function(ev) {
      YAHOO.util.Event.stopEvent(ev); // no
      default click action
      YAHOO.util.Connect.setForm (
      img_elem.form, true, true );
      var c=YAHOO.util.Connect.asyncRequest(
      'POST', upload_url, {
      upload:function(r){
      try {
      // strip pre tags if they
      got added somehow

      resp=r.responseText.replace( /<pre>/i, '').replace ( /<\/pre>/i, '');
      var o=eval('('+resp+')');
      if (o.status=='UPLOADED') {
      Dom.get(editor_name +
      '_insertimage_upload').value='';
      Dom.get(editor_name +
      '_insertimage_url').value=o.image_url;
      // tell the image
      panel the url changed
      // hack instead of
      fireEvent('blur')
      // which for some
      reason isn't working
      Dom.get(editor_name +
      'insertimage_url').focus();
      Dom.get(editor_name +
      'insertimage_upload').focus();
      } else {
      alert ( "Upload
      Failed: "+o.status );
      }

      } catch ( eee ) {
      YAHOO.log( eee.message,
      'error' )
      }
      }
      }
      );
      return false;
      });
      }
      } catch ( ee ) { YAHOO.log( ee.message, 'error' ) }
      });
      } catch ( e ) {
      YAHOO.log( e.message, 'error' )
      }
      });
      });

      }
    • Christian Tiberg
      Hello! I m afraid this isn t working for me. What does this require? Could you perhaps post a link to a working example using this with 2.6.0? Best regards,
      Message 2 of 3 , Nov 13, 2008
      • 0 Attachment
        Hello!

        I'm afraid this isn't working for me. What does this require? Could you perhaps post a link to a working example using this with 2.6.0?

        Best regards,
         Christian Tiberg


        2008/11/1 benkinseyhawaii <benkinseyhawaii@...>

        orginally from:
        http://allmybrain.com/2007/10/16/an-image-upload-extension-for-yui-rich-text-editor/#comment-698

        Hope this helps somebody...

        /*
        yuiImgUploader
        variables:
        rte: The YAHOO.widget.Editor instance
        upload_url: the url to post the file to
        upload_image_name: the name of the post parameter to send the file as

        Your server must handle the posted image. You must return a JSON object
        with the result url that the image can be viewed at on your server. If
        the upload fails, you can return an error message. For successful
        uploads, the status must be set to UPLOADED. All other status messages,
        or the lack of a status message is interpreted as an error. IE will
        try to open a new document window when the response is returned if your
        content-type header on your response is not set to 'text/javascript'

        Example Success:
        {status:'UPLOADED', image_url:'/somedirectory/filename'}
        Example Failure:
        {status:'We only allow JPEG Images.'}

        */

        function yuiImgUploader(rte, editor_name, upload_url, upload_image_name) {
        // customize the editor img button

        YAHOO.log( "Adding Click Listener" ,'debug');
        rte.addListener('toolbarLoaded',function() {
        rte.toolbar.addListener ( 'insertimageClick', function(o) {
        try {
        var imgPanel=new YAHOO.util.Element(editor_name +
        '-panel');
        imgPanel.on ( 'contentReady', function() {
        try {
        var Dom=YAHOO.util.Dom;

        if (! $(editor_name + '_insertimage_upload'))
        {
        var label=document.createElement('label');
        label.innerHTML='<strong>Upload:</strong>'+
        '<input type="file" id="' +
        editor_name + '_insertimage_upload" name="'+upload_image_name+
        '" size="10" style="width: 300px" />'+
        '</label>';

        var img_elem=Dom.get(editor_name +
        '_insertimage_url');
        Dom.getAncestorByTagName(img_elem,
        'form').encoding = 'multipart/form-data';

        Dom.insertAfter(
        label,
        img_elem.parentNode);

        YAHOO.util.Event.on ( editor_name +
        '_insertimage_upload', 'change', function(ev) {
        YAHOO.util.Event.stopEvent(ev); // no
        default click action
        YAHOO.util.Connect.setForm (
        img_elem.form, true, true );
        var c=YAHOO.util.Connect.asyncRequest(
        'POST', upload_url, {
        upload:function(r){
        try {
        // strip pre tags if they
        got added somehow

        resp=r.responseText.replace( /<pre>/i, '').replace ( /<\/pre>/i, '');
        var o=eval('('+resp+')');
        if (o.status=='UPLOADED') {
        Dom.get(editor_name +
        '_insertimage_upload').value='';
        Dom.get(editor_name +
        '_insertimage_url').value=o.image_url;
        // tell the image
        panel the url changed
        // hack instead of
        fireEvent('blur')
        // which for some
        reason isn't working
        Dom.get(editor_name +
        'insertimage_url').focus();
        Dom.get(editor_name +
        'insertimage_upload').focus();
        } else {
        alert ( "Upload
        Failed: "+o.status );
        }

        } catch ( eee ) {
        YAHOO.log( eee.message,
        'error' )
        }
        }
        }
        );
        return false;
        });
        }
        } catch ( ee ) { YAHOO.log( ee.message, 'error' ) }
        });
        } catch ( e ) {
        YAHOO.log( e.message, 'error' )
        }
        });
        });

        }


      • Christian Tiberg
        The error was in the part telling YUI that a new URL was present, underscores were missing on two lines. Here s a working version: /* yuiImgUploader variables:
        Message 3 of 3 , Nov 13, 2008
        • 0 Attachment
          The error was in the part telling YUI that a new URL was present, underscores were missing on two lines. Here's a working version:

          /*
           yuiImgUploader
           variables:
            rte: The YAHOO.widget.Editor instance
            upload_url: the url to post the file to
            upload_image_name: the name of the post parameter to send the file as
           
           Your server must handle the posted image.  You must return a JSON object
           with the result url that the image can be viewed at on your server.  If
           the upload fails, you can return an error message.  For successful
           uploads, the status must be set to UPLOADED.  All other status messages,
           or the lack of a status message is interpreted as an error.  IE will
           try to open a new document window when the response is returned if your
           content-type header on your response is not set to 'text/javascript'
           
           Example Success:
           {status:'UPLOADED', image_url:'/somedirectory/filename'}
           Example Failure:
           {status:'We only allow JPEG Images.'}

          */

          function yuiImgUploader(rte, editor_name, upload_url, upload_image_name) {
              // customize the editor img button
              YAHOO.log( "Adding Click Listener" ,'debug');
              rte.addListener('toolbarLoaded',function() {
                  rte.toolbar.addListener ( 'insertimageClick', function(o) {
                      try {
                          var imgPanel=new YAHOO.util.Element(editor_name + '-panel');
                          imgPanel.on ( 'contentReady', function() {
                              try {
                                  var Dom=YAHOO.util.Dom;

                                  if (! $(editor_name + '_insertimage_upload'))
                                  {
                                      var label=document.createElement('label');
                                      label.innerHTML='<strong>Upload:</strong>'+
                                          '<input type="file" id="' + editor_name + '_insertimage_upload" name="'+upload_image_name+
                                          '" size="10" style="width: 300px" />'+
                                          '</label>';
                            
                                      var img_elem=Dom.get(editor_name + '_insertimage_url');
                                      Dom.getAncestorByTagName(img_elem, 'form').encoding = 'multipart/form-data';
                                
                                      Dom.insertAfter(
                                          label,
                                          img_elem.parentNode);
                                    
                                      YAHOO.util.Event.on ( editor_name + '_insertimage_upload', 'change', function(ev) {
                                          YAHOO.util.Event.stopEvent(ev); // no default click action
                                          YAHOO.util.Connect.setForm ( img_elem.form, true, true );
                                          var c=YAHOO.util.Connect.asyncRequest(
                                          'POST', upload_url, {
                                              upload:function(r){
                                                  try {
                                                      // strip pre tags if they got added somehow
                                                                                                  resp=r.responseText.replace( /<pre>/i, '').replace ( /<\/pre>/i, '');
                                                      var o=eval('('+resp+')');
                                                      if (o.status=='UPLOADED') {
                                                          Dom.get(editor_name + '_insertimage_upload').value='';
                                                          Dom.get(editor_name + '_insertimage_url').value=o.image_url;
                                                          // tell the image panel the url changed
                                                          // hack instead of fireEvent('blur')
                                                          // which for some reason isn't working
                                                                                                          var e1 = Dom.get(editor_name + '_insertimage_url');
                                                                                                          var e2 = Dom.get(editor_name + '_insertimage_upload');
                                                          e1.focus();
                                                                                                          e2.focus();
                                                      } else {
                                                          alert ( "Upload Failed: "+o.status );
                                                      }
                                                  } catch ( eee ) {
                                                      YAHOO.log( eee.message, 'error' )
                                                  }
                                              }
                                          }
                                          );
                                          return false;
                                      });
                                  }
                              } catch ( ee ) { YAHOO.log( ee.message, 'error' ) }
                          });
                      } catch ( e ) {
                          YAHOO.log( e.message, 'error' )
                      }
                  });
              });
            
          }


          Best regards,
           Christian Tiberg


          2008/11/1 benkinseyhawaii <benkinseyhawaii@...>

          orginally from:
          http://allmybrain.com/2007/10/16/an-image-upload-extension-for-yui-rich-text-editor/#comment-698

          Hope this helps somebody...

          /*
          yuiImgUploader
          variables:
          rte: The YAHOO.widget.Editor instance
          upload_url: the url to post the file to
          upload_image_name: the name of the post parameter to send the file as

          Your server must handle the posted image. You must return a JSON object
          with the result url that the image can be viewed at on your server. If
          the upload fails, you can return an error message. For successful
          uploads, the status must be set to UPLOADED. All other status messages,
          or the lack of a status message is interpreted as an error. IE will
          try to open a new document window when the response is returned if your
          content-type header on your response is not set to 'text/javascript'

          Example Success:
          {status:'UPLOADED', image_url:'/somedirectory/filename'}
          Example Failure:
          {status:'We only allow JPEG Images.'}

          */

          function yuiImgUploader(rte, editor_name, upload_url, upload_image_name) {
          // customize the editor img button

          YAHOO.log( "Adding Click Listener" ,'debug');
          rte.addListener('toolbarLoaded',function() {
          rte.toolbar.addListener ( 'insertimageClick', function(o) {
          try {
          var imgPanel=new YAHOO.util.Element(editor_name +
          '-panel');
          imgPanel.on ( 'contentReady', function() {
          try {
          var Dom=YAHOO.util.Dom;

          if (! $(editor_name + '_insertimage_upload'))
          {
          var label=document.createElement('label');
          label.innerHTML='<strong>Upload:</strong>'+
          '<input type="file" id="' +
          editor_name + '_insertimage_upload" name="'+upload_image_name+
          '" size="10" style="width: 300px" />'+
          '</label>';

          var img_elem=Dom.get(editor_name +
          '_insertimage_url');
          Dom.getAncestorByTagName(img_elem,
          'form').encoding = 'multipart/form-data';

          Dom.insertAfter(
          label,
          img_elem.parentNode);

          YAHOO.util.Event.on ( editor_name +
          '_insertimage_upload', 'change', function(ev) {
          YAHOO.util.Event.stopEvent(ev); // no
          default click action
          YAHOO.util.Connect.setForm (
          img_elem.form, true, true );
          var c=YAHOO.util.Connect.asyncRequest(
          'POST', upload_url, {
          upload:function(r){
          try {
          // strip pre tags if they
          got added somehow

          resp=r.responseText.replace( /<pre>/i, '').replace ( /<\/pre>/i, '');
          var o=eval('('+resp+')');
          if (o.status=='UPLOADED') {
          Dom.get(editor_name +
          '_insertimage_upload').value='';
          Dom.get(editor_name +
          '_insertimage_url').value=o.image_url;
          // tell the image
          panel the url changed
          // hack instead of
          fireEvent('blur')
          // which for some
          reason isn't working
          Dom.get(editor_name +
          'insertimage_url').focus();
          Dom.get(editor_name +
          'insertimage_upload').focus();
          } else {
          alert ( "Upload
          Failed: "+o.status );
          }

          } catch ( eee ) {
          YAHOO.log( eee.message,
          'error' )
          }
          }
          }
          );
          return false;
          });
          }
          } catch ( ee ) { YAHOO.log( ee.message, 'error' ) }
          });
          } catch ( e ) {
          YAHOO.log( e.message, 'error' )
          }
          });
          });

          }


        Your message has been successfully submitted and would be delivered to recipients shortly.