I would like to use Real Uploader to resize images before uploading them to the server.
So far everything seems to work just fine, except for the resizing of the images before upload.
I do use Django for server side, but I don't think that should be a problem. Images can be uploaded, but they are simply too big to be handled by the server.
I have tested this on Chrome and Firefox.
The way I have implemented it so far:
<head>
<script src="{% static "js/realuploader-min.js" %}"></script>
<link href="{% static 'css/realuploader/classic.css' %}" rel="stylesheet">
</head>
<body>
<h1>Page title</h1>
<div id="targetElement"></div>
<script type="text/javascript">
var uploader = new RealUploader("#targetElement",
{
url: "{% url "gallery:upload_image" object.pk %}",
accept: ["image/*"],
language: "nl_NL",
resizeImage: {
maxWidth: 100,
maxHeight: 200,
scaleMethod: 3
},
previews: false
}
);
</script>
</body>
This all seems simple enough, so I am probably missing something very simple here.
I hope someone can help me out.
Update 1
I have just found something else:
When I upload the files it shows an error message: SyntaxError: Unexpected
The files are still uploaded to the server, though.
Related
I've been trying to get the DataTables plugin to work on my webserver, but it fails. On localhost, it works perfectly, but on the server, it shows all of the records without pagination and says "showing 0/0 of 0 entries", and when I attempt to use the search function, I get "No data is available in table". It seems like DataTables is not recognizing the data somehow.
I opened the console to check for errors, but I get none.
I'm using CPanel to handle everything.
Here is the relevant code:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- Datatables CDN -->
<link rel = "stylesheet" type = "text/css" href = "https://cdn.datatables.net/1.11.0/css/dataTables.bootstrap.min.css">
<script src = "https://cdn.datatables.net/1.11.0/js/jquery.dataTables.min.js"></script>
<script src = "https://cdn.datatables.net/1.11.0/js/dataTables.bootstrap.min.js"></script>
</head>
For the table data, I put data in myself for testing. Here is a sample:
<script>
let accountCreationData = [
{ AccountCreationEmail: 'Doomguy#doomguy.com', AccountCreationSendDate: '9/8/2021'},
{ AccountCreationEmail: 'Doomguy#doomguy.com', AccountCreationSendDate: '8/8/2021'},
{ AccountCreationEmail: 'Doomguy#doomguy.com', AccountCreationSendDate: '8/8/2021'},
............
And then I built the table like so:
dataHtml1 += `<tr class="notFirst"><td class = "AccountCreationClass"><div>${account.AccountCreationEmail}</div></td><td class = "AccountCreationClass"><div>${account.AccountCreationSendDate}</div></td><td><div class = "redCell"><b> Yes</b></div></td></tr>`;
And the script for the DataTables:
<script>
$(document).ready(function() {
$('#AccountCreationInvitationTable').DataTable({
'ordering': false,
'lengthChange': false,
});
$('#ActiveAccountTableTableID').DataTable({
'ordering': false,
'lengthChange': false,
});
});
</script>
Here is what it looks like on localhost:
Here is what it looks like on the webserver:
I think the problem lies somewhere in the configuration of the webserver that I'm using, which is beyond my talents. Here is a link to a page where I found a solution that may work, if anyone else is facing this issue later.
Keep in mind that I did not solve the problem. This link is only a lead that I found to a possible solution.
I have decided to pursue other methods of pagination.
https://github.com/yajra/laravel-datatables/issues/2016
i'm trying to make cloudinary direct upload working but something in the documentation is missing... here are the steps i'm doing:
Controller:
/**
* MyaccountController
*
* #description :: Server-side logic for managing myaccounts
* #help :: See http://sailsjs.org/#!/documentation/concepts/Controllers
*/
var cloudinary = require('cloudinary');
cloudinary.config({
cloud_name: 'MyCloudName',
api_key: 'MyAPIKey',
api_secret: 'MyAPISecret'
});
Now this is my layout:
<!--SCRIPTS-->
<script type="text/javascript" src="/js/dependencies/sails.io.js"></script>
<script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/js/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="/js/jquery.fileupload.js"></script>
<script type="text/javascript" src="/js/jquery.cloudinary.js"></script>
<script src="../node_modules/cloudinary-jquery-file-upload/cloudinary-jquery-file-upload.js"></script>
<script type="text/javascript">
cloudinary.cloudinary_js_config();
var cloudinary_cors = "http://" + window.location.host + "/cloudinary_cors.html";
console.log(cloudinary_cors);
cloudinary.uploader.image_upload_tag('photo', { callback: cloudinary_cors });
$(".photo").cloudinary_fileupload();
// Using the config function
var cl = cloudinary.Cloudinary.new();
cl.config( "MyCloudName", "MyAPIKey");
/*
$.cloudinary.config({ cloud_name: 'MyCloudName', api_key: 'MyAPIKey'});
</script>
My form:
<form action="" method="post" enctype="multipart/form-data" class="upload_form">
<div class="form-group">
<label>Foto de perfil</label>
<input type="file" name="photo" id="photo" class="photo">
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Cargar</button>
</div>
</form>
I don't get why it isn't working, in the docs it says Cloudinary's jQuery plugin requires your cloud_name and additional configuration parameters to be available. Note: never expose your api_secret in public client side code.
To automatically set-up Cloudinary's configuration, include the following line in your view or layout:
cloudinary.cloudinary_js_config()
This is done...
Direct uploading from the browser is performed using XHR (Ajax XMLHttpRequest) CORS (Cross Origin Resource Sharing) requests. In order to support older browsers that do not support CORS, the jQuery plugin will gracefully degrade to an iframe based solution.
This solution requires placing cloudinary_cors.html in the static folder of your Node application. This file is available in the html folder of Cloudinary's Javascript library. The following code builds a URL of the local cloudinary_cors.html file:
Done...
Direct upload file tag
Embed a file input tag in your HTML pages using the image_upload_tag view helper method.
The following example adds a file input field to your form. Selecting or dragging a file to this input field will automatically initiate uploading from the browser to Cloudinary.
cloudinary.uploader.image_upload_tag('image_id', { callback: cloudinary_cors });
this is what i don't get... this is the uploader? how should i use it? and then i don't know what else to do, i'm using different docs to make it work but nothing helps... I hope anyone who did this can help me, thanks!
On controller initialize cloudinary as
var uploader = cloudinary.uploader.image_upload_tag('image_id', { callback: cloudinary_cors, html: { multiple: 1 } });
and pass it to view and render it over there,
<%-uploader%>
then use jquery to get data:
$('.cloudinary-fileupload').bind('cloudinarydone', function(e, data) {}
you can use this script to bind the data to some hidden fields inside your form and
cloudinary-fileupload will be generated when <%-uploader%> is rendered
In addition to CodeBean's answer, note that it seems that there are different ways of using Cloudinary that are mixed here (in the original code as was in question).
Controller
As far as it can be seen from here, the MyaccountController controller doesn't do a thing:
You're requiring "cloudinary" - presumably from npm install, which creates an instance of the jQueryless Cloudinary class.
The variable is local to the controller so has no effect on the rest of the code
View:
Only one of these lines is required (preferably the second one):
<script type="text/javascript" src="/js/jquery.cloudinary.js"></script>
<script src="../node_modules/cloudinary-jquery-file-upload/cloudinary-jquery-file-upload.js"></script>
This method returns a string with the <script> tag. The string should be then embedded in the HTML code. It is a server side code.
Here, it does nothing.
cloudinary.cloudinary_js_config();
If you're using the jQuery File Upload code, you should refer to $.cloudinary. cloudinary was never defined in your layout.
Now you're creating a jQueryless instance, which you don't use afterwards.
var cl = cloudinary.Cloudinary.new();
cl.config( "MyCloudName", "MyAPIKey");
Finally, there's an open-ended comment with the code you were supposed to use in the beginning of the whole script:
/*
$.cloudinary.config({ cloud_name: 'MyCloudName', api_key: 'MyAPIKey'});
Regardless of CodeBean's response, you still need to config $.cloudinary.
This my first time asking question on StackOverflow. :-)
I have a fairly complex page to be displayed involving 20+ pics, 4+ css, 6+ javascript files to be loaded. Because this page is intended to be displayed on mobile phone, I would love it to be pre-loaded (preferably with progress) so to improve user experience. I was looking at some JS libs such as Preload.js but really wondering how I can combine it with my view.
Here are some of the files:
show.blade.php -
#extends('page')
#section('title')
{{ $page->title }}
#stop
#section('header')
#include('pages._navheader')
{!! $page->header !!}
#stop
#section('content')
#include('pages._nav')
{!! $page->content !!}
#stop
#section('footer')
<script type="text/javascript" src="/js/plugins/jquery/jquery.min.js"></script>
#include('pages._navfooter')
{!! $page->footer !!}
<!-- WeChat Scripts -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
wx.config(<?php echo $js->config(array('onMenuShareTimeline', 'onMenuShareAppMessage'), true, false) ?>);
</script>
<script type="text/javascript" charset="utf-8">
alert('{{ $url }}');
wx.ready(function () {
var shareData = {
title: '{{ Request::session()->get('nickname')}}recommends：{{ $page->title }}',
desc: '{{ $page->description }}',
link: '{{ $url }}',
imgUrl: '{{ $page->thumbnail_url }}'
};
wx.onMenuShareAppMessage(shareData);
wx.onMenuShareTimeline(shareData);
});
wx.error(function (res) {
alert(res.errMsg);
});
</script>
<!-- End WeChat Scripts -->
#stop
$page->header -
<link rel="stylesheet" href="/css/bootstrap/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/products/style.css">
$page->content - some HTML code for the page (with many graphics)
Also the #inlcude partials contain css/js/html neccessary for navigation menu.
So to load all these files located everywhere seems like a big mess. Is there a way to put them into preload nice and clean? Thank you very much in advance.
This is not laravel specific, but you can instruct the browser to preload a given url in the background. However, this kind of preloading will be likely prevented on mobile phones (for which you aim to gain speed) when on a paid mobile network.
To enable this functionality (modern browsers only), use the link prefetch element, put into the header:
<link rel="prefetch" href="url/to/preload">
The instruct-the-browser expression should be emphasized, as this will let the browser decide whether or not it is feasible to preload the specified URL, thus it might not work instantly. However, you should notice a significant decrease in loading times.
Hi i'm trying to implement the rainyday.js into a project i'm working on however I have no experience with Javascript so i'm struggling.
Basically the code currently calls an online image (from imgur) and this works fine. But when I try and call a local image it does not display the effect, just the local image.
Is there any easy way to make this code call a local image rather than a web image?
Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>rainyday.js</title>
<link rel="stylesheet" type="text/css" href="../styles/animation.css"/>
<script src="../misc/jquery.min.js" type="text/javascript"></script>
<script src="rainyday.min.js"></script>
<script>
function run() {
var image = document.getElementById('background');
image.onload = function() {
var engine = new RainyDay({
image: this
});
engine.rain([ [3, 3, 0.88], [5, 5, 0.9], [6, 2, 1] ], 100);
};
image.crossOrigin = 'anonymous';
image.src = 'http://i.imgur.com/f7bpv.jpg';
}
</script>
</head>
<body onload="run();">
<div class="rainWrapper1">
<img id="background" alt="background" src="" />
</div>
</body>
</html>
A link to the JS on Github:
https://github.com/maroslaw/rainyday.js/blob/master/rainyday.js
Thanks for the help!
Have you tried it in Firefox? It works for me there, however in Chrome the js execution is denied by the error "Cross-origin image load denied by Cross-Origin Resource Sharing policy." This means, that the Server you're using (i.e. none) does not send a valid cross-origin header. See also this related question. If you're just using this for development you can start chrome with the flag --disable-web-security which should allow you to circumvent same origin policy. Otherwise you will have to run a server supporting CORS somewhere.
Looking to stream a radio station on my website, we also host the streaming but from a different domain.
Just getting this error:
Task Queue failed at step 5: Playlist could not be loaded due to crossdomain policy restrictions
Code on domain A:
<div id="mediaplayer">Loading...</div>
<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>
<script type="text/javascript">
jwplayer("mediaplayer").setup({
flashplayer: "/jwplayer/player.swf",
playlistfile: "http://domainB/stream.m3u",
image: "/images/listening.jpg",
type: "sound",
allowscriptaccess:"always",
width:300,
height:300
});
</script>
Just having no luck, tried a variety of options...
Am I wasting my time with out crossdomain.xml on domain B ? (of which I have no access to at the moment, but maybe able to get access to soon)
The stream works fine from itunes, winamp etc..
Okay, the problem was:
The url for the m3u file isn't the actual url for the stream.
I needed to open the m3u file in a text editor, and use that url, which included port etc.
<script type='text/javascript' src='/jwplayer/jwplayer.js'></script>
<div id='media'></div>
<script type='text/javascript'>
jwplayer('media').setup({
'flashplayer': '/jwplayer/player.swf',
'file': 'http://xx.xxxxxx.xxx:80/xxxxfm',
'provider': 'sound',
'controlbar': 'bottom',
'image': "/images/listening.jpg",
'width': '300',
'height': '300'
});
</script>
this code seems to work, no crossdomain.xml needed, it was requesting one only because the url was incorrect.