Hi all Here I am using vue.js filepond for multi uploading images. So in my code I am able to upload only one image but here I want to upload multiple images and also I want to create a access point to pass the uploaded images in backend to save the data. So here I am trying alot but i am not able to do that. So please help to sort out this issue
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/filepond/dist/filepond.min.css"/>
<link
rel="stylesheet" href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css"/>
</head>
<body>
<div id="app">
<file-pond></file-pond>
</div>
<script src="https://unpkg.com/filepond-plugin-image-preview"></script>
<script src="https://unpkg.com/filepond"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-filepond#6"></script>
<script>
new Vue({
el: "#app",
components: {
FilePond: vueFilePond.default(FilePondPluginImagePreview),
},
});
</script>
</body>
</html>
Related
I have in my application a lot of generated reports with html tables, now I implemented with vuejs diagrams. But I can't get them rendered because they are in javacript.
$view = view('reports.single.print', ['stats' => $stats]);
$html = $view->render();
In normal browser mode everything is fine, but I need to get rendered html for print mode.
I tried with moving from bottom to <head>
<script type="text/javascript" src="{{ asset('assets/js/app.js') }}"></script>
but nothing changes.
My blade looks like:
<body>
#include('header')
HTML TABLE CONTENT
<diagram></diagram>
#include('footer')
<script type="text/javascript" src="{{ asset('assets/js/app.js') }}">
</body>
Can I render somehow also javascript with render() method?
I think you should try adding a closing tag (</script>).
Replace:
<script type="text/javascript" src="{{ asset('assets/js/app.js') }}">
with the following:
<script type="text/javascript" src="{{ asset('assets/js/app.js') }}"></script>
I am trying to get Kendo Ui (Free Version working). I am trying to implement the date picker with the below code but alls I get is an empty input field. Does anyone have any suggestions on how to resolve this?
<!DOCTYPE html>
<html>
<head>
<link href="/Content/kendo/2015.3.1111/kendo.common.min.css" rel="stylesheet" />
<link href="/Content/kendo/2015.3.1111/kendo.default.min.css" rel="stylesheet" />
</head>
<body>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.core.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.calendar.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.popup.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.datepicker.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.data.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.list.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.combobox.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.dropdownlist.min.js></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.multiselect.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.validator.min.js"></script>
<input id="TimeSlot" name="TimeSlot" type="datetime" />
<script type="text/javascript">
$(document).ready(function () {
debugger;
$("#TimeSlot").kendoDatePicker();
//var datepicker = $("#datepicker").data("kendoDatePicker");
});
</script>
</body>
</html>
You need to reference all these javascript files in order for the DatePicker to work. You can use the Kendo UI Custom Download tool to find out which javascript files you need to reference and to download a custom javascript file that contains everything you need:
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.core.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.calendar.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.popup.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.datepicker.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.data.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.list.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.combobox.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.dropdownlist.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.multiselect.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.validator.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.aspnetmvc.min.js"></script>
UPDATE:
Your text-box's id is "TimeSlot", but in your script you're referring to #datepicker which doesn't even exist. Change your script to this:
<script type="text/javascript">
$(document).ready(function () {
$("#TimeSlot").kendoDatePicker();
//var datepicker = $("#TimeSlot").data("kendoDatePicker");
});
</script>
By the way, you won't need kendo.aspnetmvc.min.js if you don't want to use Kendo's Html Helpers, which is not something that I would recommend if you are using asp.net MVC. With kendo.aspnetmvc.min.js, you wouldn't even need the script, you could just replace your text-box (input tag) with this:
#(Html.Kendo().DatePicker().Name("TimeSlot"))
I run a program for Cloudinary image upload using Javascript and jQuery without using server.my. My problem is that I followed the instructions for the Cloudinary jQuery plugin but the image did not upload. Kindly post the answer.
My code is the following:
<html>
<head>
<script type="text/javascript">
$.cloudinary.config({cloud_name:'mycloudname', api_key:’myapikey'});
$.ajax({
url: 'http://res.cloudinary.com/mycloudname/image/upload/v1442240142/',
type: 'POST',
success: function (response) {
$('#uploadinput').attr('data-form-data', response);
}
});
</script>
</head>
<body>
<script src='js/jquery.min.js' type='text/javascript'></script>
<script src='js/jquery.ui.widget.js' type='text/javascript'></script>
<script src='js/jquery.iframe-transport.js' type='text/javascript'></script>
<script src='js/jquery.fileupload.js' type='text/javascript'></script>
<script src='js/jquery.cloudinary.js' type='text/javascript'></script>
<input name="file" type="file" id="File1" class="cloudinary-fileupload" data-cloudinary-field="image_upload"></input>
</body>
</html>
There are various issues here:
The URL should be different, e.g.,
https://api.cloudinary.com/v1_1/mycloudname/image/upload
If you don't want to use your server, then you should use unsigned uploads, there you must also include an upload preset.
Have a look at the following for more information:
http://cloudinary.com/blog/direct_upload_made_easy_from_browser_or_mobile_app_to_the_cloud
I am trying to integrate Polymer into my Laravel app. So I created this custom web component and when I put that into my Laravel view, I get to see only blank screen. I'm using Laravel's built in web server in-case you think it can be the issue of HTML imports.
proto-element.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="proto-element" noscript>
<template>
<h1>Proto element</h1>
</template>
</polymer-element>
hello.blade.php
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Laravel PHP Framework</title>
<script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<script type="text/javascript">
function supportsImports() {
return 'import' in document.createElement('link');
}
if (supportsImports()) {
// Good to go!
} else {
// Use other libraries/require systems to load files.
}
</script>
<link rel="import" href="elements/proto-element.html">
</head>
<body>
<proto-element></proto-element>
</body>
</html>
You are using 0.5 syntax instead of 1.0 syntax in the declaration of your custom element. Here's how you would do it in 1.0.
<dom-module id="proto-element">
<template>
<h1>Proto element</h1>
</template>
<script>
Polymer({
is: "proto-element"
});
</script>
</dom-module>
I want to use Agile Uploader to resize images before upload on my server.
But when I try to upload image on server it does nothing... I mean that there is no image in POST data. I've checked POST and there is no items at all. What am I doing wrong?
Here is my code:
<html>
<head>
<script type="text/javascript" src="/static/js/jquery1.6.4.min.js"></script>
<script src="/static/js/jquery.flash.min.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="/static/css/unrelated.css" />
<script src="/static/js/agile-uploader-3.0.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="/static/css/agile-uploader.css" />
</head>
<body>
<form action="/test" method="post" id="singularDemo" enctype="multipart/form-data">
<div id="single"></div>
</form>
Submit
<script type="text/javascript">
$('#single').agileUploaderSingle({
formId:'singularDemo',
progressBarColor:'#3b5998',
flashVars:{
firebug:true,
form_action:'/test',
}
});
</script>
</body>
</html>
Most code part taken from their demo.
Thanks in advance!
you have to edit the process.php file, where you'll define the remote upload folder!
and then modify the form_action in: "form_action: process.php"