Integrating uploader with my website

Archived from the Transloadit support forum. Originally posted on May 18, 2011; details may be outdated, see our docs for current behavior. Original thread

Hello
i’ve created a test page on my website that works fine: upload the file(s) and shows the progress bar.; this is a “clean” page, i.e,. it doesn’t contain references to other javascript files or styles

However, when I place the working code on a page that contains other scripts and styles, as well as other HTML elements, the uploading functionality works (the request is sent to your servers and the file is available on the sever) but the progress bar doesn’t appear anymore; besides this, after the file is uploaded, I’m NOT redirected to the URL I specified on the “redirect_url” parameter

I’ve removed all the other scripts from the page (with the exception of the javascript for google analytics) but the progress bar is still not showing

Any ideas? Thanks

Hey Roberto,

which browser are you using? Is it by chance IE9?
Do you have your setup online somewhere for review?

Kind regards,
Tim

Hello Tim, thanks for your reply

I’m using Firefox 4.0.1 and IE 8 (the described problem occurs in both browsers); I’m sending some code that works and some that doesn’t, please see comments in yello

This works

<html>

<head id=“Head1”><title>

</title>

Our CSS link goes here

Our Javascript (that contains Jquery) goes here

<script type=“text/javascript” src=“/Javascript/jquery.easing.1.3.js<view-source:http://www.maximuscle.com/Javascript/jquery.easing.1.3.js>”></script>

<script type=“text/javascript” src=“/Javascript/XFSMitigator.js<view-source:http://www.maximuscle.com/Javascript/XFSMitigator.js>”></script>

<script type=“text/javascript” src=“//assets.transloadit.com/js/jquery.transloadit2.js<view-source:http://assets.transloadit.com/js/jquery.transloadit2.js>”></script>

<script type=“text/javascript”>

// We call .transloadit() after the DOM is initialized:

$(document).ready(function() {

$(‘#UploadForm’).transloadit({

wait: true,

autoSubmit: false

});

});

</script>

</head>

<body>

<div id=“header”>

</div>

<div id=“content”>

<h2>Transloadit uploader</h2>

<form id=“UploadForm” action=“http://api2.transloadit.com/assemblies” enctype=“multipart/form-data” method=“post”>

<input type=“hidden” name=“params” value=“{"auth":{"key":"REDACTED"},"template_id":"REDACTED","redirect_url":"url_to_redirect_goes_here"}” />

<input type=“file” name=“my_file” multiple=“multiple” id=“file” />

<input type=“submit” value=“Upload” />

</form>

</div>

</body>

</html>

This doesn’t (I’ve removed some content to make it shorter):

<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>

<head>

<title> </title>

Our CSS link goes here

Our Javascript (that contains Jquery) goes here

<script type=“text/javascript” src=“/Javascript/jquery.easing.1.3.js<view-source:http://www.maximuscle.com/Javascript/jquery.easing.1.3.js>”></script>

<script type=“text/javascript” src=“/Javascript/XFSMitigator.js<view-source:http://www.maximuscle.com/Javascript/XFSMitigator.js>”></script>

Google analytics tracking goes here

</head>

<body class="conten ">

<div id=“Background”>

<div id=“Container”>

<div id=“Body” >

<!-- Page content Begins →

<h1 class=“imageOnly”><span >Fitness Heroes 2011</span></h1>

<div id=“MainContent” class=“grid4-1-3r”>

<div class=“first”>

<script type=“text/javascript” src=“http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js\view-source:http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>

<script type=“text/javascript” src=“http://assets.transloadit.com/js/jquery.transloadit2.js\view-source:http://assets.transloadit.com/js/jquery.transloadit2.js”></script>

<style type=“text/css”>

.editor {padding-left: 4px; display:block;}

