We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 30884
    • 142 Posts
    Hi there,

    Managed to get the progress bar moving as intended. It was a combination of altering the style.css and the chunk which are both below:
    Now I just need to get this working in Internet Explorer!! laugh

    Amended style sheet:

    style.css
    
    .input-delete{
          width:					16px;
    			height:					16px;
    			background:				url('../img/icons/delete.png') no-repeat 0 0;
    			text-decoration:		none;
    			border:					none;
    			float:					right;
    }
    
    
    		/**
    		 * You don't need this css part, scroll down ;)
    		 */
    
    		.halfsize
    		{
    			width:					50%;
    			margin-right:			55px;
    			float:					none;
    		}
    		form fieldset
    		{
    			border:					none;
    			border-top:				1px solid #888;
    			margin:					1em 0.5em 1em 0;
    			padding:				1em 0;
    		}
    
    		form legend
    		{
    			font-weight:			bold;
    			font-size:				1.2em;
    			color:					#eee;
    			margin:					auto;
    			margin-left:			0;
    			padding:				0 .25em 0 0;
    		}
    		label
    		{
    			width:					10em;
    			float:					left;
    			padding:				.2em .8em 0 0;
    			margin-right:			.4em;
    			text-align:				right;
    			font-size:				1.1em;
    		}
    		label.error
    		{
    			color:					#ff0000;
    		}
    
    		label span
    		{
    			display:				block;
    			color:					#888;
    			font-size:				0.85em;
    			margin-bottom:			0.5em;
    		}
    		form div.label,
    		form div.note,
    		form div.footer
    		{
    			clear:					both;
    			margin:					1em 0 0 0;
    			padding:				0.1em 0.3em;
    		}
    
    		form div.note
    		{
    			margin-left:			.5em;
    		}
    		input,
    		button,
    		select
    		{
    			width:					10em;
    		}
    		input.submit
    		{
    			font-weight:			bold;
    			color:					#333;
    			width:					100px;
    			padding-right:			6px;
    			padding-left:			6px;
    		}
    
    		/**
    		 * Below is  the basic css needed for the upload bars
                     * You can alter the above to suit your site's form layout but 
                     * make sure all statements are closed and a-ok in any prior css.
    		 */
    
            
    		.fancyupload_queue
    		{
    			list-style:				none;
    
    			
    		}
    		.fancyupload_queue li
    		{
    			background:				url(../img/icons/photo_upload.png) no-repeat 5px 5px;
    			padding:				5px 2px 5px 2px;
    			background-color: transparent;
    			background-image: url(../img/icons/photo_upload.png);
    			background-repeat: no-repeat;
    			background-attachment: scroll;
     			background-x-position: 0pt;
    			background-y-position: 5px;
    			padding-top: 5px;
    			padding-right: 0pt;
    			padding-bottom: 5px;
    			padding-left: 22px;		
    
    }
    		
    
    		.fancyupload_queue .queue-file
    		{
    			font-weight:			bold;
    		}
    
    		.fancyupload_queue .queue-size
    		{
    			color:					#aaa;
    			margin-left:			1em;
    			font-size:				0.9em;
    		}
    
    		 .fancyupload_queue .queue-loader
    		{
    			position: relative;
    			margin:					3px 0px;
    			font-size:				0.9em;
    			background-color:		#ddd;
    			color:					#fff;
    			border:					1px inset #ddd;
    			width : 90%;
    			
    			
    		}
    		.fancyupload_queue .queue-subloader
    		{
    			text-align: center;
                position: absolute;
                background-color: #81b466;
                height: 100%;
                width: 0%;
                left: 0pt;
                top: 0pt;
    		
    		}
    


    Amended HTML chunk:

    <div id="fancyupload_container">
    <form action="[~[*id*]~]&relPath=[+relPath+]" method="post" id="" enctype="multipart/form-data">
    	<input type="file" name="Filedata" id="fancyupload_input_data" />
    	<div class="halfsize">
    			<fieldset>
    					<legend>Upload Queue</legend>
    					<div class="note" id="fancyupload_status">Please check files and start upload</div>
    					<ul class="fancyupload_queue" id="fancyupload_queue">
    							<li style="display: none" />
    					</ul>
    			</fieldset>
    	</div>
       <div class="footer">
    			<input type="submit" class="submit" id="profile-submit" value="Start upload"/>
    	</div>
     </form></div>
    
    


    This little lot works for me so far and by all means feel free to test it out and let me know if it works for anyone else. Seems to not operate at all in IE for me here but that maybe down to some of our site’s specifics and bugs. If it works you have permission to drop it into the next update of your great little snippet!

    Cheers

    TxRx

    update on ie integration: Seems that there is a problem with the paths being relative to the php page and not to the actual snippet.
      p i x e l p u s h e r e x t r o d i n a i r e
      A x i s A n i m a t i o n . c o m
      • 23383
      • 138 Posts
      I’m sorry, but I don’t see any difference between the chunk provided in the zip and yours, except for the friendly urls... Could you tell me more about your fix ?
      For the CSS, do you think I should include the minimum CSS code (for uploadbars) on the next release ? The minimum style I’ve posted here is working for me...

      For IE, I have to say that I didn’t want to make it work.
      I have made a UploadSwitcher which denies FancyUpload access to IE :p (or anything else you want wink )

      Feel free to make it work well with IE wink
        • 30884
        • 142 Posts
        On the chunk I changed

        <div id="fancyupload_container"></div>
        

        to
        <div id="fancyupload_container">
        


        and placed a </div> at the end. I would be cool if you do include the minimal style.css above in the next release.

        The progress bar now looks like this now:

        after implementing the above CSS which the entire progress bar element seems to depend on.

        I’m nearly there with the IE problem, may take a day or so, but hopefully I’ll get there, looks like it’s a relative folder problem since the changes I make in the html output of the script seem to be not appearing in IE even if they are showing in FF.

        Where did you get to with IE? I know you made a very handy Upload Switcher which I may very well use in conjunction with the nicer upload snippet in FF for the short term, but any info you can pass on would maybe help me eliminate some of the problems I’m tracking down. If you can bear with me on this, I appreciate your help greatly, we may be able to polish this up a wee bit more for future ajax uploader fans out there smiley

        Cheers

        TxRx




          p i x e l p u s h e r e x t r o d i n a i r e
          A x i s A n i m a t i o n . c o m
          • 23383
          • 138 Posts
          Oh I think I know your problem with IE.

          I heard about IE misunderstanding the relative path, and depends on the folder where you put your SWF files. I’m not sure about it, but you could try wink

          In fact, I’m a little busy for the moment so I don’t have time to look at this. I’m sorry.
          For the </div>, yeah, it’s an error ! Thanks for pointing it ! I’ll correct it in the next release.
            • 30884
            • 142 Posts
            No problems, you should have seen some of my typo bugs!!
            There’s also a bit of a difference in the source code in digitarald’ s example and his downloadable source code on the FancyUploader website. I’ll stick with this for a bit longer and may have to return to it another day if I’m not done by Thursday.

            I completely understand your busy (no bad thing at all!) laugh
            I’ve got a couple of days to spend on this so I’ll keep you posted of any progress etc.
              p i x e l p u s h e r e x t r o d i n a i r e
              A x i s A n i m a t i o n . c o m
              • 30884
              • 142 Posts
              Hi there,

              Managed to make a bit of progress on this one. So far I’ve got the swf appearing as it should in ie7 (not tested 6 yet) and all looks as if it’ll eventually work 100% with a bit more time. For now I’ve got to deal with another page/element for tomorrow so I’m going to use your Upload Switcher in the meantime and return to resolve good ol’ "path not found" bug later on.

              Seems more related to the path handling differences in ie & JS which should be able to be sorted with a bit more work etc.

              To get it working I’ve slightly modified some of the scripts (php & JS) and got a fresh version of the mootools.js (v1.11) which seemed to make it all kick in nicely. Just this little problem of the ’path not found’ once the progress bar hits 100% which I don’t seem to have a problem with in Firefox at all.

              Anyhows, I’ll try and get back to it later next week. If anyone could explain/pass on some tips about how to properly check paths in JS on ie, that’d be great wink

                p i x e l p u s h e r e x t r o d i n a i r e
                A x i s A n i m a t i o n . c o m
                • 20289
                • 958 Posts
                Is there a chance to get the preview of what have just been uploaded?
                  [img]http://i10.tinypic.com/52c4eir.gif[/img][/td]
                  [td][Wiki] [Persian support forum]
                  [SVN] [RTL SVN Branch] [bugs] [FishEye+Crucible] [Learn MODx!] | [My Google Code]
                  [font=tahoma][برای دسترسی به راهنمای فارسی به [url=http://www.modxcms.ir]
                  • 23383
                  • 138 Posts
                  I don’t understand what you mean, but you could invoke a custom event.
                  This event receives your filename and destination, you can do whatever you want to wink
                    • 20289
                    • 958 Posts
                    I mean when upload is done, is there a chance to preview the image?
                      [img]http://i10.tinypic.com/52c4eir.gif[/img][/td]
                      [td][Wiki] [Persian support forum]
                      [SVN] [RTL SVN Branch] [bugs] [FishEye+Crucible] [Learn MODx!] | [My Google Code]
                      [font=tahoma][برای دسترسی به راهنمای فارسی به [url=http://www.modxcms.ir]
                      • 23383
                      • 138 Posts
                      Sorry for late reply:
                      Yeah, I think it’s possible. Maybe you can try to put a placeholder on your page and use the invokeEvent parameter to call your custom event. Just create a plugin listening to this event, and replacing the placeholder of your page with some html, the event should have the uploaded file path and file name.
                      (If you have to handle multiple files, instead of replacing, you can use div blocks or simply append html code to the placeholder...)