I'm developing a React App, and I have a backend in NodeJS.
In my Mongo Schema I have an array that stores multiple strings, these strings are some images.
I saved them as base64. Now I want to display them in my app, works perfectly fine with src from img tag, but I want to create a button that allows the user to download those pictures, is there any solution to this? Can I convert back that string and make it downloadable? Thank you very much for you time, I'm waiting for your ideas!
Note: The examples in the snippets will not work live because Stack Overflow sandboxes snippets without allow-downloads, but they should work on your page.
Depending on your exact use case, you have different options. The easiest one would be using an <a> tag with the download attribute instead of a button, like this:
<a download="myImage.gif" href="data:image/gif;base64,R0lGODdhEAAQAMwAAPj7+FmhUYjNfGuxYYDJdYTIeanOpT+DOTuANXi/bGOrWj6CONzv2sPjv2CmV1unU4zPgISg6DJnJ3ImTh8Mtbs00aNP1CZSGy0YqLEn47RgXW8amasW7XWsmmvX2iuXiwAAAAAEAAQAAAFVyAgjmRpnihqGCkpDQPbGkNUOFk6DZqgHCNGg2T4QAQBoIiRSAwBE4VA4FACKgkB5NGReASFZEmxsQ0whPDi9BiACYQAInXhwOUtgCUQoORFCGt/g4QAIQA7">Download GIF</a>
If you need to keep using a button and you want to trigger the download programmatically, you can create an <a> tag (without displaying it) and trigger a click:
const a = document.createElement('a')
a.download = 'myImage.gif'
a.href = 'data:image/gif;base64,R0lGODdhEAAQAMwAAPj7+FmhUYjNfGuxYYDJdYTIeanOpT+DOTuANXi/bGOrWj6CONzv2sPjv2CmV1unU4zPgISg6DJnJ3ImTh8Mtbs00aNP1CZSGy0YqLEn47RgXW8amasW7XWsmmvX2iuXiwAAAAAEAAQAAAFVyAgjmRpnihqGCkpDQPbGkNUOFk6DZqgHCNGg2T4QAQBoIiRSAwBE4VA4FACKgkB5NGReASFZEmxsQ0whPDi9BiACYQAInXhwOUtgCUQoORFCGt/g4QAIQA7'
a.click()
(If you need to support older browsers, you may have to temporarily insert the tag into the DOM and trigger the click in a setTimeout(..., 0).)
You can also use object URLs like it's shown here but it's probably easier to go the data URI route since you already have such a URI.
I am trying to reset a filepond field to a default image on user action (ie: clicking on a button).
The file could be local or uploaded somewhere (as AWS) it does not matter.
I currently load a default image when the webpage (and therefore the filepond instance / element) is first loaded, so I guess manually calling the load method would do the trick but I can't manage to do that.
I also try with the file-poster plugin, but there is no way to reset the image after it has been deleted.
If you have found a way of doing this or are thinking about something, please let me know :)
Actually #Rik was right, just use addFile function with the option type: "local".
I'm trying to load an external page using JSONP, but the page is an HTML page, I just want to grab the contents of it using ajax.
EDIT: The reason why I'm doing this is because I want to pass all the user information ex: headers, ip, agent, when loading the page rather than my servers.
Is this doable? Right now, I can get the page, but jsonp attempts to parse the json, returning an error: Uncaught SyntaxError: Unexpected token <
Sample code:
$.post('http://example.com',function(data){
$('.results').html(data);
},'jsonp');
I've set up a jsfiddle for people to test with:
http://jsfiddle.net/8A63A/1/
http://en.wikipedia.org/wiki/JSONP#Script_element_injection
Making a JSONP call (in other words, to employ this usage pattern),
requires a script element. Therefore, for each new JSONP request, the
browser must add (or reuse) a new element—in other words,
inject the element—into the HTML DOM, with the desired value for the
"src" attribute. This element is then evaluated, the src URL is
retrieved, and the response JSON is evaluated.
Now look at your error:
Uncaught SyntaxError: Unexpected token <
< is the first character of any html tag, probably this is the start of <DOCTYPE, in this case, which is, of course, invalid JavaScript.
And NO, you can't use JSONP for fetching html data.
I have done what you want but in my case I have control of the server side code that returns the HTML.
So, what I did was wrapped the HTML code in one of the Json properties of the returned object and used it at client side, something like:
callback({"page": "<html>...</html>"})
The Syntax error you are facing it's because the library you're using expects json but the response is HTML, just that.
I've got three words for you: Same Origin Policy
Unless the remote URL actually supports proper JSONP requests, you won't be able to do what you're trying to. And that's a good thing.
Edit: You could of course try to proxy the request through your server …
If you really just want to employ the client to snag an HTML file, I suggest using flyJSONP - which uses YQL.. or use jankyPOST which uses some sweet techniques:
jankyPOST creates a hidden iframe and stuffs it with a form (iframe[0].contentWindow.document.body.form.name).
Then it uses HTML5 (watch legacy browsers!) webMessaging API to post to the other iframe and sets iframe's form elements' vals to what u specified.
Submits form to remote server...done.
Or you could just use PHP curl, parse it, echo it, so on.
IDK if what exactly ur using it for but I hope this helps.
ALSO...
I'm pretty sure you can JSONP anything that is an output from server code. I did this with ClientLogin by just JSONPing their keyGen page and successfully consoleLogged the text even though it was b/w tags. I had some other errors on that but point is that I scraped that output.
Currently, I'm trying to do what you are so I'll post back if successful.
I don't think this is possible. JSONP requires that the response is rendered properly.
If you want another solution, what about loading the url in an iframe and trying to talk through the iframe. I'm not 100% positive it will work, but it's worth a shot.
First, call the AJAX URL manually and see of the resulting HTML makes sense.
Second, you need to close your DIV in your fiddle example.
I recently went through the www.clementinejs.com tutorial as I'm trying to learn the MEAN stack. I was able to complete it and understand most of it. However when i'm trying to repeat the process with mongoose and get slightly more data, I keep failing.
What i'm trying to do:
When page loads angular performs get request to '/api/entries' which searches mongo(via mongoose) and returns all docs in the collection, then load those docs into a div via angular ng-repeat.
If I insert dumby data into an object in the controller file I have no problem getting the data to show on the page, but when I try with the database I messed up somewhere. Even the angular curly brackets show up when I try to do it that way.
Here is my repo.
https://github.com/nickolaskg/journal
Should I just use mongo instead of mongoose? I'm not sure if i've set it up correctly.
Any help is greatly appreciated. I've been stuck for days trying so many different approaches, at this point I have no doubt there is multiple problems in the code.
Entry.get(function(result){
$scope.entries = result;
})
get() expects single object in the response.
Please read $resource's docs
Use:
Entry.query({field1: 'criterion'}) for queries and multiple resources.
Entry.get({_id: 'someid'}) for a single resource.
Entry.save({my: 'properties'}) for saving existing resource or creating a new resource.
Entry.delete({_id: 'someid'}) for deleting a single resource.
Also next time please post relevant code (IE your $resource calls) directly.
I have a controller method that has long been handling JSON requests by parsing that extension, but now I need to open it up to cross domain ajax so I'd like to offer a JSONP variant by parsing that extension as well. I've already updated my routes.php file:
Router::parseExtensions( 'json', 'jsonp' );
So far all is well, but the happiness ends when the results are rendered. While the .json extension automagically picks up the json/default.ctp layout, the .jsonp content continues to adopt the non-specific default layout (and all of its unnecessary HTML content). I've tried using RequestHandler::setContent() to set the response content type to both json and js, but that doesn't seem to be what triggers the call to a given layout directory.
Does anyone know what does determine which content-specific layout directory is called? I tried creating jsonp/default.ctp and I've tried creating a js/default.ctp layout with my JSONP result, but nothing seems to engage. I just get the normal default.
Any insight into how extensions/content type are mapped to these layout directories would be much appreciated.
I've temporarily solved this by explicitly setting the layoutPath value:
$this->layoutPath = $params['url']['ext'];
This feels like one of those things where there must be a better solution, but maybe this is it. I'm going to leave the question open for a bit in the hopes that someone else has a solution that involves Cake's automagic.