.editor button {background: url(); color: #111;}

.editor table {margin: 0;}

.currentStep {font-size: large}

</style>

<script type=“text/javascript” src=“/Editor/scripts/wysiwyg.js<view-source:http://www.maximuscle.com/Editor/scripts/wysiwyg.js>”></script>

<script type=“text/javascript” src=“/Editor/scripts/wysiwyg-settings.js<view-source:http://www.maximuscle.com/Editor/scripts/wysiwyg-settings.js>”></script>

<div id=“Lib_Dynamic_Zone3_ctl00_UploadDIV” class=“contentBox”>

<h2>Upload images or videos</h2>

<p>

Welcome back ; please upload images or videos below

</p>

<form id=“MyForm” action=“http://api2.transloadit.com/assemblies” enctype=“multipart/form-data” method=“post”>

<input type=“hidden” name=“params” value=“{"auth":{"key":"REDACTED"},"template_id":"REDACTED","redirect_url":"url_to_redirect_goes_herequot;}” />

<input type=“file” name=“my_file” multiple=“multiple” id=“file” />

<input type=“submit” value=“Upload” />

</form>

</div>

<script language=“javascript” type=“text/javascript”> //Limit the number of characters entered

function limitText(limitField, limitNum) {

if (limitField.value.length > limitNum) {

limitField.value = limitField.value.substring(0, limitNum);

alert(‘You have reached the limit of words to use’);

}

}

</script>

<script type=“text/javascript” src=“/Javascript/editor.js<view-source:http://www.maximuscle.com/Javascript/editor.js>”></script>

<script type=“text/javascript”>

// We call .transloadit() after the DOM is initialized:

$(document).ready(function() {

$(‘#MyForm’).transloadit({

wait: true,

autoSubmit: false,

modal: true

});

});

</script>

Regards,

Roberto

________________________________ www.maximuscle.com www.maxitone.com www.maxifuel.com

Maxinutrition Ltd. 1 Horizon Point, Swallowdale Lane,
Hemel Hempstead, Hertfordshire HP2 7FZ, UK | Seriously Fit Food | Co. Reg. 03084288 | VAT No. GB 821 5293 44
Maxinutrition is a wholly owned subsidiary of GSK.
--------------------------------------------------------------------------------
DISCLAIMER
This email and any files transmitted with it are confidential and intended solely for the individual or entity to whom they are addressed. If you are not the named addressee you should not disseminate, distribute, copy or alter this email. Any views or opinions presented in this email are solely those of the author and might not represent those of Maxinutrition.

Although Maxinutrition Ltd has taken precautions to ensure no viruses are present in this email, the company cannot accept responsibility for any loss or damage arising from the use of this email or attachments.

GSK has a strict code of conduct which requires its employees to operate in full compliance with applicable competition laws and we expect our customers to similarly act in accordance with the law. GSK’s employees are instructed to decline participation in activities which they consider could breach those rules. Any Recommended Selling Prices provided by GSK are for guidance only and are based on GSK’s assessment of market information obtained from legitimate sources. It is up to the retailer to determine its retail prices.

________________________________
This e-mail was sent by GlaxoSmithKline Services Unlimited
(registered in England and Wales No. 1047315), which is a
member of the GlaxoSmithKline group of companies. The
registered address of GlaxoSmithKline Services Unlimited
is 980 Great West Road, Brentford, Middlesex TW8 9GS.

From what I see the main difference is that the wysiwyg editor is loaded in the example that doesn’t work.

Is the editor maybe adding an event listener to the submit form that would prevent the form from executing its submit() event?

By the way

See the view-source tags there. That seems wrong, but it might be our support software having added that.

Hi Tim, thanks for your reply

After I sent my previous email I had spotted the problem with the ‘src=“//assets…”’ (which appears on you page http://transloadit.com/docs/the-minimal-integration, step 4, which is where I copied the code from); anyway, correcting the url doesn’t fix the problem.

As for the wysiwyg editor, it’s a third party tool and I don’t want to start debugging it (big job!); but the form is being submitted (and the file is being uploaded) regardless of this javascript being present or not; the problem is that the progress bar is not being shown; in other works, the browser itself is posting the file, not the transloadit engine

Regards,

Roberto

Can you put this up somewhere on the web with all files involved? Then I can help you debug this better.

Hello

Sorry it take me a while to reply

My company has decided for the time being to upload the images for our application to our own servers

Thanks for all your help though

Regards,

Roberto

Hey there alright. I would love to help you get this resolved. Please let us know as soon as your company changes their opinion. Best of luck.