We are using Cloudinary UI widget.
When the user clicks on a button to upload, we show this widget.
Once, the user clicks on the select file button, window dialog is open for selection of files.
But, is there any way to bypass this popup & directly make the user click on select file button programmatically by means of any Cloudinary upload UI parameters.
You can load the widget in a div. For example-
<h2>Make sure to update cloud_name and upload_preset.</h2>
<div id="inline_container"></div>
<div id="thumbnails"></div>
cloudinary.openUploadWidget(
{
cloud_name: 'cloud_name',
upload_preset: 'upload_preset',
cropping: 'server',
multiple: false,
max_files: 1,
thumbnails: '#thumbnails',
inline_container: "#inline_container",
keep_widget_open: false,
cropping_show_dimensions: true,
sources: ['local']
},
function(error, result) {
console.log(error, result);
if (result != null)
$('#inline_container').html(""); // Will remove the widget after successful upload
}
);
Related
I'm practicing building a Hybrid Mobile app with Quasar, Vue and Vuex.
I've successfully added my form input fields to my Vuex store but I don't know how to upload a file, in this case a photo, within my Form.
Here is my q-file input from my form, with the data.
<q-file
v-model="mealToSubmit.photo"
label="Upload File"
outlined
>
Data:
data () {
return {
mealToSubmit: {
name: '',
description: '',
photo: null,
grams: '',
calories: '',
visible: false
}
}
}
After I fill in the Form and click Save, all of the data appears on the page except for the photo I selected. In the console I get a 404 error:
404 http://localhost:8080/img/null 404 (Not Found)
I can see the problem here is that it's displaying null, instead of the name of the photo I upload, which is why I'm getting a 404 error.
Here are two screenshots, one of me filling in the Form and second is the data being displayed properly except for the photo, with the error message in the console.
NOTE:
Just to add to this, I've uploaded files before using Vue js and Bootstrap-Vue. I add an #change event on the File input with a v-model like this:
<b-form-group label="Upload Profile Photo (optional)" label-for="photo_id">
<b-form-file
v-model="profileData.photo_id"
id="photo_id"
placeholder="Choose a file..."
#change="attachImage"
accept=".jpg, .jpeg, .png"
></b-form-file>
</b-form-group>
Than in the Methods{}:
methods: {
attachImage(evt) {
const file = evt.target.files[0];
let reader = new FileReader();
reader.addEventListener('load', function() {
}.bind(this), false);
reader.readAsDataURL(file);
},
}
And then I bind the data using FormData(); and send it to the backend. This approach isn't working with the Quasar file upload input and the code that I have above.
I got it now:
<q-file
#input="getFile"
label="Upload file"
/>
methods: {
getFile(file) {
// file is in the file variable
this.mealToSubmit.photo = file
}
}
I've seen that when you add an Attachment in Outlook, you can automaticly add an attachment from a cloud service.
Is there a possible way to add a custom entry to this list?
I offer to you to use OneDrive file picker , with this you can simply add button to your add-in html and then it's open the log-in page and after user is log-in he could choose the files from one drive.
The steps wrote in the link but I write the main steps here:
1.register your app in Microsoft Application Registration Portal .
2.Add the js refrence in your js file of your add-in:
<script type="text/javascript" src="https://js.live.net/v7.0/OneDrive.js">
</script>
3.Add button to your add-in html page:
<button class="oneDriveButton" id="btnOneDrive" ><img src="https://js.live.net/v5.0/images/SkyDrivePicker/SkyDriveIcon_white.png" style="margin-right: 10px; height: 20px;">Open from OneDrive</button>
4.In your js file of add-in open the picker:
$('#btnOneDrive').click(function () {
var odOptions = {
clientId: "your client id from your app registration ",
action: "download",
multiSelect: true,
openInNewWindow: true,
linkType: "query",
advanced: { redirectUri: "your redirect uri from app registration" },
success: function (files) {
},
cancel: function () { /* cancel handler */
},
error: function (e) { /* error handler */
}
};
OneDrive.open(odOptions); });
Put attention:
Your clientId and your redirectUri must be equal to this you
set when you register your app in the first step.
You could change the option by what you want ,look here under
picker options .
Thats all , you get the files in sucess handler function and you could do whatever you want with them.
Good luck!
am using kendo data vizualization api to render dashboard page with charts
user does some selection on page which triggers ajax call and draws the charts on this dashboard page.
i need to add the feature to export the dashboard page with multiple charts to pdf
i tried phantom js but am not clear how to make it work in this context where current user is already logged in and on dashbaord page and clicks on export to pdf button.
my web layer is using asp.net 3.5 and i dont want to mix the mvc.dll solution as posted on kendo site in my project.
has any one tried this before ? please hlp.
thanks.
This JS code exports all rendered to container element with ID 'your_container_with_charts_inside' charts to PDF:
$( document ).ready(function() {
var $element = $('#your_container_with_charts_inside');
kendo.drawing.drawDOM($element)
.then(function (group) {
return kendo.drawing.exportPDF(group, {
paperSize: "auto",
margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
});
})
.done(function (data) {
kendo.saveAs({
dataURI: data,
fileName: "export.pdf",
});
});
});
Also you might want to check Chart API / PDF Export demo
I have an static HTML page I want to pop up using Magnific Popup when the page loads. In the examples on the site he only shows clicking a link that has the url of the page. I don't want a link but just page load. How do I get the url to be called without a link? I have the onload figured out
$(window).load(function () {
$.magnificPopup.open({
type: 'ajax',
showCloseBtn: true
}, 0);
});
So for example I want test.html to show up in the popup onload. Not sure how this is done.
You can initialize the magnific popup with a DOM Element created by jQuery and then click it. For example:
$(function() {
$('<a href="test.html">').magnificPopup({
type: 'ajax'
}).click();
});
If you need the link appear in the page, then just use appendTo function after click.
i use casperjs for automatical click on twitter share button. Twitter use iframe for create this buttons:
<iframe src="some src">
</iframe>
When i click it open popup window, but when i trying to login into twitter, i got error, form not found
casper.withFrame(0) { //it twitter iframe
this.fill("#twitter-widget-0 form#update-form", {
"session[username_or_email]": "myemail#email.com",
"session[password]": "password"
}, true);
});
Why? It possible with casperjs?
I'm not familiar with Twitter widgets, but are you sure #twitter-widget-0 is not the id of the iframe you just switched in to? It seems that way, because I found code like this: https://dev.twitter.com/discussions/11450
If you switched into the iframe, you cannot access elements from the parent page anymore, and you are trying to access the iframe element, which resides in the parent.
You should just select form#update-form, because it's not a child element of #twitter-widget-0: it is just an element that is contained in the iframe.
If so, the solution is simply omitting #twitter-widget-0 from your selector inside the iframe.
casper.withFrame(0) { //it twitter iframe
this.fill("form#update-form", {
"session[username_or_email]": "myemail#email.com",
"session[password]": "password"
}, true);
});