I am trying to use the Filepicker IO API to let users upload images. I am trying to duplicate the steps shown in the "get started" video, but I am running into a road block. The Filepicker opens fine, but it doesn't seem to be calling the javascript function (openFilePicker()) I have in the div (when the filepicker settings are set in the div, then it works). Also, after I upload an image, I am not sure how to get the information so I can display it on another page (store it with php, etc..) If you could help me out I would really appreciate it. Here is the code:
<script type="text/javascript">
function openFilePicker() {
filepicker.setKey('MYKEYHERE');
filepicker.pick({
mimetypes: ['image/*', 'text/plain'],
container: 'window',
services:['COMPUTER', 'FACEBOOK', 'GMAIL', 'PICASA', 'DROPBOX', 'INSTAGRAM', 'FLICKR'],
},
function(FPFile){
console.log(JSON.stringify(FPFile));
//UPLOAD COMPLETE
UpdateHTMLWithUploadedFile(FPFile.url);
},
function(FPError){
console.log(FPError.toString());
}
);
}
</script>
<script type="text/javascript" src="//api.filepicker.io/v1/filepicker.js"></script>
<div class="row margin" id='img-row'>
<input id="filename" disabled="disabled" class="input-text file-input-value" type="text" style="width: 360px;" value=""/>
<input name="img" data-fp-class="form-simple-action-btn filepicker_launcher" data-fp-button-text="Choose Image" data-fp-container="modal" type="filepicker" data-fp-apikey="MYKEYHERE" id='campaign-img-input' onclick="javascript:openFilePicker()">
</div>
You seem to be mixing the documentation on the filepicker.io widgets with that of the filepicker.io javascript api. If you'd like to bind to the onclick event of an object and use the filepicker.pick call directly, you should use a standard button rather than a filepicker input type, i.e.
<button onclick="javascript:openFilePicker()">Choose Image</button>
Related
I'm using Admin LTE theme and I have added this input for uploading image:
<div class="form-group">
<label for="sendImage">Send Image</label>
<div class="input-group" id="dyanimc-field2">
<div class="custom-file" >
<label class="custom-file-label" for="exampleInputFile">Choose file</label>
<input type="file" class="custom-file-input" id="sendImage" name="product_image[]">
</div>
</div>
</div>
But when I browse and image, it should be showing the image name which is selected but it doesn't!
So by default it looks like this:
And when I choose an image it should be showing image name instead of Choose file, like this:
So what's going wrong here? How can I show the image name when it's selected before uploading?
I can across similar problem while designing a custom user dashboard using Admin LTE HTML template.
After few googling, I realized it was a known issue in bootstrap, this github issue comment solved the problem for me.
I was able to get it working using this third-party library and the lines of code below solved it for me.
<script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.min.js"></script>
<script>
$(document).ready(function () {
bsCustomFileInput.init()
})
</script>
I Have Created Dynamic FilePicker Control on Button Click Event of Jquery
but the button click event of this dynamic control does not open the filepicker.io popup where files get uploaded on filepicker...
Below is the html code by which i have created this control in jquery
<input type="filepicker" data-fp-apikey="Acdgfv0GWQXyMKwqVMfMHz" data-fp-mimetypes="image/*" data-fp-container="modal" data-fp-services="COMPUTER" class="uploadImg btn border-blue-btn" tabindex="31" style="display:none"> <button type="button" class="uploadImg btn border-blue-btn">Pick File</button>
Filepicker javascript library construct widgets immediately after script is loaded. Using filepicker with any client side rendering library requires manually call
filepicker.constructWidget();
method on Dom element. You need to set element type as 'filepicker' etc.
Basic example:
var input = $('<input>').attr({
type: 'filepicker',
class:'picker',
}).appendTo(config.results);
filepicker.constructWidget(input);
And full working example:
http://jsfiddle.net/krystiangw/hfg6k8u2/
Did you include filepicker.js library?
Please try this example (link: https://jsfiddle.net/gy2gLvkw/)
<script type="text/javascript" src="//api.filepicker.io/v2/filepicker.js"></script>
<input type="filepicker" data-fp-apikey="Acdgfv0GWQXyMKwqVMfMHz" data-fp-mimetypes="image/*" data-fp-container="modal" data-fp-services="COMPUTER" class="uploadImg btn border-blue-btn" tabindex="31" style="display:none" onchange="alert(event.fpfile.url)">
I've added onchange="alert(event.fpfile.url)" to input element so that the url is displayed after upload.
I'm trying out the ionic framework and it looks really nice. However, I have a problem with form submission: the form fires twice. First when the submit button is pressed, and then if I just tap anywhere on the screen. This happens both in the xcode simulator and on my iphone 4gs.
This is what I have done:
I install the sidemenu template with: ionic start myApp sidemenu.
I then simply paste this form in to the tab-dash template:
<form ng-submit="createTask(task)">
<div class="list">
<label class="item item-input">
<input type="text" placeholder="What do you need to do?" ng-model="task.title">
</label>
</div>
<div class="padding">
<button type="submit" class="button button-block button-positive">Create Task</button>
</div>
</form>
And in my controller I simply have:
$scope.createTask = function(task) {
alert(task.title);
};
This is the only change I made to the starter template, and still the form submits twice. I have no idea why. Would really appreciate some guidance here!
Remove the type="submit" from the button and remove the ng-submit from the form and move it as a ng-click on the button itself.
So you should end up with
<button ng-click(createTask) class="...">Create Task</button>
This is possibly because whenever the ng-click is called there are two calls made ,one by angular and other by ionic .As ionic and angular comes as a bundle when you are working with ionic project.
You could try one of this method.
1) have ionic and angular javascript seperated in your index.html
instead of including (ionic and angular in one javascript file)
ionic.bundle.min.js
use as
ionic.min.js
angular.min.js
2) Alternatively you can create a directive of your own instead of ng-click like below.
before that Include angular-touch.js and inject ngTouch as a module in your app in app.js
app.directive('myclick', function() {
return function(scope, element, attrs) {
element.bind('touchstart click', function(event) {
event.preventDefault();
event.stopPropagation();
scope.$apply(attrs['myclick']);
});
};
});
Hope this helps.
in your controller
$scope.createTask = function(task) {
alert(task.title);
};
add $scope.task= {}; to init
I need to show details on the popup. I don't have any idea how to do this. I need to do it in a MVC3 Razor view.
my Controller-
public ViewResult ViewDetail(Int32 id)
{
var q = from p in db.accs
where p.id == id
select p;
return View(q.FirstOrDefault());
}
my View-
<td># Html.ActionLink("View Detail", "ViewDetail", new { id=item.id }) </td>
use the Jquery UI ModalForm to show up your data.
Say you want to display the following in Modal pop-up of jquery .
<div id="displayinmodal">
<input type="file" id="file" name="file" />
<input type="submit" id="submitdata" value="Upload" />
</div>
Now write your jquery like this.
<script>
$(document).ready(function(){
$("#displayinmodal").dialog({ //displayinmodal is the id of the div you want to display in modal popup
autoOpen: true
});
});
</script>
That's it. you should get Modal popup in your browser.
Hope this helps
This kind of task isn't really what ASP.NET MVC / Razor does. Consider using a Javascript library like JQuery UI Dialog. You have to add several of the JQuery UI scripts to your page, but the payoff is a very simple API; you can create a basic dialog out of any HTML element (say with id mydiv) with one line of code:
$( "#mydiv" ).dialog();
And of course there are customizations and themes you can apply.
Of course, you could simply use the Javascript:
alert("my details here");
to get a basic modal popup, but I'm guessing that's not what you want.
If you want a simple no frills modal (with not much content) you can use a JavaScript alert like so:
alert('Hello from a modal popup');
If you would like a prettier option a common solution is to use jQuery UI's dialog which allows for a modal option. Take a look here for a demo of what you get with this option:
http://jqueryui.com/demos/dialog/#modal
The code is pretty simple; the below should do everything for you using Google's CDN as a source for the scripts and stock jQuery UI CSS:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function() {
$( "#details" ).dialog({
modal: true
});
});
</script>
<div id="details">
Hello from a modal popup
</div>
I'm trying to use jQuery show and hide which seem to work ok in Safari, when I try it on the iPhone, it doesn't work at all. Here is my code;
<script type="text/javascript">
$("#showSearch").click(function () {
$("#searchform").show(1000);
});
</script>
It's a button that when clicked, will show the search form. The form doesn't show on iPhone. Also when I add $('#showSearch').remove(); in there, it doesn't get removed, even if I add a function as the second parameter of show() it still doesn't hide the button.
Thanks for your help.
jQuery Docs:
http://api.jquery.com/show/ (Shows)
http://api.jquery.com/hide/ (Hides)
http://api.jquery.com/remove/ (Deletes)
http://api.jquery.com/toggle/ (Show/Hide)
Live Example:
http://jsfiddle.net/qQnsj/1/
JS
$('#viewMeButton').click(function() {
$('#viewMe').toggle(); // used toggle instead of .show() or .hide()
});
$('#removeMeButton').click(function() {
$('#removeMe').remove();
});
HTML
<div data-role="page" id="home">
<div data-role="content">
<div id="viewMe">
Hello I'm in the div tag, can you see me?
</div>
<br />
<button id="viewMeButton">Show / Hide</button>
<br />
<div id="removeMe">
Click the button to remove me
</div>
<br />
<button id="removeMeButton">Remove Me</button>
</div>
</div>
I know this is an old question, but I recently had a similar problem. Hopefully this will help someone else if they find this question, too.
I was trying to hide a set of ui-block-* elements in a JQM grid. On the same grid cells, my media query for the iPhone was setting display: block !important. That was winning.
The !important directive was unnecessary in my case and when I removed it the calls to hide() and show() began working as expected.