I currently store a number of document preview images (jpg/tif) outside of my web root. There are 100s of them, so having this work efficiently is important.
The reason they are stored outside of the web root is that they contain data the only specific users/user groups may view (but each user can have 100s of documents they can view).
My current implementation is, when the user selects ‘view image’ an ajax call is triggered and this moves the image in question to a specific folder within the web root. The location is passed back and used to display the image to the user.
When the next image is clicked, the call deletes any existing images and copies over the requested image. At session logout / timeout the users image folder is emptied.
This has a few problems, but mainly:
Files are constantly being copied and deleted
There is the risk of images being left in the folder (issues with log off scripts)
The whole time an images is in the folder it could be viewed by another users (unlikely but possible)
Is there a better way of doing this? I looked at trying to combine the BinaryReader with the ajax call (as I hoped this would cut out the need to copy the files), but can’t see how to get the data back to be used by the JS in the calling page.
Alternatively is there a way of making selected Folders only accessible to given users based on some session criteria? (I can’t imagine there is but I thought it’s worth asking.)
So if anyone has any ideas on how this can be improved that would be great.
This is a c# ASP.NET app using Jquery.
Edit:
The image is displayed using ajax, this allows for preloading and also means the rest of the page does not need to be reloaded when they select the next/previous image.
It can almost be thought of as a javascript image swapper type situation, where the images are stored outside of the web root.
Thanks.
My current implementation is, when the user selects ‘view image’ an ajax call is triggered and this moves the image in question to a specific folder within the web root.
This is horrible idea. You realize you can just access the image data and pass it to web as stream with specific mime type, right?
Maybe try to write a method that will check user credentials by cookies, if it is not OK then load and send back some standard image that will say that user must log in to view file, if it is ok then load and show proper file from a path outside of root based on url parameter (with proper headers like content-type also often referred as mime-type ofc). Then link urls to that method with proper parameter(s).
You can easily find examples of code (like here) to display image in binary form from DB. You would need just to load them from some path outside of root, not DB.
Also you don't need to load it by AJAX - just add IMG with SRC pointing to URL of handler. Or redirect / open window if it needs to be downloaded not shown.
The issue was how to get an image to show via javascript that is not in the web root.
I created a generic handler (ashx file) that based on the session values (authentication) and submitted parameters would return an image.
That in turn is being called via AJAX.
Related
I have a webpage that I want to monitor that has stock market information that I want to read and store. The information gathered is to be stored somewhere, say a .csv file or similar for later analysis.
The first problem I have is detecting when this page has fully loaded. The time taken to load can vary enormously. The event handlers I have tried all fire multiple times (I know this has been covered and I have tried the various techniques, but to no avail). Perhaps it is something specific to do with this web-page? Anyway, I need to know when this page has fully loaded and is sitting pretty with all graphics displayed properly.
The second problem is that, I cannot get the true source page into the webbrowser. As as a consequence, all access to the DOM fails as the HTML representation inside the webbrowser control appears not match what is actually happening on the webpage. I have dumped the text (webBrowser2.DocumentText) and it looks nothing like what you see when I check source in a browser, chrome for example. (I also use the firebug extension in Firefox to double check things). How can I get to the correct page into the webbrowser so I can start to manipulate things?
Essentially, in terms of the data, I need the GMT Time, Strike Rate and expiration time. My process will monitor with a timer control. To be able to read all the other element data on screen is a nice-to-have.
Can this be done?
I am an experienced programmer new to web programming and C#.
I think you want this AJAX request.
As a review, the web works by first loading the web page, then scanning the web page for additional files it needs to load (js, css, images, etc). When those finish, the onload event is triggered and some AJAX functions may run.
In this case, only some of the page is loaded and AJAX functions update the data in the graph later. As you've seen "Show Source" only shows the original file that was downloaded and is not a dump of its current state.
The easiest way to get the data is to find the URL of the AJAX request that loads the graph data. It is already conveniently formatted in JSON for you to scrap.
I have one grid view control in my application in which I want to have a button or hyperlink to show stored image (stored as "image" datatype in my table).
Is there anyone who can help me in this? Any Jquery Examples?
Unless your database has an http API (like CouchDB for example) and is exposed on the Internet (as opposed to behind a firewall), there is no way for a browser to access the image data stored in your database.
The first thing you have to do is to write code in the back-end to make the image data accessible via http or https. There are many ways how to do this, depending on the database and server framework you are using.
Only after this is done, you can create an <img> element using javascript on your web page and set its src attribute to the URL of the image. The URL is defined by a) where your server is running (that is the host part) and b) at what path your back-end code is serving the image data. (that's often called the route).
The URL consists of these parts:
<http or https>://<your domain or the servers's IP address (the host)><route (starting with /)>
Once you know the URL, this is how you can create the <img> element using jquery and add it as a child of another element (in this example the parent has id='parent')
$("#parent").append("<img src="http://...">")
I am working on a form on a page that uses an asp:FileUpload to allow users to upload files to a server. I'm new to ASP and am using C# for my code-behind. The plan is to have the user "attach" files one at a time, adding them to an asp:listbox. Finally when the form is submitted the files in the listbox get saved to the server.
While it seems pretty easy to save files from the FileUpload by using
myFileUpload.SaveAs("path");
I am running into some difficulty figuring out how to keep track of the files independent of the FileUpload. I can get the file names really easily using
Path.GetFileName(myFileUpload.PostedFile.FileName);
but really I need to have some way of keeping track of more than just the names. My first thought was maybe to use a temporary folder of some sort, but the files are going to potentially be pretty large so I don't want to do that because saving might take a while.
How can I keep the file around so that I can save it on the server later independent of the FileUpload?
Rather than using a ListBox I would use actual <asp:FileUpload> controls so you can have access to all of the methods for that control - such as Save Etc.
You can put a bunch of these on your page and simply hide all but the first one. Then have a button to say "Add Another" - then with the click of this button show the next <asp:FileUpload> control - JQuery would be a nice choice to show the next <asp:FileUpload> that is currently hidden.
Then in your postback you can loop through all of your <asp:FileUpload> controls and if it HasFile - which is a property on the control - then perform your saving etc.
Save them into a temporary folder if needed - perhaps renaming the file with a GUID and store this list of GUID's in the users Session so you can grab those when needed.
Once you call SaveAs, you're saving the file. The base FileUpload control won't allow you to cache the file somewhere without actually uploading it to the server first. If you are looking to upload multiple files without uploading until the end, you may need to look into dynamically generating FileUpload controls (as many as the user wants). That way they can select the files to upload one at a time, then hit an "Upload" button at the end.
It's a little clunky to do it that way, though. I'd look for some third-party multiple upload controls. I've used PLUpload in the past.
Is it possible to derive a location path of an in-memory file?
My justification for doing this is based on having a collection of images that are retrieved by my WinForms application in a Base64 encoded string format. I need to build up some HTML and inject these images so that they can be rendered on an embedded page in a WebBrowser control on my application. Since we're talking about HTML here, I need to use the <IMG> tag to display the image. This element needs to accept a "src" path which means I need to determine a method of deriving an absolute/relative path to each of the in-memory images.
If you control the application running on the server (which you indicated in a comment), then you should be able to redirect requests for particular resources. For example, if the user application requests "http://myserver/memory/imgxxx.jpg", the server should be able to intercept that and, rather than try to serve imgxxx.jpg from disk, construct an image from the data in memory, and ship it down to the client.
Now, if you're just shipping the base64 encoded data to the client, and want the client to somehow access the data and do the conversion ... that's a harder problem. I can envision doing something with JavaScript to replace all of the img tags that have some given attributes with the corresponding image. But I suspect that'd get pretty messy. If it's even possible.
Another possibility is to create a derived WebBrowser component and customize its behavior. A good example is in the CreateSink method documentation. It might be possible to write a handler that is called whenever the component wants to download something. You could then intercept the call and supply your in-memory image. I'm not certain that this is possible. You might take a look at WebBrowser customization. I will say, though, that it's probably easier to just write the files and use a "file://" url.
You can build a light weight HTTP server into your application by using the HttpListener class.
You will want to use the asynchronous model. Create a url that it serves content to, such as "http://*:8080/appdata", and then use that url within your html (http://localhost:8080/appdata/someinmemoryresource").
When theHttpListener receives a request, look at the path and respond with whatever in memory data it is you want to serve!
The IMG tag does not need a path, it needs a URL. You cannot reference in-memory data with a URL. The browser is going to issue a second HTTP request with the URL provided in the IMG tag and that URL must be valid at this point.
Consider adding an MVC action or an HTTP handler to return the image bytes. Or save it to disk.
The Plan
I need to upload a file without causing a full page refresh.
The uploaded files should be stored in a temporary place (session or
cookies).
I will only save the files in the server, if the user
sucessfully fills all the form fields.
Note: This is one of the slides of a jQuery slider. So a full refresh would ruin the user experience.
The Problem
If I place a Fileuploader Control inside a AJAX Update Panel, I wont be able to acess the file on the server side.
Note:From what I have found so far, this happens due to safety reasons.
Can't be done without co-operating binaries being installed on the
client. There is no safe mechanism for an AJAX framework to read the
contents of a file and therefore be able to send it to the server. The
browser supports that only as a multipart form post from a file input
box.
The Questions
When storing the files in a temporary location, should I use session or cookies? (what if the user has cookies disabled?)
If preventing a postback, really is against the standarts of user safety. Will it harm my website reputation? (regarding SEO and such)
Which road to take?
C# ASP.Net with AJAX? (is there a workarround?)
C# ASP.Net + AJAX Control Toolkit? Does it helps? (using the AsyncFileUpload control)
C# ASP.Net + jQuery Control? (won't I have problems fetching the data from the JavaScript?)
C# ASP.Net + iFrame? (not the most elegant solution)
The total amount of cookies that you can use is limited to a few kilobytes, so that's not a viable option to store a file. So sessions would be the only remaining. Consider also to save the file in the file system and remove it if it's not going to be used, as storing files in memory (session) will limit how many users you can handle at once.
No, for functions like uploading files you don't have to worry about that. Search engines doesn't try to use such functions when scanning the page.
You can use an AJAX upload in browsers that support direct file access, but there is no way around doing a post if you need to support all browsers. However, the post doesn't have to end up loading a new page, you can put a form in an iframe, or point the target of a form to an iframe.