How to upload an image with the Kaltura JavaScript API? - javascript

I'm using the Kaltura JavaScript API and am trying to upload an image to the server using the "upload" action from the "uploadToken" service. I keep getting this error:
Missing parameter "fileData"
I've tried passing the base 64 encoded version of the image as the fileData parameter, and various other values (the file name, the input.files[0] value, a readAsArrayBuffer and convert to binary), but am unable to successfully upload an image. In JavaScript, what should "fileData" be set equal to?
Using the Kaltura Test Console, I'm able to do this successfully, and I can see the network tab in my browser making the POST successfully, with the fileData. However, in my JavaScript code, the "upload" action from the "uploadToken" service call is reported as a GET operation. I'm starting to think this may be a bug with the Kaltura JavaScript client library.

You can upload files to Kaltura using JavaScript and the HTML5 file API. But you would have to create the http request manually and not use the JS library.
This solution is limited to modern browsers (in case of IE it's IE10+).
To support IE9 and below, you would have to rely on flash.
If you just need to upload images and not large files, then use a server side proxy script that will not be limited by CORS.

Related

How to get Data Uri from a file system image with javascript (localhost is not an option)

I am writing a javascript app that will run offline on mozilla.I need to fetch an image from my file system and read it as datauri (without drag&drop or input,it must be done automatically by url).Localhost is not an option.An alternative would be to fetch this image from a url of a closed network but the app can't be on that network so i can't use ajax calls from the file system.Any solutions?
Browsers javascript implementation doesn't have access to local file system due security considerations. You will have to run some sort of web server to serve that file.

How to download files using IE9 with HTTP protocol

I would like to do a file (of any kind) download using IE9 without any redirection. By redirection I mean providing a URL of the resource I am trying to download to the current document forcing a download if the MIME type is not a document type.
So I am left with getting the data using the XHR object and find a way to save it on disk. Since I am using IE9, I can't use any File API provided in IE10+.
So forget about:
using Blob
using FileSaver (https://github.com/eligrey/FileSaver.js/)
using Blob and typedarray polyfills needs debugging and I can't make them work
Right now I am getting the data after the REST call and trying to write it into a document like in this post: Javascript Save CSV file in IE 8/IE 9 without using window.open()
But, the problem is document.write() seems to encode anything written to it in UCS-2, so binaries sent from the back-end are reinterpreted and the file gets corrupted. I am guessing that only text-based files could be saved then.
Last and not the least, I SHOULD not use flash.
Does anyone have an idea in mind to resolve the encoding issue or another technique to do the download?
If it can help, I am using angularjs as a front-end JS framework
For the limitation we had, passing the token as a parameter to get the file downloadable resource was the solution. When we uplift IE, we shall change the solution tough.
It implies removing any security chain filter and do a manual validation on the token in the backend.

Upload image by URL in single-page application with Canvas and File API

We have a single-page application (Rails back-end, Ember.js front-end) where we're currently moving away from a server-side image uploader to a client-side image uploader. We previously used the Carrierwave gem to do resizing and sending to S3 on the server. Now we want to the resizing (using HTML5 Canvas and File API) and sending to S3 directly on the client.
This works well when the user selects an image from his computer. It's definitely way faster for the user and puts less load on the server.
However, our users have gotten used to the "Upload by URL" functionality that we offered. It works like the "Search by image" functionality on Google Image Search. Instead of selecting a file from his computer, the user pastes a URL to an image.
Because of the same-origin policy, we cannot use Canvas API on an external image (it becomes tainted, see https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Using_images_from_other_domains).
I see two possible solutions:
In order to be able to upload to S3 directly from the client, we need to generate a pre-signed key on the server. We could pass the URL to the image in that same request, download it on the server while we generate the pre-signed key, and put the image as base64 payload in the response.
Use a proxy on our domain and use it to bypass the SOP. So access the image on the client as https://www.mydomain.com/?link=http://www.link.to/image/selected/by/user.jpg.
My questions are:
Do you know any other way to bypass the same-origin policy to provide a "Upload by URL" functionality?
Which solution do you think is best?
How hard is it to setup 2)? I have no experience in setting up proxies. FWIW, we host our application on Heroku.
I hope the situation I described is clear enough.
Thank you!
Yoran
Yes, you could force your clients to download the other-domain image to their local drives and then upload that copy from their local drives.
"Best" is subjective & relative to your configuration. The traditional workaround is your option#2--bounce the image off your server. Really all you're doing is having your server upload the image and re-serve it to the client. If you're expecting a huge volume of images, then forcing the client to download their own images might be better rather than gumming up your server by "cleaning" their images.
How hard to set up? It's fairly easy...after all you're just having some server code pull a remote image and save it to a specified server directory. The only modestly hard part is:
Make sure the server never interprets one of those client-inspired urls as executable (viruses!)
Clear the new directory often so the server is not over-weighted with images loaded for the client
Set limits on the size and quantity of images the client can upload to your server (denial-of-service attack!).

Read a local file using javascript

How do I get the contents of a local file, say:
/home/user/Wired/uploads/1.csv
in a variable x in javascript?
Can I use the filereader http://www.w3.org/TR/file-upload/#dfn-filereader?
If yes, then how?
You can't do this with strict javascript, but you can use the web server as an intermediate between the user and the browser. Have the user upload the file asynchronously (using AJAX). The web server could then return the plain-text value back to the AJAX call.
The contents would then be free to use as you see fit.
This is likely your only option without employing Flash/Silverlight/Java.
Reading client files in javascript is possible indeed with the new File API available in modern browsers (I dont know if IE supports this now). Check this site and its code: http://www.readfileonline.com/ it allows you to read files using the browser only.

Save file to the local system using browser with the specified filename and extension using html & javascript without server interaction

We are using HTML5 and javascript in one of our applications. The requirement is when the user clicks on a button we should download a file containing all the user entered data. There should be no server interaction to do this.
By using ActiveX object we can do this. But it is limited to Internet Explorer only.
By setting the response headers at the server also we can achieve this. But we can't use server interaction to do this.
We tried to use base64 data with mime type as 'application/octect-stream'. It is downloading "xxx.part" file to the local system with the exact data. But we are unable to set our own file name and extension (as we can't use .part as extension) to the file.
Please suggest us a way to download a file from the browser without server interaction with the desired file name and extension that works with all the browsers.
Currently not possible without using ActiveX or Flash. Take a look at Downloadify and see if it works for you.
We tried to use base64 data with mime type as 'application/octect-stream'
Have you tried setting appropriate response header?
Response.AppendHeader("Content-Disposition", "attachment; filename=name.ext");

Categories