How can I use a base64 stream in pdf.js inside a Blazor app?
It's easier to use a local path (src="path?file=filePath"), but not good documented how to handle a pdf stream.
Download, unpack and implement pdf.js in your blazor app in wwwroot/lib.
Add at index.html
<script type="text/javascript" src="lib/pdfjs/build/pdf.js"></script>
<script type="text/javascript">
function loadPdf(base64Data) {
try {
var pdfjsframe = document.getElementById('pdfViewer');
if (!base64Data == "") {
pdfjsframe.contentWindow.PDFViewerApplication.open(base64Data);
}
} catch (error) { console.error("Error at pdfjsframe.contentWindow.PDFViewerApplication.open(base64Data)"); }
}
</script>
Add at your page or component.razor:
<iframe id="pdfViewer" src="/lib/pdfjs/web/viewer.html"></iframe>
and in the cs:
public partial class PdfViewerComponent
{
[Parameter]
public int DocumentNumber { get; set; }
private string _stream = "";
protected override async Task OnParametersSetAsync()
{
_stream = await HttpClientService.GetDocumentStreamById(DocumentNumber);
if (!string.IsNullOrEmpty(_stream))
await OpenDocument(_stream);
_stream = ""; // that will ensure that your loading the right pdf at the right time
}
private async Task OpenDocument(string stream)
{
await JSRuntime.InvokeVoidAsync("loadPdf", stream);
}
}
In this example the _stream comes from a API. Put in the property _stream your stream string wherever you will get it from.
Related
I am trying to call a javascript function from my webview xamarin.android app. How can I do it?
Firstly, implement a custom WebClient (look at CustomWebClient inheritance model) which overrides the OnPageFinished (aka OnNavigationCompleted) default behaviout:
WebView webView = new WebView(this);
webView.Settings.JavaScriptEnabled = true;
webView.Settings.AllowUniversalAccessFromFileURLs = true;
webView.LoadUrl("http://yoururl.com");
SetContentView(webView);
And now you can invoke JS directly like
webView.EvaluateJavascript("JS code",null);
The second argument is a callback . Which is a placeholder for the javascript result .You can also define the JavascriptResult as the following:
public class JavascriptResult : Java.Lang.Object, IValueCallback
{
private TaskCompletionSource<string> source;
public Task<string> JsResult => source.Task;
public JavascriptResult()
{
source = new TaskCompletionSource<string>();
}
public void OnReceiveValue(Java.Lang.Object result)
{
try
{
string res = ((Java.Lang.String)result).ToString();
source.SetResult(res);
}
catch (Exception ex)
{
source.SetException(ex);
}
}
}
How can I find Json response value from WebView
Example: There is a one Login URL and we are opening this in Webview use of this we will get token and I want to add this token in user default.
Store your JSON data in a hidden field as a string in your html file.
<input id="TokenInfo" type="hidden" value="YOUR_JSON_DATA"/>
Add following javaScript Code into your html page.
<script>
$(function() {
var tokenInfo = $("#TokenInfo").val();
try {
window.webkit.messageHandlers.scriptHandler.postMessage(tokenInfo); // For iOS
} catch (e) {
//
}
try {
Android.login(tokenInfo); // For Android
} catch (e) {
//
}
})
</script>
From android end you need to add a JavaScriptInterface interface into to web view
final JavaScriptInterface myJavaScriptInterface = new JavaScriptInterface(getContext());
webview.addJavascriptInterface(myJavaScriptInterface, "Android");
public class JavaScriptInterface {
Context mContext;
JavaScriptInterface(Context c) {
mContext = c;
}
#JavascriptInterface
public void login(String tokenInfo) {
// deserialize your json here.
}
}
I need to build a chat using signalr and I am new in this.
So far I got only the chat by reading some others codes and tutorials and this is what I got:
on my ChatApp.Hubs I got the following code
public static class UserHandler
{
public static HashSet<string> ConnectedIds = new HashSet<string>();
}
public class ChatHub : Hub
{
public void Send(string name, string message)
{
// Call the addNewMessageToPage method to update clients.
Clients.All.addNewMessageToPage(name, message);
}
public override Task OnConnected()
{
UserHandler.ConnectedIds.Add(Context.ConnectionId);
return base.OnConnected();
}
public override Task OnDisconnected(bool stopCalled)
{
UserHandler.ConnectedIds.Remove(Context.ConnectionId);
return base.OnDisconnected(stopCalled);
}
}
and my view I copy past from a tutorial
#{
ViewBag.Title = "Chat";
}
<h2>Chat</h2>
<div class="container">
<input type="text" id="message" />
<input type="button" id="sendmessage" value="Send" />
<input type="hidden" id="displayname" />
<ul id="discussion">
</ul>
</div>
#section scripts {
<!--Script references. -->
<!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
<!--Reference the SignalR library. -->
<script src="~/Scripts/jquery.signalR-2.1.0.min.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="~/signalr/hubs"></script>
<!--SignalR script to update the chat page and send messages.-->
<script>
$(function () {
// Reference the auto-generated proxy for the hub.
var chat = $.connection.chatHub;
// Create a function that the hub can call back to display messages.
chat.client.addNewMessageToPage = function (name, message) {
// Add the message to the page.
$('#discussion').append('<li><strong>' + htmlEncode(name)
+ '</strong>: ' + htmlEncode(message) + '</li>');
};
// Get the user name and store it to prepend to messages.
$('#displayname').val(prompt('Enter your name:', ''));
// Set initial focus to message input box.
$('#message').focus();
// Start the connection.
$.connection.hub.start().done(function () {
$('#sendmessage').click(function () {
// Call the Send method on the hub.
chat.server.send($('#displayname').val(), $('#message').val());
// Clear text box and reset focus for next comment.
$('#message').val('').focus();
});
});
});
// This optional function html-encodes messages for display in the page.
function htmlEncode(value) {
var encodedValue = $('<div />').text(value).html();
return encodedValue;
}
</script>
}
what I need now is to display all the connected users in the view
Appriciate your help
Thanks in advance
So, you pretty much either want to just store all 'Active' connections in some kind of database/storage or a static hashset/dictionary.
You save the ConnectionIds when the user connects and remove them when they disconnect :
Hub
public class ChatHub : Hub
{
static HashSet<string> CurrentConnections = new HashSet<string>();
public override Task OnConnected()
{
var id = Context.ConnectionId;
CurrentConnections.Add(id);
return base.OnConnected();
}
public override System.Threading.Tasks.Task OnDisconnected()
{
var connection = CurrentConnections.FirstOrDefault(x => x == Context.ConnectionId);
if (connection != null)
{
CurrentConnections.Remove(connection);
}
return base.OnDisconnected();
}
//return list of all active connections
public List<string> GetAllActiveConnections()
{
return CurrentConnections.ToList();
}
}
Client
I added a button and an unordered list.
HTML
<button id="show-all-connections">Show Connections</button>
<ul id="user-list">
</ul>
And added this javascript (using jQuery)
$("#show-all-connections").on("click", function () {
debugger;
chatHub.server.getAllActiveConnections().done(function (connections) {
$.map(connections, function (item) {
$("#user-list").append("<li>Connection ID : " + item + "</li>");
});
});
});
Hope this helps.
Update
In your scenario, I don't see any hooks into using a custom UserId Provider or anything, so you're going to have to ask the User for a User Name and save the Connection ID with that.
HTML
JavaScript
$("#add-connection").click(function () {
var name = $("#user-name").val();
if (name.length > 0) {
chatHub.server.connect(name);
}
else {
alert("Please enter your user name");
}
});
Hub
static List<Users> SignalRUsers = new List<Users>();
public void Connect(string userName)
{
var id = Context.ConnectionId;
if (SignalRUsers .Count(x => x.ConnectionId == id) == 0)
{
SignalRUsers .Add(new Users{ ConnectionId = id, UserName = userName });
}
}
public override System.Threading.Tasks.Task OnDisconnected()
{
var item = SignalRUsers.FirstOrDefault(x => x.ConnectionId == Context.ConnectionId);
if (item != null)
{
SignalRUsers.Remove(item);
}
return base.OnDisconnected();
}
Users.cs
public class Users
{
public string ConnectionId { get; set; }
public string UserName { get; set; }
}
This is psuedo code since I am not able to run this code at the moment. Hope it helps and gives you a clear enough direction.
I am working with Web application with C# where user will browse a video file and web application will upload to YouTube via YouTube API V3. I am getting the error. Please advice where i am doing wrong?
Error: System.ArgumentNullException: Value cannot be null. Parameter name: baseUri at Microsoft.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task) at Microsoft.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccess(Task task) at Microsoft.Runtime.CompilerServices.TaskAwaiter.ValidateEnd(Task task) at Microsoft.Runtime.CompilerServices.ConfiguredTaskAwaitable1.ConfiguredTaskAwaiter.GetResult() at Google.Apis.Upload.ResumableUpload1.d__e.MoveNext() in c:\code\google.com\google-api-dotnet-client\default\Tools\Google.Apis.Release\bin\Debug\output\default\Src\GoogleApis\Apis[Media]\Upload\ResumableUpload.cs:line 459
I followed the below points.
Created ClientID for Webapplication and downloaded client_secrets.json file from API Access page.
Used the .Net sample code provided in https://developers.google.com/youtube/v3/docs/videos/insert#examples also referred same code from https://developers.google.com/youtube/v3/code_samples/dotnet
My application got authorized to YouTube API.
While uploading the video file, i am getting below error.
I am pasting below my code for your reference.
/* TestFileUploader.aspx */
<%# Page Language="C#" AutoEventWireup="true" CodeFile="TestFileUploader.aspx.cs" Inherits="TestFileUploader" Async="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<form id="qaform" runat="server">
<div>
<p>
<asp:FileUpload runat="server" ID="FileUpload1" onchange="AddEventChoosePicture(this,'FileUpload1')"
Style="width: 100%;" />
</p>
<p>
<asp:Button ID="submit" runat="server" OnClick="submit_Click" Text="Submit" />
</p>
</div>
</form>
</body>
</html>
/* TestFileUploader.aspx.cs */
using System;
using System.Web;
using System.IO;
using QA.credential;
using Google.Apis.Auth.OAuth2;
using Google.Apis.YouTube.v3;
using Google.Apis.Services;
using Google.Apis.YouTube.v3.Data;
using Google.Apis.Upload;
public partial class TestFileUploader : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void submit_Click(object sender, EventArgs e)
{
try
{
if (FileUpload1.HasFile)
{
String FileUpload1_Ext = System.IO.Path.GetExtension(this.FileUpload1.PostedFile.FileName);
UploadVideos(FileUpload1.FileContent, FileUpload1.PostedFile.ContentType);
}
}
catch (Exception ex)
{
Response.Write(ex.Message);
}
}
private async void UploadVideos(Stream uploadedStream, String contenttype)
{
try
{
UserCredential credential;
String clientsecretkeypath = HttpContext.Current.Server.MapPath("~/client_secrets.json");
using (var stream = new FileStream(clientsecretkeypath, FileMode.Open, FileAccess.Read))
{
credential = await GoogleWebAuthorizationBroker.AuthorizeAsync(
GoogleClientSecrets.Load(stream).Secrets,
new[] { YouTubeService.Scope.YoutubeUpload },
"user", System.Threading.CancellationToken.None);
}
// Create the service.
var youtubeService = new YouTubeService(new BaseClientService.Initializer()
{
//ApiKey = "AIzaSyAFxuAA4r4pf6VX75zEwCrIh5z4QkzOZ6M",
HttpClientInitializer = credential,
ApplicationName = PhotoandVideoupload.applicationname
});
var video = new Video();
video.Snippet = new VideoSnippet();
video.Snippet.Title = "My Test Movie";
video.Snippet.Description = "My description";
video.Snippet.Tags = new string[] { "Autos" };
video.Snippet.CategoryId = "2";
video.Status = new VideoStatus();
video.Status.PrivacyStatus = "unlisted";
// Using snippet,status below throws 401(UnAuthorized issue).
// Using snippet alone throws 404(Bad Request).
//In both case, Null Exception throws for parameter baseURI.
var videosInsertRequest = youtubeService.Videos.Insert(video, "snippet", uploadedStream, contenttype);
videosInsertRequest.ProgressChanged += videosInsertRequest_ProgressChanged;
videosInsertRequest.ResponseReceived += videosInsertRequest_ResponseReceived;
Google.Apis.Upload.IUploadProgress progress = await videosInsertRequest.UploadAsync();
switch (progress.Status)
{
case UploadStatus.Uploading:
Response.Write(String.Format("{0} bytes sent.", progress.BytesSent));
break;
case UploadStatus.Failed:
Response.Write(String.Format("{0}<br/>", progress.Exception.Message));
Response.Write(String.Format("{0}<br/>", progress.Exception.StackTrace));
break;
}
// Also tried to read file from server path instead of uploading via fileupload control.
/*
using (var fileStream = new FileStream(HttpContext.Current.Server.MapPath("~/1.mp4"), FileMode.Open))
{
var videosInsertRequest = youtubeService.Videos.Insert(video, "snippet,status", fileStream, contenttype);
videosInsertRequest.ProgressChanged += videosInsertRequest_ProgressChanged;
videosInsertRequest.ResponseReceived += videosInsertRequest_ResponseReceived;
await videosInsertRequest.UploadAsync();
}
*/
}
catch (Exception ex)
{
Response.Write(ex.Message + " " + ex.StackTrace);
}
finally
{
}
}
void videosInsertRequest_ProgressChanged(Google.Apis.Upload.IUploadProgress progress)
{
switch (progress.Status)
{
case UploadStatus.Uploading:
Response.Write(String.Format("{0} bytes sent.", progress.BytesSent));
break;
case UploadStatus.Failed:
Response.Write(String.Format("{0}<br/>", progress.Exception.Message));
Response.Write(String.Format("{0}<br/>", progress.Exception.StackTrace));
break;
}
}
void videosInsertRequest_ResponseReceived(Video video)
{
Response.Write(String.Format("Video id '{0}' was successfully uploaded.", video.Id));
}
}
Please advice where i am doing wrong?
Thanks,
You might try the following change:
From:
var videosInsertRequest = youtubeService.Videos.Insert(video, "snippet", uploadedStream, contenttype);
To:
var videosInsertRequest = youtubeService.Videos.Insert(video, "snippet,status", uploadedStream, contenttype);
Also, what is in contenttype? I use video/* as the contenttype for video uploads.
The status code 401 error may be because the YouTube API has not been authorized. Check that you have authorized the YouTube API for your credentials. Go to Google Developers Console and click on your project name. Then click on "APIs" in the left navigation menu. Check to see that YouTube Data API v3 is On.
I'd like to serve an html page as well as some json to the client without a round-trip that can be processed on the client side. Is this possible? What's the best way of doing this? I've considered sending it in the header but it seems to be frowned upon by some. Any examples are greatly appreciated. Psuedo code:
main(){
...
app.addRequestHandler((req) => req.path == '/user', handler);
}
void handler(req, res) {
var file = new File(myHtmlFile);
res.headers.set(...); //add json here?
res.outputstream... //or here?
...
stream.pipe(res.outputStream);
}
In your html file you can put a tag to be replace before sending as response.
For instance, in your html file :
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<input type='hidden' id='datas' value="___JSON_DATAS___"/>
...
</body>
</html>
___JSON_DATAS___ will be replace in your server with something like :
void handler(req, res) {
var file = new File(myHtmlFile);
readStreamAsString(file.openInputStream()).then((fileContent) {
final content = fileContent
.replaceAll("___JSON_DATAS___", htmlEscape(jsonAsString));
res.outputStream.writeAsString(content);
res.outputStream.close();
});
}
String htmlEscape(String text) {
return text.replaceAll("&", "&")
.replaceAll("<", "<")
.replaceAll(">", ">")
.replaceAll('"', """)
.replaceAll("'", "'");
}
Future<String> readStreamAsString(InputStream stream) {
final completer = new Completer();
final sb = new StringBuffer();
final sis = new StringInputStream(stream);
sis
..onData = () { sb.add(sis.read()); }
..onClosed = () { completer.complete(sb.toString()); }
..onError = (e) { completer.completeException(e); };
return completer.future;
}
Then, on client side :
import 'dart:html';
import 'dart:json';
main(){
final input = query('#datas') as InputElement;
final datas = JSON.parse(input.value);
//...
}