colorbox problem when reading image from database - asp.net-mvc

I'm developing a project using asp.net mvc. And i am saving images to database as byte array.
Every thing works properly until when iam using colorbox.
I try to using colorbox to show set of product images. when i am click to button i am getting weird result. I am expecting image but its gathering huge amount of weird symbols like below.
<�<�="=a=�=�> >`>�>�?!?a?�?�###d#�#�A)AjA�A�B0BrB�B�C:C}C�DDGD�D�EEUE�E�F"FgF�F�G5G{G�HHKH�H�IIcI�I�J7J}J�KKSK�K�L*LrL�MMJM�M�N%NnN�OOIO�O�P'PqP�QQPQ�Q�R1R|R�SS_S�S�TBT�T�U(UuU�VV\V�V�WDW�W�X/X}X�YYiY�ZZVZ�Z�[E[�[�\5\�
Iam sure that works properly including colorbox. Problem occurs when colorbox tries ta get image from database. Any ideas?
Thanks in advance
public FileContentResult Index(int id)
{
var media = _entities.Images.AsQueryable()
.Where(e => e.Id == id)
.Select(e => e).FirstOrDefault();
return File(media.ImageData, media.ImageMimeType);
}
this is hove i get the image.
http://localhost:2632/assets/index/105
this is the pattern of url. for getting image.
$("a[rel=" + "'" + 48 + "']").colorbox({ transition: "fade", title: true, current: true });
this is how i call color box.
<a style=" display:none;" rel="48" href="assets/index/107">asd</a>
this is the how i embed the element to page.

Solution available at Problem while working with Jquery colorbox and dynamic images that reading via Aspx
Use colorbox's photo property.
Example:
$('a.example').colorbox({photo:true});
The reason is that colorbox's regex to
auto-detect image URLs is going to
fail for that kind of URL (doesn't
contain an image-type extension).

