I'm building a small Angular application, in which the user should be able to view a collection of locally saved videos and save the collection in order to rewatch these videos at a later point in time. The paths of the videos are saved in a JSON-File, which means I only have access to the string of a path like this:
C:\My Videos\UploadedVideo.mp4
Passing this path to the src of a video-HTML-element doesn't allow me to play it though. I've seen workarounds where a input-element is used and the file is passed to the video-element, but this doesn't work in my case as I have the file path and don't want the user to reselect the videos over and over again.
You're not able to use your system path in browser.
You have two options:
Add your videos to your Assets folder in Angular
Put video online (eg: create Bucket on Amazon S3 for this kind of files and access it via the bucket link).
I am trying to create a media library and will have a component where anyone will be able to upload media .mp4 files that are stored locally on the client's pc.
I want to have a functionality where the user selects the file and Video/Audio metadata is loaded. Is there a way using Javascript/HTML5 to obtain this metadata like in the screenshot below?
I have a requirement where I want to show the file preview to the users.
There are various file types which are supported like; .pdf, .xlsx, .doc, .rar, .jpeg, .png and many more.
When user clicks on the preview it should open the file in popup where preview of the file is shown to him. User can Zoom-in, Zoom-out, Download the file. Just as you can see into gmail for attachment preview.
Please, can anyone guide me to any relevant library or helpful resource for the same.
Thanks in advance
There are two main ways you can do this.
1) Server-side: Render previews once server-side (on file upload) into jpg/png images, and store the previews on the server. This is the easiest to implement on the client side, but requires extra storage on the server.
2) Client-side: Render the previews 'live' with javascript in browser, this reduces the amount the server has to do/store, but does require the client to fully download the file in-memory before it can render the preview, which for large files could be an issue. Also, you would need javascript libraries included for likely each individual file type, since most libraries will target one specific file format.
Server-Side is probably the recommended way to go. What are you using for your web server?
You are looking at creating document viewer.
Belive me its big work as browser does not understand these formats. Browser can render images directly on canvas but it does not know how to render the other files. So, any file other than image formats, one need to save them temporarily on server and then stream on the browser and show them using the respective file viewer.
You can convert doc and xlsx files to pdf and show these files using pdf viewer (http://ngmodules.org/modules/ng-pdfviewer). There are plenty of document converters available on internet (however you will need to check the licensing terms as most of them are GPL licensed, hense can not be used in commercial projects).
If you want to save this work then go for third party server those take all paint to convert documents in html5 such as https://crocodoc.com/why-crocodoc/
You can also try using google doc viewer google doc veiwer
This question is fairly broad. I'm not going through all the steps of how to implement an attachment viewer directive, but here are some pointers you might find useful.
To allow the user to download the file, you simply put a download link somewhere. If you are hosting the attachment on Amazon S3, Google Cloud Storage or some other cloud storage service, check their documentation. If you're downloading the files from your own server, make sure to set the Content-Disposition HTTP response header to attachment; filename="ORIGINAL_FILENAME", where ORIGINAL_FILENAME is the file name you want to user to see in the save dialog that appears when they click the download link.
Now on to the viewer.
For PDF files, I'd use pdfJS. There's an angular directive for it here.
You could look at something like CloudConvert for other files, to convert ehm to a PDF, and then displaying them in pdfJS, but then you probably want to store the PDF on your server as well, in addition to the original files, which requires extra storage. You might also be able to use the Google Docs viewer, or Office 365 viewer, as described in this answer.
I'm writing an esay live blogging app.
I have a form in the backend and I can upload to the server text messages or images.
At this moment everything is working with a simple file upload field, but I want to speed up the process so:
1) reflex camera attached via USB that save images in a local folder on my mac
2) a "preview" of the folder in the backend, updating live while I shoot picture
3) when I select a shot I will upload to the server (this is not difficult).
I cannot find the right plugin to "watch" and interact a local directory. Any idea?
We have an offline web app written with js/jquery/HTML5 that uses local storage to store multiple MB of data in json format that gets edited when the app is in use. This data eventually gets uploaded to our server via ajax. It works very well on both iOS and Android devices. We now want to allow users to repeatedly select an item in their data and take a picture to later be associated with that item. Pictures would be uploaded to our server along with the data. Pictures would also be reduced to 50kb or less in size with a canvas element either at the time they're taken or when they're uploaded. For any given upload, they're may a hundred or more pictures.
We had planned to store a reference to pictures as they're taken to later use for uploading. We now know, in a browser, without using native app code or frameworks such as PhoneGap, that there's no way to store such a reference or path when pictures are stored in the iOS camera roll or Android gallery. We can get the picture's file name by using an input control, but that's of no use without a full path. Also, all image filenames on iOS devices are "image.jpg". We could access the pictures' image data using data URLs, but we can't reliably store it because there' not enough space in local storage for both our json-formatted data and potentially hundreds of data URLs.
So the question is, is there a way using js/jquery/html5 (not PhoneGap or native app code) to take a picture, get a reference to it for later resizing with a canvas element and then uploading via ajax?
If you want to know if is there a way to resize image in Client-side using canvas to reduce them to 50kb then yes, there is.
Here is the link : http://blog.liip.ch/archive/2013/05/28/resizing-images-with-javascript.html
Here is a DEMO
And here is the CODE
I have tested it and it is really good.
PD. I dont like how this CODE resize the image, i changed it using another algorithm, let me know if you want it
Now i am looking for a way to listen the event when the mobile devise use the camera to take a photo and upload them. Because they are automatically rotated to left 90 grades.