As this blog post points out, there is a way to download files via drag and drop from browser to desktop.
I want to drag a file in data uri format (e.g. "data:application/octet-stream;base64,eNcoDEdFiLEStuFf") to the desktop. I cannot provide a full URL to a server download due to security reasons (file needs to be handled clientside).
When I try what's given in the example of the blog post, a file which content and name is the current timestamp is created:
item.addEventListener("dragstart", function(evt) {
evt.dataTransfer.setData("DownloadURL", "data:application/octet-stream;base64,eNcoDEdFiLEStuFf");
}
I already tried changing the format parameter, tweaking the format of the data a little and deconding beforehand but nothing works, I never get any of my data onto my desktop. Is there any way to accomplish what I am looking for, at least in some browsers?
By the way, we do not use jQuery. As a result, it might be interesting if there is a solution with jQuery but this will most probably not be applicable for our project.
As far i understood download URL should have following format:
mime-type:file_name:URL. Were URL is your data URI.
For your case:
item.addEventListener("dragstart", function(evt) {
evt.dataTransfer.setData("DownloadURL", "application/octet-stream:fileName.bin:data:application/octet-stream;base64,eNcoDEdFiLEStuFf");
}
Which should create fileName.bin file.
Take a look at http://jsfiddle.net/Andrei_Yanovich/jqym7wdh/
But it looks like it works only in chrome
Related
I just found Fine Uploader today, after having searched for a javascript uploader that will also support posting the file to Amazon S3. I read the documents as much as I could and searched this site, but I don't think there's anything about this specifically.
As a user of wikis and Markdown (it's ubiquitous, here, on github, in our internal ERP database and so on), I'd like to be able to easy copy-paste a "syntax complete" string, after a file is uploaded, because that would really make documentation creation easier.
The workflow I envision -
make screenshots locally
drag the screenshots or other files to the Fine Uploader upload area on a page
files in the session are uploaded and presented in the result list with a button at its top, allowing the user to copy the markdown syntax for the one or more files, to the clipboard.
Then I can paste the result into whatever textarea I want. Something like:
[Link to a PDF](http://mys3_url.tdl/path/to/this_is_my_pdf_1.pdf))
For bonus points, I'd like to add an icon to represent the non-image file type, to its left. Something like:
[Link to a PDF](http://mys3_url.tdl/path/to/this_is_my_pdf_1.pdf))
I imagine there's a way to do this, with a cursory look at the Events and API methods. But would you be so kind as to point me at events or API methods of interest?
Please advise. If this is the wrong place for this and if it needs to be posted at your github, I will do so. Let me know, please.
Thank you for your assistance in advance.
Kind regards
Rick
It sounds like you are simply looking for a way to easily retrieve the url in S3 of each uploaded file. This can be done by having your server return the URL of the file in the response to the upload success POST request sent by Fine Uploader. Fine Uploader will return the response (assumed to be JSON) to your onComplete event handler.
For example, say your server returns the following response to an upload success POST: {"url": "http://mys3_url.tdl/path/to/this_is_image_1.png"}. You can access this response in your onComplete event handler like this:
var uploader = new qq.s3.FineUploader({
...
callbacks: {
onComplete: function(id, name, responseJSON) {
var urlOfFile = responseJSON.url;
...
}
}
});
At this point, you can so whatever you please with these URLs.
How to secure the src path of the image when clicks on inspect element so that user should not get to know about the actual src path..please help me with the solution and it should be done with javascript only no other tags should be used.
You can convert image into base 64 data URIs for embedding images.
Use: http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/
Code sample:
.sprite {
background-image:url(data:image/png;base64,iVBORw0KGgoAAAA... etc );
}
This is commonly done server-side, where you have an endpoint that serves the image file to you as bytes...
You can store the images in a private location on the server where IIS/<your favourite web server> doesn't have direct access to it, but only a web app, running on it, with the required privilege is authorized to do so.
Alternatively people also "store" the images in the database itself and load it directly from there.
In either case, the response which has to be sent back has to be a stream of bytes with the correct mime type.
Edit:
Here are a couple of links to get you started if you are into ASP.NET:
http://www.codeproject.com/Articles/34084/Generic-Image-Handler-Using-IHttpHandler
http://aspalliance.com/1322_Displaying_Images_in_ASPNET_Using_HttpHandlers.5 <- this sample actually does it from a database.
Don't let the choice of front-end framework (asp.net, php, django, etc) hinder you. Search for similar techniques in your framework of choice.
Edit:
Another way if you think html5 canvas is shown here: http://www.html5canvastutorials.com/tutorials/html5-canvas-images/
However you run into the same problem. Someone can view the image url if they can see the page source. You'll have to revert to the above approach eventually.
is anyone aware how to properly "exploit" the local browser storage to "cache" chunks of data, assemble them and prompt a download?
I'm currently using the method where data is stored encoded in B64, and passed to an <a> element constructed on the fly and the target set to a data URI; I don't feel like this is the right method in case of big files (>5Mb) and not tested it so far.
I'm also aware that Mega does something similar, but it's unclear to me how they do it and how to properly recreate that.
In case anyone is wondering, the data is transferred via websocket to the browser.
I have a simple Android App using simple js, jquery mobile and phonegap that has form data that I would like to write to CSV on /sdcard. I can not figure out the best way to do this. It needs to write locally to CSV since the device will not have internet access. Each time the form is filed out, each CSV file name must be unique, containing 'CompanyName' field. I have searched everywhere and cannot figure this out. Help Please...
I have implemented similar things (read/write data via mobile web-app with no internet connection).
You might be able to utilize the same approach that I took which is using custom ContentProvider in Android to save your data. Provided the data is not large, this approach should work. If that is the case then you could do the following:
Create custom content URI scheme such as content://myuri. This is a neat feature of Android since I could call this URI from the built-in browser including even using links in your HTML page. It basically treat this URI as any other http:// uri
In the implementation for writing you could devise the URL as content://myuri/writeData/input1=value1/input2=value2/input3=value3 and so on. I am not sure if there is a limitation in ContentProvider for the length of URI accepted by the ContentProvider which is why I put the caveat above. I don't have a large form when I tried this approach last time
In the implementation of your extension of ContentProvider, you need to override the function public ParcelFileDescriptor openFile (Uri uri, String mode) and have them interpret the URI that is given in step #2. The implementation should be parsing the URI and then write the data to the CSV as you intended
You can get this data back using different URI scheme such as content://myuri/getData/[theFileID] which now in the implementation of #3 above, you will do the reverse and return the CSV data to your mobile web-app
Let me know if you have any question.
have a browser program that lets the user play chess - move pieces etc. trying to let the user download the resultant pgn (Content-Type: PGN) directly from browser.
does it have something to do with data:URI? is there some example somewhere?
only interested in modern browsers
I am not quite sure if I understand your question correctly. Do you mean you generate an image in PNG format but the browser does not offer download, instead shows the image directly?
If so, the solution is to indicate a file for download by setting the appriopriate MIME type as HTTP header "content type".
In PHP you do it like this:
header("Content-Type: application/force-download");
or
header("Content-Type: application/octet-stream");
When the browser receives this MIME type it will not try to display the content itself.
You can use a Data URI but there are some limitations. Here's an example, based on my answer to an earlier question. The first thing you'll note is that you can't really control the filename, but it works OK in Firefox and Chrome other than that, but probably not so well in IE (I've not tried it).
Assuming you can already generate the PGN as a string, the code to create a Data URI is quite straightforward:
function exportData(data, target) {
var exportLink = document.createElement('a');
exportLink.setAttribute('href', 'data:application/x-chess-pgn;base64,' + window.btoa(data));
exportLink.appendChild(document.createTextNode('sample.pgn'));
document.getElementById(target).appendChild(exportLink);
}
Just set data with whatever you're generating and set up an element to hold the link once it's created.
In the future we'll have better solutions for this sort of issue, but there's no browser support for it yet.