The weird symbols you've posted are because the bytes are being interpreted as text, and they won't all be valid/printable characters. This is not necessarily a problem.
What happens when you send a request (http://localhost:2632/assets/index/105)? What does the browser show?
What datatype is the field in the database? Make sure you're not using a text field, as this would certainly screw things up. It might be worthwhile copy/pasting the bytes you're saving to the database and the ones you're getting back out and checking whether they're the same. If they're not, then chances are something is wrong in the database (like the field type).

Related

authorProfileImageUrl returns only a tiny thumbnail

I'm trying to use YouTube Data API to get a list of comments for a video.
The problem is that the field authorProfileImageUrl in the response contains a URL to a tiny thumbnail (28x28 pixels) of the profile image instead of the bigger one (48x48) that can be seen in YouTube's comment section. How can I retrieve the bigger one? Am I missing some magic parameter in the request that selects the size of the profile images in comments?
Here's my request URL:
https://www.googleapis.com/youtube/v3/commentThreads?videoId=VIDEO_ID&part=snippet&fields=pageInfo,items(snippet(topLevelComment(id,snippet(authorDisplayName,authorChannelUrl,authorProfileImageUrl,authorChannelId,textDisplay,likeCount,publishedAt)),totalReplyCount))&maxResults=3&key=API_KEY
Edit:
Here's an example profile pic URL i get:
https://yt3.ggpht.com/-b-fXZSZ0hPw/AAAAAAAAAAI/AAAAAAAAAAA/mq4JpF46xq4/s28-c-k-no-mo-rj-c0xffffff/photo.jpg
^^
I noticed that the marked part seems to select the size, because when I change the 28 to 48, the size of the profile pic changes too.
I could change it "manually" with some fancy regexp, and it will work, but it will also rely on implementation details that are undocumented and that may change in future and render the application broken :P So it really would be better if there was a documented API way to do that.
Seems like nobody knows how to solve this, ho here's my temporary solution.
It works, but it depends on an implementation detail that can change in the future and then the solution will break apart and will have to be corrected :q
I accept my own answer for now, but when someone posts a better one, I'll accept it instead.
The solution:
I made a simple function that searches for the image size in the URL string and replaces it with a bigger size.
function small2big(url)
{
return url.replace(/(\/.*s)28(.*\/photo.jpg)$/,"$1"+"48"+"$2");
}
Oh, and here's my middle finger for you, Google: ,,|,,
It seems that actually removing everything right at the 's28' will display the entire image without specifying a size.
For example, instead of this:
https://yt3.ggpht.com/-b-fXZSZ0hPw/AAAAAAAAAAI/AAAAAAAAAAA/mq4JpF46xq4/s28-c-k-no-mo-rj-c0xffffff/photo.jpg
You can use this: https://yt3.ggpht.com/-b-fXZSZ0hPw/AAAAAAAAAAI/AAAAAAAAAAA/mq4JpF46xq4/
And it will return the full size image.
In my case, using php I simply:
function bigAvatar($url) {
$url = substr($url, 0, strpos($url, 's28'));
return $url;
}
Again, if google decides to change this in the future, this would break. But for now, it works.

CKEditor: what's the recommended way of removing all schemes from the HTML?

CKEditor beginner here, so be patient please...
I'm using the CKEditor and I was wondering about the recommended approach for making sure that all the URLs used are absolute without the scheme. For instance, suppose someone inserts an image which points to http://www.someplace.com/img1.jpg. I'd like to make sure that the image references only the //www.someplace.com/img1.jpg.
Is there any event I should handle or is it better to just do it directly on the source (server side)? Btw, the text isn't limited to a specific number of chars (so it might be just a couple of paragraphs + some pics and anchors or it might be a really long text...)
Any ideas?
Thanks.
When you insert image through Image dialog it should be enough to specify //path_to_image/image_name.jpg (without the http or https). When you insert link through Link dialog, it should be enough to select Other in protocol dropdown and specify URL as e.g. //google.com. (I think it is also possible to make Other the default option in dropdown using dialogDefinition event)
When pasting HTML, text or images you could try using paste event and modify the incoming data:
var editor = CKEDITOR.replace( 'editor1', { });
editor.on( 'paste', function( evt ){
evt.data.dataValue = evt.data.dataValue.replace( /https?\:/, '' );
} );

ABCpdf with textboxs not updating in PDF

I am making an invoice website while learning ASP.net MVC, and so far so good. The problem I am running into is when I update an invoice in my app, then try and download it as a pdf, I get the initial content of the page and none of the updates. I'd like to display the pdf before someone downloads it which is working just fine. So I don't know if my problem has something to do with the stream not getting the changes on the page.
If possible I would also like a Guid returned in the URL and have no idea how to do that with how things are currently set up.
Any help would be amazing!
Note: I published the site but ABCpdf errors out (possibly due to it being the trial version), however, locally I can generate a PDF
View
#Html.ActionLink("Download PDF", "DownloadPDF", null, new { #class = "btn btn-action", #target = "_blank" })
Controller
public ActionResult DownloadPDF()
{
Doc pdf = new Doc();
MemoryStream stream = new MemoryStream();
pdf.Rect.Inset(40, 40);
pdf.HtmlOptions.Engine = EngineType.Gecko;
pdf.HtmlOptions.UseScript = true;
pdf.AddImageUrl("http://local.completeinvoice.com/");
byte[] data = pdf.GetData();
Response.Clear();
Response.ContentType = "application/pdf";
Response.AddHeader("content-disposition", "inline; filename=invoice-001.pdf");
Response.AddHeader("content-length", data.Length.ToString());
Response.BinaryWrite(data);
Response.Flush();
Response.End();
pdf.Flatten();
pdf.Save(stream);
stream.Close();
pdf.Clear();
return View("Index");
}
In reading through http://www.websupergoo.com/helppdf9net/source/3-concepts/g-htmlrender.htm I found that:
You can render any page you can supply a URL for. When you render a page the page has to be reloaded by ABCpdf.
Basically you need a unique URL, that is an actual page, with the data displayed in order for ABCpdf to be able to read the page before it renders it to a PDF.
Another option was to save the page as a .html then read the page from the server then delete the generated .html page.
The URL you supply in this example is the same each time yet you are expecting the output to change each time.
Thus the crucial thing here is to determine how state is being stored. Assuming that this is some type of invoice, where does the invoice number come from?
The normal way to do this would be to encode the invoice ID in the URL. Then in your page pick up the ID and generate the page using that unique identfier.
That way you could email the link to your friend and she would see the same invoice you're seeing. The URL used in above example is generic. If you mailed it to your friend who knows what she would see?
ABCpdf is the same. It really needs a unique URL it can work with. Yes it can work off session state and cookies but it gets really complex and tiresome if you want to do this. Much simpler just to ensure each URL is unique.
So adapt the URL you pass to AddImageUrl so it incorporates the state that is required for the unique page that is going to be returned. Then ABCpdf will see the same thing you see.
I would note that it is also possible for PDFs to be cached in the browser. However this is an uncommon cause of the problem you describe here. I think in this case you would be safe to disregard it.

How to dynamically generate url for image map in Oracle ApEx?

The scenario:
I have an ApEx page which pulls a record from a table. The record contains an id, the name of the chart (actually a filename) and the code for an image map as an NVARCHAR2 column called image_map.
When I render the page I have an embedded HTML region which pulls the image in using the #WORKSPACE_IMAGES#&P19_IMAGE. substitution as the src for the image.
Each chart has hot spots (defined in the image_map html markup) which point to other charts on the same ApEx page. I need to embed the:
Application ID (like &APP_ID.)
Session (like &APP_SESSION.)
My problem:
When I try to load the &APP_ID as part of the source into the database it pre-parses it and plugs in the value for the ApEx development app (e.g. 4500) instead of the actual target application (118).
Any help would be greatly appreciated.
Not a lot of feedback - guess I'm doing something atypical?
In case someone else is trying to do this, the workaround I ended up using was to have a javascript run and replace some custom replacement flags in the urls. The script is embedded in the template of the page and assigns the APEX magic fields to local variables, e.g.:
var my_app_id = '&APP_ID';
Not pretty, but it works...
Ok - I think I've left this open long enough... In the event that anyone else is trying to (mis)use apex in a similar way, it seems like the "apex way" is to use dynamic actions (which seem stable from 4.1.x) and then you can do your dynamic replace from there rather than embedding js in the page(s) themselves.
This seems to be the most maintainable, so I'll mark this as the answer - but if someone else has a better idea, I'm open to education!
I found it difficult to set a dynamic URL on a link to another page - directly - attempting to include the full URL as an individual link target doesn't work, at least in my simplistic world, I'm not an expert (as AJ said: any wisdom appreciated).
Instead, I set individual components of the url via the link, and a 'Before Header' PL/SQL process on the targeted page to combine the elements into a full url and assign it to the full url page-item:
APEX_UTIL.set_session_state(
'PG_FULL_URL',
'http...'||
v('PG_URL_COMPONENT1')||
v('PG_URL_COMPONENT2')||
'..etc..'
);
...where PG_FULL_URL is an item of Type 'Display Image', 'Based On' 'Image URL stored in Page Item Value'.
This is Apex 5.1 btw, I don't know if some of these options are new in this release.

Telerik Grid (MVC) does not display returned JSON

I have a telerik MVC grid. After making some changes to the underlying code, the grid no longer shows the results returned from the server. I can see the correctly formatted JSON return from the server (using functionality from Web Developer Toolbar), but the grid never actually shows the data. However, it also doesn't generate an error. The loading icon just keeps spinning.
Does anyone have a suggestion on how to localize the problem? Thanks.
EDIT
Well, I managed to get a step further. Apparently something goes wrong in the "bindData"-function located in telerik.grid.js. More specifically in line 462:
460. var evaluate = column.display;
461. if (evaluate)
462. html.cat(evaluate(data[rowIndex]));
When trying to render the last column in the first row, evaluate is set to anonymous and somehow, this results in an "invisible" exception. The markup of this column is:
columns.Bound(c => c.DocumentId)
.ClientTemplate("<a href=\"" + Url.Content("/") +
"/document/<#= DocumentId #>\" target=\"_blank\"><#= Naam #></a>")
.Filterable(false)
.Title("Naam");
I don't understand why this would be a problem, as I use similar templates elsewhere without any problem.
EDIT
Ok, I got it. Apparently some exceptions will not be shown in the Firefox/Firebug console. However, Visual Studio together with IE do not have this problem. I finally discovered that indeed the field "Naam" was missing in the IEnumerable.
So something to take away here is never to trust the results from just one browser ;-)
I had a similar behaviour recently when I had changed the type that the grid was expecting.
Make sure that your ajax call is returning the correct IEnumerable that is specified in the grid markup.
You need to post code for the GridAction and markup if you want a more accurate answer.

Resources