Using SWFUpload v2.2, Firefox 3, IE 8, Flash 10
In my ASP.NET application all uploads are being processed by upload.aspx (I have the correct upload_url set in the settings object). In IE 8 the uploads hit the upload.aspx page and are processed, but in Firefox they do not. Any suggestions?
Most of the code for the page that the user visits to upload a file is shown here (note: master pages are being used):
<script type="text/javascript" src="../swfupload/swfupload.js"></script>
<script type="text/javascript" src="../js/handlers.js"></script>
<script type="text/javascript">
var swfu;
window.onload = function() {
swfu = new SWFUpload({
// Backend Settings
upload_url: "../upload.aspx",
post_params: {
"ASPSESSID": "<%=Session.SessionID %>"
},
// File Upload Settings
file_size_limit: "10 MB",
file_types: "*.*",
file_types_description: "All Files",
file_upload_limit: 1,
file_queue_limit: 1,
//assume_success_timeout: 60,
// Event Handler Settings - these functions as defined in Handlers.js
// The handlers are not part of SWFUpload but are part of my website and control how
// my website reacts to the SWFUpload events.
file_queue_error_handler: fileQueueError,
file_dialog_complete_handler: fileDialogComplete,
upload_progress_handler: uploadProgress,
upload_error_handler: uploadError,
upload_success_handler: uploadSuccess,
upload_complete_handler: uploadComplete,
// Button settings
button_image_url: "../Images/XPButtonNoText_160x22.png",
button_placeholder_id: "spanButtonPlaceholder",
button_width: 160,
button_height: 22,
button_text: '<span class="button">Upload File<span class="buttonSmall">(10 MB Max)</span></span>',
button_text_style: '.button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }',
button_text_top_padding: 1,
button_text_left_padding: 5,
// Flash Settings
flash_url: "../swfupload/swfupload.swf", // Relative to this file
custom_settings: {
upload_target: "divFileProgressContainer"
},
// Debug Settings
debug: false
});
}
</script>
I know, its an old post, but maybe it will help to solve the problem for some people, because i had the same problem today.
I solved this problem not with using the post array, because i don't know how, and where to debug this script, but with generating a querystring
<script type="text/javascript">
var swfu;
window.onload = function() {
swfu = new SWFUpload({
// Backend Settings
upload_url: "../upload.aspx",
post_params: {
SessionID: "<%=Session.SessionID %>",
OtherID: "<%=OtherID %>"
},
//And here comes the highlight
use_query_string : true,
//code ...
After this you will get a querystring like this: ?SessionID=(id)&OtherID=(otherid)
This works with guarantee under every browser.
Try in another browser too, such as Safari or Chrome.
If it works only in IE, it's probably the Flash Cookie Bug the other answers mention.
If it works in everything except Firefox, it could be that there's no css defined for the progress bar. I don't know why this causes a problem, but I found that it did. As soon as I put the sample styles into my css file, it started working in Firefox.
The css I used is as follows:
DIV.ProgressBar { width: 100px; padding: 0; border: 1px solid black; margin-right: 1em; height:.75em; margin-left:1em; display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; }
DIV.ProgressBar DIV { background-color: Green; font-size: 1pt; height:100%; float:left; }
SPAN.asyncUploader OBJECT { position: relative; top: 5px; left: 10px; }
Use an HTTP trace/debugging proxy to see if anything is actually being sent to the server at all and what response is being received, if any. Charles is my favorite and works great with Flash (and everything else HTTP). WireShark and Fiddler are other options.
Charles
http://www.xk72.com/charles/
WireShark
http://www.wireshark.org/
Fiddler
http://www.fiddler2.com/fiddler2/
http://demo.swfupload.org/Documentation/
Cookie issue
On Windows the Non-IE Flash Player plugin (FireFox, Opera, Safari, etc) will send the IE cookies regardless of the browser used. This breaks authentication and sessions for many server-side scripting technologies.
Developers should manually pass Session and Authentication cookie information and manually restore Sessions on the Server Side if they wish to use Sessions
The SWFUpload package contains work-around sample code for PHP and ASP.Net
===== Implementing some once off authentication ticket from there will make things work fine
You can also make it conditional that this authentication is only applied when users are using the upload
However, some test to ensure that the authentication cookie does not get around the other part of the site maybe important depending on how you issue the cookie for this action.
Just wanted to confirm that the same problem was just fixed by adding post_params variable to the SWFUpload init.
post_params : {
PHPSESSID : '<?=session_id()?>'
},
It sounds like you could be running into this Flash bug. Nort's solution is the way most people have been working around it. Depending on your language/framework however, you may need to add some additional server-side code to take the session variable from the url and force it to be used as the current session.
You can try the solution in this StackOverflow question, or try googling something like 'flash upload cookie'.
I found the answer ... finally. I was struggling with this for a very long time. Can't believe this is the answer. The reason is SUBST.
I have a computer with SSD drive and since it is 256GB only I decided not to partition it. However I like split between C and D partitions and I emulated it on my SSD drive via subst command. If I pickup the file from the drive which is created with subst command, the swf upload doesn't work. I almost can't believe that, but it is a fact I finally discovered today being unable to upload files on my development computer only.
Related
I have a client who hired me to make them a single page website. I designed and programmed it in node and such. They then informed me that they had a wix account.
Since they already paid wix for a year I would like to try to make this work for them. Since you cannot upload files to wix I have it hosted on a different domain and have an iframe pointing to that domain within the page.
The only problem is the size of the iframe. Is there a way to make the iframe 100% height and 100% width? Obviously, this is not the idea way to put up a website, but I need to work with what I have so they don't waste money.
I've tried many different ways to make this work.
I have tried embedding a link to a css file using the 'embed' feature with this code in it. And the code is there, but I get iframe-ception.
wix-iframe {
width: 100% !important;
}
I have also tried added the css to the 'custom code' section under the settings, just very basic
<style>
wix-iframe {
width: 100% !important;
}
iframe {
width: 100% !important;
}
</style>
I've also tried other 'hacks' but I can't seem to get anything to work. Any help would be much appreciated.
You can adjust iframe height according to its content
Initialize your iframe like this
<iframe src="..." frameborder="0" scrolling="no" onload="loadIframe(this);" />
add the snippet below in your <head> or <footer>
<script>
function loadIframe(elem) {
elem.style.height =
elem.contentWindow.document.body.scrollHeight + 'px';
}
</script>
How can I find what is the script error?
ChromeDevTools - Console:
When I clicked in userCodePanel and pre format showed the below source:
<!doctype html>
<style nonce="dqs2Iw0xA4xt/uhPgBmJpw">
html, body, iframe {
border: 0;
display: block;
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
iframe#userHtmlFrame {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
</style>
<meta name="chromevox" content-script="no">
<script type="text/javascript" src="/static/macros/client/js/**code**-mae_html_user_bin_i18n_mae_html_user__pt_br.js" nonce="**code**/**code**"></script>
<script nonce="**code**/**code**">
maeInit_(true);
For security reasons I changed the code number by code.
Stackdriver Logging e Error Report shows no error.
Please with the above informations how can I search for the error?
Chrome Dev Tools doesn't know where to take you because the JavaScript code is added dynamically.
One option is to map the client side code to Source Code.
Applying this to Google Apps Script web applications is a bit hacky but I have been using it in the last few days and it's working very well.
The goal is to add //# sourceURL=filename.js (use whatever filename you want) before every closing <script> but as JavaScript comments are stripped out by HtmlService we have to use HtmlService.HtmlOutput.append two times, one to add the top html content dow to the first / of the referrend comment, the second to add /# sourceURL=filename.js, the closing <script> and the code after it.
The way to apply the above depends on how your script is creating the HtmlService.HtmlOutput object. Few days ago I posted here a self-answered question including a "mcve" --> How to map client-side code to Source Code
Besides the benefit of being able to see the JavaScript code as Source Code in Chrome dev tools, when the console shows logs and errors related to this code, instead of userCodeAppPanel we will see filename.js (or whatever name you used). Clicking the file name will take to the the corresponding line code in Source Code.
The following screenshot shows how a error message is show in the Chrome Dev Tools, in this case showing navagacion.js (sic) instead of userCodeAppPanel.
References
Map Preprocessed Code to Source Code
I don't know what's going on but the issue is as follows:
I'm trying to load and image in the selector before in the content field like this:
.commentlist ul.children:before {
content: url("images/arrow.png") no-repeat;
top: 13px;
left: 11px;
position: relative;
}
This works like a charm in webkit browser like Chrome and Safari but not anymore in Firefox, so when i open Firebug and look for my style i can see that the content property is not showing up for that reason is not able to load the content but if i try to put it on the content via Firebug it works! No matter how times refresh, even i try to empty cache, never shows the content style, i miss something? I hope can anyone help me with that issue.
Regards!
That's not a valid value for the content property. See http://www.w3.org/TR/CSS21/generate.html#content for the spec.
In particular, the no-repeat part is not allowed there.
Of course Firefox tells you that the value is invalid, if you look at its console...
There is a page on my site with two sets of tabs, each tab's link is ajax-driven but has a proper href in case javascript is not enabled. I'm about to implement an ajax 'back-button' solution using a plugin such as jQuery Address.
My problem/confusion with this solution is that a page's default content is still loaded before the javascript has a chance to parse the hash and load the correct content. If I initially hide the content, non-javascript users will never see anything. If I don't initially hide the content, the user will see the wrong page for a moment before it gets updated (besides the extra overhead of first loading the wrong tab and then the correct tab).
What are the best / most common approaches to dealing with this?
Thanks, Brian
If you use hashes, you will always have the wrong content first. You need to use a server-side solution with the HTML5 History API to avoid this. Read more
You can use:
https://github.com/browserstate/ajaxify
And have the tabs render on the server side with something like if ( $_GET['tab'] === '2' ) // render 2
I think this is a good question. Have you tried using the <noscript> tag to include css that shows the content that's hidden initially for JS users. Something like this:
<style type="text/css">
#area-1, #area-2 { display: none; }
</style>
<noscript>
<style type="text/css">
#area-1, #area-2 { display: block; }
</style>
</noscript>
Hope this helps!
How does Google's API make cross-domain requests back to Google, when it's on your website?
They get around it by dynamically injecting script tags into the head of the document. The javascript that is sent down via this injection has a callback function in it that tells the script running in the page that it has loaded and the payload (data).
The script can then remove the dynamically injected script tag and continue.
The accepted answer is wrong. Ben is correct. Below is the actually iframe node pulled off a page using the Google API JavaScript Client.
<iframe name="oauth2relay678" id="oauth2relay678"
src="https://accounts.google.com/o/oauth2/postmessageRelay?
parent=https%3A%2F%2Fwww.example.com.au#rpctoken=12345&forcesecure=1"
style="width: 1px; height: 1px; position: absolute; left: -100px;">
</iframe>
Basic summary of how this works is here: http://ternarylabs.com/2011/03/27/secure-cross-domain-iframe-communication/. On modern browsers they utilize HTML postMessage to achieve communication, and on older browsers, they use a neat multiple-iframe-urlhash-read+write-combination hack. Ternary Labs have made a library which abstracts all the hacky stuff out, essentially giving you postMessage on all browsers.
One day I'll build ontop of this library to simplify cross-domain REST APIs...
Edit: That day has come and XDomain is here - https://github.com/jpillora/xdomain
AFAIK they use IFRAMEs.
Another possibility is to use the window.name transport as described for the dojo framework here
Looks like Google display maps using the <img> tag
I guess they use the JavaScrit library to work out all the co-ordinates and other parameters the src url needs, then insert the <img> tags (along with a million other tags) into your DOM.
The full map is built up with several panes like the HTML below:
<img src="https://mts1.google.com/vt/lyrs=m#248102691&hl=en&src=app&x=32741&s=&y=21991&z=16&scale=1.100000023841858&s=Galile" class="css-3d-layer" style="position: absolute; left: 573px; top: 266px; width: 128px; height: 128px; border: 0px; padding: 0px; margin: 0px;">
(You can paste this HTML into your own web page to see the result)
So Google Maps does NOT use AJAX or anything to get its maps, just plain images, created on the fly. So no Cross Domain issues to worry about...