I have a site, btstats.com, that provides the following service:
"It imports a JSON file from 'Bluescan 4.0 Scanner for Android' and generates graphs and stats".
I implemented Dropbox Chooser on my site with this simple and elegant code to provide the functionality, provided by Dropbox:
<script type="text/javascript">
document.getElementById('dropbox-bt').onclick = function()
{
Dropbox.choose
({
linkType: 'direct',
extensions: ['.json'],
multiselect: false,
success: function (files)
{
var dbSelected = "File selected: ";
var filenamePanel = document.getElementById('filenamePanel');
filenamePanel.textContent = dbSelected + files[0].name;
var postLink = files[0].link;
document.getElementById('postLink').value = postLink;
var postName = files[0].name;
document.getElementById('postName').value = postName;
}
});
};
</script>
What I like about the code above is that it is small and provides me the file link and file name.
I'm thinking about implementing filepicker.io, so I can provide to users more cloud storage options.
I couldn't find an easy way to add filepicker.io's window to my site that offers these options. First, I would like to implement it using a button, and I can't find on their documentation an example with getElementById.
Would it be possible for someone to guide me or write a small filepicker.io example based on my Dropbox implementation that provides the file link and file name? I'm not a Javascript expert.
Thanks in advance.
The filepicker code is quite similar:
filepicker.setKey('yourApikey');
document.getElementById('filepickerBtn').onclick = selectFile;
function selectFile(){
filepicker.pick(
// picker options
{
extension: '.json',
},
onSuccessCallback
);
};
function onSuccessCallback(Blob){
document.getElementById('postName').textContent = Blob.filename;
document.getElementById('postlink').textContent = Blob.url;
document.getElementById('results').textContent = JSON.stringify(Blob);
};
Sample html code:
<div class="container">
<h3>Filepicker example</h3>
<p>
<button id="filepickerBtn" class="btn btn-primary">
Select json file
</button>
</p>
<p>Filename: <span id="postName"></span></p>
<p>Filelink: <span id="postlink"></span></p>
<p>Results: <pre id="results">Upload file to see results</pre></p>
</div>
And working example here
Related
So on similar sites with different themes, same core functions for laravel there is a view that has
<div class="footer__item footer__item--right"> <div class="footer__item-search"> <span class="search-wrap"><input type="text" placeholder="Search" class="search"></span> </div>
in scripts the only relative javascript code which is also already on the other site
$(document).on('keyup', '.search', function() {
var query = $(this).val().toLowerCase();
doSearch(query);
});
function OnSearch(input) {
var query = input.value.toLowerCase();
doSearch(query);
}
function doSearch(query){
$.getJSON('{{ route('frontend.game.search') }}?category1={{ $category1 }}&q=' + query, function(data) {
$('#games').html(data.data);
});
}```
so copying those makes a box appear but searches nothing
What possibly the javascript is missing to actually be called and call the laravel template view mentioned ?
I'm using FileDropJS to allow users to choose a local file and upload its content to the application.
I'm looking for a way to "choose" the same file automatically for the user, when the user comes back, without him having to drag & drop the file again every time he uses the application.
Is there an easy way to do it with FileDropJS? I looked into the docs but didn't find anything related.
Current code to allow to choose the file and assign its content to a JavaScript variable:
var file_zone = new FileDrop('file_file', file_options);
file_zone.event('send', function (files) {
files.each(function (file) {
file.readData(
function (str) {
file_content = str;
document.getElementById("file_file_label").innerHTML = '<i style="color:green;" class="fa fa-check-circle"></i> Thank you!';
},
function () { alert('Problem reading this file.'); },
'text'
);
});
});
Thanks!
I was having an issue with the ng-csv module, and I thought I would share.
The ng-csv module takes a javascript object, and converts it into a downloadable .csv file.
Here is the example code shown here: ngmodules site
The significant parts are here:
<button class="btn btn-default"
ng-csv="getArray" lazy-load="true" filename="{{ filename }}.csv" field-separator="{{separator}}"
>Export to CSV (Lazy Load)
</button>
And Here:
<script>
var myapp = angular.module('myapp', ["ngSanitize", "ngCsv"]);
myapp.controller('myctrl', function ($scope) {
$scope.filename = "test";
$scope.getArray = [{a: 1, b:2}, {a:3, b:4}];
$scope.addRandomRow = function() {
$scope.getArray.push({a: Math.floor((Math.random()*10)+1), b: Math.floor((Math.random()*10)+1)});
};
$scope.getHeader = function () {return ["A", "B"]};
});
</script>
A problem can arise, like it did with my code, where IF your header object starts with an ID column, like this:
$scope.getHeader = function () {return ["ID","A", "B"]};
Excel says that it is a bad file format, and sometimes will have UI issues.
The reason is that Excel does not like csv files starting with a capital ID, according to this source: Microsoft Support
Changing the header to:
$scope.getHeader = function () {return ["id","A", "B"]};
Fixes this problem.
Excel does not like .csv files that start with a capital ID.
I have developed a web application using Adobe Air and Backbone.js. I'm using jade template to create a contact form. The jade code of the form look like below:
div.span6.span_col_2.custom_span6#rightContact
div.well.well-large.well-custom
form.form-horizontal
fieldset
input(type="hidden" name="type_contact" value="")
- inco = { fkey:"contact_description" }
include field_textarea_val
- inco = { fkey:"contact_email" }
include field_text_val
- inco = { fkey:"contact_phone" }
include field_text_val
a#sendBtn.btn.btn-warning( imsg="send", href="#rwSendContact" )
When user click send button, all content from input fields will send to the controller. Please look at the controller code as below:
var ContactRouter =
Backbone.Router.extend(
{
routes:
{
"rwSendContact": "sendcontact"
},
sendcontact: function(){
var values = getFieldValuesInContact();
var service_id = 'myservice';
var template_id = 'welcome';
var template_params = {
name: 'John',
reply_email: 'myemail#yahoo.com',
message: 'This is awesome!'
};
emailjs.send(service_id,template_id,template_params);
}
});
var contact = new ContactRouter();
From the line emailjs.send(service_id,template_id,template_params);, I want a library that can help me to send email. Can you guys give me a suggestion for what library can I use to archive this?
Regards,
I have a form with different fields and with input type="file". I use fileupload jQuery library.
Select file
Call
$('#some_id').fileupload().fileupload(
'send',
{
files: file,
url: widget.options.saveVideoUrl,
}
).success(
//...
(first fileupload called for init)
Try again to select file. Got: No files selected, clear console, etc..
Upd.1
The problem appear in E-commerce framework Magento2 in admin area.
The described form appear in such entity like 'slide-out panel'. It means that there is div block and this block wrapped in aside block using javascript.
<button onclick="jQuery('#new').modal('openModal')" .... >
<span>New</span>
</button>
Here is demo example:
Admin URL: https://iwdagency.com/magento2/admin
Username: admin
Password: admin123
Open Products / Catalog / select any product / click on New category
You should see following panel:
On such panel I've added by php constructor fields:
<div class="admin__field field field-new_video_screenshot " data-ui-id="product-tabs-tab-google-experiment-fieldset-element-form-field-new-video-screenshot">
<label class="label admin__field-label" for="..." data-ui-id="product-tabs-tab-google-experiment-fieldset-element-file-image-label"><span>Preview Image</span></label>
<div class="admin__field-control control">
<input id="...." name="image" data-ui-id="product-tabs-tab-google-experiment-fieldset-element-file-image" value="" title="Preview Image" type="file">
</div>
</div>
Script:
define([
'jquery',
'jquery/ui',
'Magento_Ui/js/modal/modal',
'mage/translate',
'mage/backend/tree-suggest',
'mage/backend/validation'
], function ($) {
'use strict';
$.widget('mage.newDialog', {
_create: function () {
var widget = this;
var newVideoForm = $('#new');
this.element.modal({
type: 'slide',
modalClass: 'mage-new-dialog form-inline',
title: $.mage.__('Create'),
buttons: [{
text: $.mage.__('Create'),
class: 'action-primary',
click: function (e) {
var file = $('#new_screenshot').get(0).files[0];
var result = $('#new_screenshot').fileupload().fileupload(
'send',
{
files: file,
url: widget.options.saveUrl,
}
).success(
function(result, textStatus, jqXHR)
{
var data = JSON.parse(result);
data['url'] = $('#new_url').val();
data['name'] = $('#new_name').val();
data['description'] = $('#new_description').val();
$('#media_gallery_content').trigger('addItem', data);
$('#new').modal('closeModal')
}
);
}
}],
});
}
});
return $.mage.newDialog;
});
I found the problem.
In my case the problem appear after initialization fileUpload library.
When I selected input:file, the library wasn't initialized (read as infected). When I pressed the button, initialization ran and any operations with this input become unavailable.
Solution is following: clone our input before it become infected, than do our operations and at the end replace existing infected input with its healthy copy, created before.