Beginner's question here.
I'm trying to upload the photo from a webpage directly to cloudinary.
Here is the jQuery plugin that Cloudinary recommends to use.
Unfortunately the plugin is not documented yet, and doesn't have a clear "example.html" file.
I've tried to get my head around the plugin code, but with no success so far.
Can somebody point me to the right direction in terms of what "example.html" should look like?
Thanks.
Download the Jquery SDK and the server sdk.
Here is the code with a java server side :
Generating the signature on server side :
Here is the JSP code in java :
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# page import="java.util.Map" %>
<%# page import="java.util.HashMap" %>
<%# page import="java.sql.Timestamp" %>
<%# page import="com.cloudinary.Cloudinary" %>
<%
String timestamp=(new Long(System.currentTimeMillis() / 1000L)).toString();
Cloudinary cloudinary = new Cloudinary("cloudinary://CLOUDINARY_URL");
Map<String, Object> params = new HashMap<String, Object>();
Map options = Cloudinary.emptyMap();
boolean returnError = Cloudinary.asBoolean(options.get("return_error"), false);
String apiKey = Cloudinary.asString(options.get("api_key"), cloudinary.getStringConfig("api_key"));
if (apiKey == null)
throw new IllegalArgumentException("Must supply api_key");
String apiSecret = Cloudinary.asString(options.get("api_secret"), cloudinary.getStringConfig("api_secret"));
if (apiSecret == null)
throw new IllegalArgumentException("Must supply api_secret");
params.put("callback", "http://www.mcbjam.com/Scripts/vendor/cloudinary/html/cloudinary_cors.html");
params.put("timestamp", timestamp);
String expected_signature = cloudinary.apiSignRequest(params, apiSecret);%>
You can have the CLOUDINARY_URL on your Cloudinary Dashboard.
I use the cloudinary.apiSignRequest method wich is include in server cloudinary sdk. I sign the callback and the timestamp.
The HTML and Javascript
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="../Scripts/vendor/jquery-1.9.1.min.js"></script>
<script src="../Scripts/vendor/cloudinary/jquery.ui.widget.js"></script>
<script src="../Scripts/vendor/cloudinary/jquery.iframe-transport.js"></script>
<script src="../Scripts/vendor/cloudinary/jquery.fileupload.js"></script>
<script src="../Scripts/vendor/cloudinary/jquery.cloudinary.js"></script>
</head>
<body>
<script type="text/javascript">
$.cloudinary.config({"api_key":"YOUR_API_KEY","cloud_name":"YOUR_CLOUD_NAME"});
</script>
<input name="file" type="file" id="uploadinput"
class="cloudinary-fileupload" data-cloudinary-field="image_upload"
data-form-data="" ></input>
<script>
var data = { "timestamp": <%= timestamp %>,
"callback": "http://YOUR_DOMAIN/cloudinary_cors.html",
"signature": "<%= expected_signature %>",
"api_key": "YOUR API KEY" };
$('#uploadinput').attr('data-form-data', JSON.stringify(data));
</script>
</body>
</html>
Put the cloudinary_cors.html on your host and modify the path on the html. Set your APIKEY and your cloud name.
<%= timestamp %> and <%= expected_signature %> are the element calculate on java. ( You can do the same on php).
I use this code on my website here http://paint.mcbjam.com
You have more details here : http://mcbjam.blogspot.fr/2013/05/integrer-cloudinary-pour-realiser-des.html in French.
Please see the recently published blog post that covers direct uploading from the browser to Cloudinary using jQuery: http://cloudinary.com/blog/direct_image_uploads_from_the_browser_to_the_cloud_with_jquery
You cannot upload images to Cloudinary just by using plain html. You'll need a server that signs your request params. So,here is your example.html file:
<html>
<head>
<title></title>
<script src='jquery.min.js' type='text/javascript'></script>
<script src='jquery.ui.widget.js' type='text/javascript'></script>
<script src='jquery.iframe-transport.js' type='text/javascript'></script>
<script src='jquery.fileupload.js' type='text/javascript'></script>
<script src='jquery.cloudinary.js' type='text/javascript'></script>
<script type = "text/javascript">
$.cloudinary.config({ cloud_name: 'sample', api_key: '874837483274837'});
</script>
</head>
<body>
<input name="file" type="file"
class="cloudinary-fileupload" data-cloudinary-field="image_id"
data-form-data="--signedData--" />
</body>
</html>
Note: The signedData in data-form-data attribute is a JSONObject generated by a server-side code which includes a sha1Hex signature of your request parameters.
An example of that would look like:
{
"api_key": "874837483274837",
"timestamp": "1234567890",
"public_id": "sample",
"signature": "de9f2c7fd25e1b3afad3e85a0bd17d9b100db4b3"
}
Also, let me make you clear that you don't need any other buttons to upload the file, just choosing the file would trigger the jQuery event and send the request parameters to Cloudinary.
You can find about generating signature on java here.
Related
I seem to have a very specific problem where something is missing and I just can't see it.
From and index.html:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" type="text/javascript" src="./js/a1.js"></script>
<script language="javascript" type="text/javascript" src="./js/a2.js"></script>
<style>
</style>
</head>
<body onLoad="javascript:Scan()">
<div id = "TheDiv">?
</div>
</body>
</html>
From onLoad, I call Scan()
function Scan()
{
divResultado = document.getElementById('TheDiv');
//instanciamos el objetoAjax
ajaxScan=objetoAjax();
ajaxScan.open("GET", "myscan.php", true);
DBScan = setTimeout(Scan,15000 );
ajaxScan.onreadystatechange=function()
{
if (ajaxScan.readyState==4)
{
//mostrar resultados en esta capa
divResultado = ajaxScan.responseText;
}
};
ajaxScan.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajaxScan.send( );
}
myscan gets data from a database and in debug, I see that information is properly transfered to divResultado above.
But the data doesn't appear in the div with id = "TheDiv"
I've done this hundreds of times before, but something somwhere has made itself
invisible to me.
In the raw data HTML, I think it appears below and outside of the context.
What am I not seeing
Because you're not writing the data to the page, you're just assigning it to a variable:
divResultado = ajaxScan.responseText;
Which means divResultado no longer refers to the element on the page, it now refers to the text from the AJAX response.
To set the text to that element, try:
divResultado.innerText = ajaxScan.responseText;
Or, if the result is HTML:
divResultado.innerHTML = ajaxScan.responseText;
i have problems to load my application. I created a Spring Web application and using Sencha cmd, i created an app inside webapp/resources folder.
This is my view.jsp
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%# page session="false" %>
<html>
<head>
<title>LOGIN</title>
<link rel="stylesheet" type="text/css" href="<c:url value="/resources/apps/BetsTrackerAuth/ext/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"/>">
<script type="text/javascript" src="<c:url value="/resources/apps/BetsTrackerAuth/ext/build/ext-all.js"/>"</script>
<script type="text/javascript" src="<c:url value="/resources/apps/BetsTrackerAuth/ext/packages/ext-theme-neptune/build/ext-theme-neptune.js"/>"</script>
<script type="text/javascript" src="<c:url value="/resources/apps/BetsTrackerAuth/app.js"/>" charset="utf-8"></script>
</head>
<body>
<h1>
LOGIN Hello world!
</h1>
<P> The time on the server is ${serverTime}. </P>
</body>
</html>
And my error is:
GET http://localhost:8084/app/app/Application.js?_dc=1433427933321 404 (Not Found)
What's wrong in my view?
It's a bit hard to say for sure without seeing your app.js file, but I would guess it is trying to load various dependencies -- namely Application.js.
Looking at the URL, I can see two levels of /app/, which tells me it's probably looking in the wrong place (for whatever reason).
Try setting the Ext.Loader paths before you load app.js:
<script type="text/javascript">
Ext.Loader.setConfig({
enabled: true,
paths: {
'MyApp': 'path/to/app'
}
});
</script>
I have a simple page which uses the mediaelement.js audioplayer plugin. The player attaches and functions correctly when loaded normally. However, when the page is loaded via ajax, the mediaelementplayer does not attach to the audio tag.
I use this code to call the file via ajax and jquery:
<html>
<head>
<link href="/test-vocabulary.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".ajax_vocab_link").click(function(evento){
evento.preventDefault();
var ajaxDivNum = $(this).attr('id').split('_')[1];
var searchTerm = $(this).attr('title');
$("#ajaxcontainer_"+ajaxDivNum).load("test-audioplayer-se.php", {chrisSearch: searchTerm}
);
});
})
</script>
</head>
<body>
<p><button class='ajax_vocab_link' id='ajaxlink_1' title='clothes'>Link to load ajax doc</button></p>
<div class='ajax_vocab_container' id='ajaxcontainer_1'>This is div id ajaxcontainer_1</div>
</body>
</html>
The audioplayer page is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- Audio Player CSS & Scripts -->
<script src="http://www.ingles23.com/audioplayer/js/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="http://www.ingles23.com/audioplayer/css/style4.css" media="screen">
<!-- end Audio Player CSS & Scripts -->
<script>
$(document).ready(function() {
$('#audio-player-vocab0').mediaelementplayer({
alwaysShowControls: true,
features: ['playpause'],
audioVolume: 'horizontal',
audioWidth: 400,
audioHeight: 120
});
});
</script>
</head>
<body>
<div class='display_vocab_container' >
<div class='display_vocab_text' >
<div class='audio-player-slim'>
<audio controls='controls' type='audio/mp3' src='/sound/mp3/i23-crear-frases-ingles-5.mp3' id='audio-player-vocab0'></audio>
</div>
</div>
</div>
</body>
</html>
I've tried many combinations including using on, live, success and moving the css/js links between the documents, but these have all made the situation worse.
What can i do get the file to attach medaielementplayer when loaded via ajax?
Try to put the mediaelementplayer() function call in the ajax success function, that worked for me. So unless you want to use .ajax instead of .load you'll need to pass it as the second argument to the load function. Or use http://api.jquery.com/ajaxSuccess/
$(".ajax_vocab_link").click(function(evento) {
evento.preventDefault();
var ajaxDivNum = $(this).attr('id').split('_')[1];
var searchTerm = $(this).attr('title');
$("#ajaxcontainer_"+ajaxDivNum).load("test-audioplayer-se.php", function() {
$('#audio-player-vocab0').mediaelementplayer({
alwaysShowControls: true,
features: ['playpause'],
audioVolume: 'horizontal',
audioWidth: 400,
audioHeight: 120
});
});
});
I have 2 login pages, login.jsp and loginMobile.jsp. Login.jsp is default login page and configured in web.xml.
On entring login.jsp a javascript method isMobile is called.
WHITHOUT CHANGING the URL, need to forward the request to loginMobile.jsp.
FRAMEWORK : struts1 , AJAX + prototype + GLASSFISH 3.1.2
2 login pages :
login.jsp
<script src="scripts/prototype.js" type="text/javascript"></script>
<script src="scripts/login.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
isMobile();
</script>
<html>
<body>
<p> AM IN LOGIN PAGE </p>
</body>
</html>
loginMobile.jsp
<script src="scripts/prototype.js" type="text/javascript"></script>
<script src="scripts/login.js" type="text/javascript"></script>
<html>
<body>
<p> AM IN MOBILE PAGE </p>
</body>
</html>
Inside login.js
function isMobile()
{
//check some conditions then call below AJAX
new Ajax.Request('/loginMobile.jsp', { method:'post' });
}
//Complain's FILE NOT FOUND !!
"C:\Users\dummy\AppData\Roaming\NetBeans\7.2.1\config\GF3\domain1\docroot\loginMobile.jsp" not found
ALSO TRIED
function isMobile()
{
//check some conditions then call below AJAX
var athena_login_url = window.location.href+'/loginMobile.jsp';
new Ajax.Request(athena_login_url, { method:'post' });
}
// Just goes to default login.jsp
Any suggestion is appreciated. Thank you in advance.
I am trying to develop a phonegap app that will call to my coldfusion server and return data to the phone app. I have seen a couple of tutorials that do not explain the code on the server side(the .cfc file). Like this one...
http://blog.ryanvikander.com/index.cfm/2012/3/28/Returning-Dynamic-Content-In-A-PhoneGap-App
I was hoping someone could provide some sample code of what the .cfc on my server would look like when it is receiving the request for data.
Here's the example code from that link:
<!doctype html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
<title>My App</title>
<script src="phonegap.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$.ajax({
url:"http://www.ryanvikander.com/test.cfc?method=getdata",
success: function(data){
var content = $("#content");
content.html(data);
},
error: function(e){
console.log(e);
}
});
});
</script>
</head>
<body>
<div id="title_bar">Test</div>
This is a test
<div id="content"></div>
</body>
</html>
The url http://www.ryanvikander.com/test.cfc?method=getdata doesn't have to be anything more than this:
<cfcomponent>
<cffunction name="getdata" access="remote" output="false">
<cfreturn "Hello World!" />
</cffunction>
</cfcomponent>
Here, the success callback function will put the string "Hello World!" into <div id="content"></div>
If the function renderdata() returned a query, you could pass the querystring parameters returnformat=json and optionally queryFormat=column to have ColdFusion convert the query data into JSON. If the returned data is formatted in JSON, then you could iterate over that data to render HTML as in any website.