I am building a react project where a user needs to be able to preview a document that has been uploaded. I have the file stored in a blob file in a variable called 'upload', and I use the following code to display it in a new tab when the user clicks on the preview button:
var newWIndow;
if (upload.includes("data:application/pdf"))
newWIndow = "<iframe width='100%' height='100%' src='" + upload + "'></iframe>"
else
newWIndow = "<img width='100%' src='" + upload + "'></img>";
var x = window.open();
x.document.open();
x.document.write(newWIndow);
x.document.close();
The uploads are limited to image or pdf files, and works great, except when the file size goes over 1MB. In that case, it simply opens a blank page:
THe entire blob file is too large to post here, but I thought that giving an idea of what it looks like might help someone spot what I am doing wrong, so here is a snippet:
data:application/pdf;base64,JVBERi0xLjQNJeLjz9MNCjEgMCBvYmoNPDwvTWV0YWRhdGEgMiAwIFIvUGFnZXMgMyAwIFI
Does anyone perhaps have any advice for me? Is there a better way to open the uploaded document? Is there a way to get around the size issue? Any advice would be greatly appreciated.
I was mistaken, I was not using a blob object but a binary Base64 one. The new question, as well as the solution, is posted in this post.
Related
I am trying to append the recorded video which is blob object into quill editor but the video which is appended in the editor is not playable.
Able to see only the blob object getting printed in the quill editor. If i try to open the contents in the browser it is working fine. Any suggestions?
enter image description here
well,according to this issue,
I think you maybe need to overwrite the video module's sanitize method to make it work,for image it can work like this:
var Image = Quill.import('formats/image')
Image.sanitize = function(url) {
return url
}
so as I guess, following things maybe useful:
var Video = Quill.import('formats/video')
Video.sanitize = function(url) {
return url
}
and you may need provide blob url to make it work
I'm actually struggeling with a problem handling some kml files with google map in my Javascript application.
I wrote a method with that I'm reading a KML file from an URL or my local file system and storing the content as a String in a Database. Now i would like to activate layers that are stored in my db by clicking a button. Everything is fine up to here.
In every example i can find they are only using the url-attribute of a KmlLayer by passing an url to a KML-File.
like here:
var ctaLayer = new google.maps.KmlLayer({
url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
map: map
});
But since my files are stored as Strings in my db I don't have an url to a file, only the content. I can't find a way to only pass the XML-String as content.
Somebody here who can help?
Maybe someday somebody will struggle with a similar problem. The solution was a little bit tricky. I needed to create a Blob with the content of my String. With the blob I created a file and packed it into an URL. This URL you can pass to your kml parser. I used https://github.com/geocodezip/geoxml3 for that.
vm.activeLayers.forEach(function(value, key) {
var file = new Blob([value], {type: 'kml'})
var url = URL.createObjectURL(file);
var myParser = new geoXML3.parser({
map : map
});
myParser.parse(url);
})
I want to insert a timelineitem with video attachment and if user selects a specific menu item, glass to play the video. I'm doing all from .net app like this, please correct me, if i'm doing wrong.
TimelineItem item = new TimelineItem()
item.MenuItems.Insert(0, new MenuItem(){Action="what is the action to use?";...});
request = Service.Timeline.Insert(item, attachment, contentType);
request.Upload();
I would like to know, do i need a menu item, if yes, what is the action i should use?
Currently i'm sending the video attachment, but there is no way to play the video.
Any help is greatly appreciated.
You don't need to specify any menuItems but your timeline item should not contain html content.
Make sure that your video is of a supported format: once it's inserted, and Glass has synced and fully downloaded the attached video, it should start playing right when you land on the item in your timeline.
This works using the QuickStart project for Java (mirror-java-starter-demo):
https://github.com/googleglass/mirror-quickstart-java
Replace the lines near line 119 in MainServlet.java with this:
URL url = new URL(req.getParameter("imageUrl"));
String contentType = req.getParameter("contentType");
url = new URL("http://localhost:8888/static/videos/video.mp4");
contentType = "video/mp4";
byte[] b = ByteStreams.toByteArray(url.openStream());
int i = b.length;
InputStream temp = url.openStream();
MirrorClient.insertTimelineItem(credential, timelineItem, contentType, temp);
Then run the project and click the "A Picture" button to upload a video from a new folder inside static called videos called video.mp4. I used a 10 second clip I recorded with glass (6.30 MB).
Note that when running with App Engine 1.76 on a windows machine I got this error when uploading, but changing to 1.80 made this issue go away:
Here is Windows metadata about the video that might be useful:
Depending on your network connection it might take a little bit for the video to show in your timeline, but mine plays.
I'm trying to implement a functionality that enables a user to download a PDF on clicking on a hyper-link. What i've done is, I've created a global datatype Publications which takes values "Description" and "PDF DOC" and I've a user control with a hyper-link which binds the description as its text.
LinkButton1.Text = details.Description;
Composite.Data.DataReference<IMediaFile> i = new Composite.Data.DataReference<IMediaFile>((details as A.DataTypes.Publications).PdfDoc);
string filePath = "/media(" + i.Data.Id + ")";
and on the click on the link button I've...
Response.ContentType = "Application/pdf";
Response.AppendHeader("Content-Disposition", "attachment; filename=Test_PDF.pdf");
Response.TransmitFile(filePath );
Response.End();
this is showing an error saying "could not find file", any idea why?
It looks like you are trying to use the C1 syntax for media files at a place where the C1 page renderer never replaces it with the actual url of the file. So you end up passing something like /media(b5354eba-3f69-4885-9eba-74576dff372d) to the Response.TransmitFile() function, which will not work because that is not a valid file path.
If you use this syntax on a C1 page, the page renderer will replace it with the real url of the file.
My advise would be to build this URL yourself and just link to it, instead of using TransmitFile. A simple redirect will suffice if the file is open for public access. If it is lying acessible on the web server already, there is not much point in using Response.TransmitFile and fetching it and writing it in the outputstream.
Try look at the DownloadFoldersAsZip package (https://bitbucket.org/burningice/compositec1contrib/src/4c31794cd46c/DownloadFoldersAsZip?at=default) which has this functionality. The main issue with your code is that you make the assumption of where the files are stored. You can't do that with the C1 Media Archive, since files can be either local, in a database, in Azure Blob storage or just a random place on the internet.
Instead you should use the GetReadStream() extension method of your IMediaFile instance. This will give you a stream which you can copy unto your Response.ResponseStream
See here for an example: https://bitbucket.org/burningice/compositec1contrib/src/4c31794cd46cb03dd0b0ee830b83204753355b03/DownloadFoldersAsZip/Web/GenerateZipHandler.cs?at=default#cl-145
solved it, just needed to give....string filePath = "~/media({" + i.Data.Id + "})"; instead of string filePath = "/media(" + i.Data.Id + ")";
You can also use this code
Composite.Data.DataReference i = new Composite.Data.DataReference((details as A.DataTypes.Publications).PdfDoc)
This gives the media file reference
string fileName = "/App_Data/Media/" + i.Data.Id.ToString();
this.Response.AddHeader("content-disposition", string.Format(
"attachment;filename=download.pdf", Path.GetFileName(fileName)));
this.Response.ContentType = "application/pdf";
this.Response.WriteFile(this.Server.MapPath(fileName));
This can get the file Downloaded as download.pdf
I have a table containing videos as blob data. Im trying to stream it into browser using video tag in a webpage by writing the bytestream from blob into http response and giving the tat as a value for source in tag.
My code is as follows:
while ( rs2.next()) {
out.println("<h4>" + rs2.getString("caption") + "</h4>");
out.println("<video id=\"example_video\" class=\"video-js vjs-default- skin\" controls preload=\"none\" width=\"640\" height=\"264\""+
" data-setup=\"{}\">"+
" <source src=\"displayvideo?title=\""+ rs2.getString("caption") + "type='video/mp4' />"+
" <track kind=\"captions\" src=\"captions.vtt\" srclang=\"en\" label=\"English\" />"+
" </video>");
}
Any help would be appreciated.
I am not viewing any <embed src="" height="200" width="200"> tag within tag.
Try to refer this link
http://www.w3schools.com/html/html_videos.asp
to get the perfect help about the tag.
Hope its helpful!!!
Use html for the video code first and test everything is working on your HTML+JS with regular video files.
Then work on the page that will serve videos, you might need to mimic the headers of a regular file request, you can check what are the headers of the regular file requests by doing those requests and activate firebug on Firefox or similar tool on other browsers. Check that regular video file headers and the video server page are the same on what is needed.
After that is done and working, you can then start working on something that has the functionality from the code you posted.
I can code what you need if you are hiring, let me know.
P.S. Ignore Freelancer answer, because you are working with videojs, your html code is ok