Working on a ASP.Net MVC project, I've got a page that allows users to upload their own picture. On the database, it is stored a file path, such as C:\zm\zemanel.jpg
After some research, it seems that browsers can't access the local machine and for that reason, if I have this:
<img src="C:\zm\zemanel.jpg"/>
The image isn't displayed. Note that it is still in development, the path leads to my machine (localhost).
What is the best solution for the user to select an image, have its path stored in the database, and the image to be displayed?
Can the image be included in the project dynamically? Say for example, in the Images folder?
Because images stored in a project folder are displayed normally.
I'm assuming you want to keep that image for future use (saving projects, etc). So sorry if it's overly complex for what you are asking.
I would think that the easiest way to handle this is to just use an input tag. With that tag you can use certain attributes to select a type of file to show in the client dialog, example[Example]:
//accept tag may not work with older versions of IE
//This shows how to open a client side dialog which defaults to an 'image' filetype.
<input type="file" accept="image/*"></input>
As mentioned by others, you would then upload the file, manipulate it (create a thumbnail or whatnot) then insert the image to the page using either a page refresh or javascript to call an ajax request and insert the image.
Any functionality beyond that you'll probably need a Java applet or custom control, which to me seems like overkill.
Try
<img src="file://c:\zm\zemanel.jpg" />
Related
Background:
I need to allow users to create web pages for various products, with each page having a standard overall appearance. So basically, I will have a template, and based on the input data I need the HTML page to be generated for each product. The input data will be submitted via a web form, following which the data should be merged with the template to produce the output.
I initially considered using a pure templating approach such as Nunjucks, but moved to ReactJS as I have prior experience with the latter.
Problem:
Once I display the output page (by adding the user input to the template file with placeholders), I am getting the desired output page displayed in the browser. But how can I now obtain the HTML code for this specific page?
When I tried to view the source code of the page, I see the contents of 'public/index.html' stating:
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
Expectedly, the same happens when I try to save (Save As...) the html page via the browser. I understand why the above happens.
But I cannot find a solution to my requirement. Can anyone tell me how I can download/save the static source code for the output page displayed on the browser.
I have read possible solutions such as installing 'React/Redux Development Extension' etc... but these would not work as a solution for external users (who cannot be expected to install these extensions to use my tool). I need a way to do this on production environment.
p.s. Having read the "background" info of my task, do let me know if you can think of any better ways of approaching this.
Edit note:
My app is currently actually just a single page, that accepts user data via a form and displays the output (in a full screen dialog). I don't wish to have these output pages 'published' on the website, and these are simply to be saved/downloaded for internal use. So simply being able to get the "source code" for the dislayed view/page on the browser and saving this to a file would solve my problem. But I am not sure if there is a way to do this?
Its recommended that you use a well-known site generator such as Gatsby or Next for your static sites since "npx create-react-app my-app" is for single page apps.
(ref: https://reactjs.org/docs/create-a-new-react-app.html#recommended-toolchains)
If I'm understanding correctly, you need to generate a new page link for each user. Each of your users will have their own link (http/https) to share with their users.
For example, a scheduling tool will need each user to create their own "booking page", which is a generated link (could be on your domain --> www.yourdomain.com/bookinguser1).
You'll need user profiles to store each user's custom page, a database, and such. If you're not comfortable, I'll use something like an e-commerce tool that will do it for you.
You can turn on the debugger (f12) and go to "Elements"
Then right-click on the HTML tag and press edit as HTML
And then copy everything (ctrl + a)
I see that CSS Bootstrap supports file selection, but I can't seem to find anything related to selected a folder. Is this possible with CSS Bootstrap?
I'm trying to create a simple prototype that allows the user to click a button, which opens a folder selection window/box. From there, they can select a folder and the html would save the path to that folder as a string.
Any ideas?
Not really related to bootstrap - it's more of a "browser's feature" (and it's not possible due to security reasons).
When you upload a file - you can select the file in your computer and the browser knows how to send the content of the file to the server. It's not something that you can do using "pure" browsers features (including javascript).
You can develop flash/java application that will give you the ability to browse the filesystem and select a folder, and from that point you can do everything you want with the selected value.
I have developed a website for a friend, which has to include some swf files. Those files come from his customers who want to get advertised at his site, and therefore cannot be edited.
The site is made with the use of Joomla 2.5.
My problem is that some of the swf files, do not have the target URL as part of them, and I'm trying to add it using the WYSIWYG editor that Joomla administrator panel provides.
I have tried various things reading different opinions in forums, but nothing works.
And another weird thing, is that when I click one of those, it takes me to a blank page, with the url "http://www.mysite.com/_level0.clickTAG" (where http://www.mysite.com is the name of my friend's site)
Is there a way of inserting a link externally to a swf file, or this is something that cannot be done?
Thank you in advance for your time.
Edit 1:
I have modified my html into
<p><object width="300" height="240" data="images/BANNERS_2014/bannername.swf?clickTAG=http:/www.customersite.com" type="application/x-shockwave-flash"><param name="src" value="images/BANNERS_2014/bannername.swf?clickTAG=http:/www.customersite.gr" /></object></p>
and now then I click on the banner, it takes me to http://www.mysite.com/www.customersite.com
instead of http://www.customersite.com
any ideas?
You need to pass the clickTAG as a parameter when you are embedding your SWF. I would have two fields on Joomla. One for the SWF and one for the destination URL. Then you can compose your embed code combining both. Read the article below and pay close attention to the bottom of the page:
http://www.adobe.com/resources/richmedia/tracking/designers_guide/
You can also have a similar set up as the one I outlined above and overlay a div on top of your SWF with the click event on it and the destination URL. You should have more control that way in the event that the SWFs you are getting are not formatted correctly.
I want to use a web browser to present some multimedia information with locally stored HTML files. The problem is that it just presents the static content without any HTML elements, and also doesn't show the images. The sample code is:
StreamReader reader = new StreamReader(TitleContainer.OpenStream("pathString"));
webBrowser.NavigateToString(reader.ReadToEnd());
The best way to do this is to copy your html file and images to the same directory in Isolated Storage (see: http://msdn.microsoft.com/en-us/library/ff431811(v=vs.92).aspx). Then, you call
webBrowser1.Navigate(new Uri("<Location_of_html_file_in_isolatedStorage>", UriKind.Relative)).
If the images and the html file are in the same directory in isolatedStorage, relative links to your images in this format:
<img src="../YourImage.jpg"/>
Will work correctly.
I don't suppose the WebBrowser control could get access to any images that might be stored in isolated storage, so all the content you want displayed - you would probably need to somehow embed it in a single html, which would probably require some js code (I am not a js/html expert), which needs to be enabled in the control (IsScriptEnabled if I remember correctly). Otherwise - it might be better to convert your HTML to XAML or just otherwise parse it and display it by code.
I am trying to create a "smart" web browser to load local images. Basically it works as a GUI for an application. I am using QTWebKit to power the browser, the problem is that the images of a given page can be found in different places, some are local files, others are in different resource files.
For example:
an HTML node to load image x.jpg can look like <img src="x.jpg"> and for image y.gif on the same page it can be <img src="y.gif">, now x.jpg is a local file that can be either in the root directory or in some other place. y.gif on the other hand can be in a resource file.
I want the web browser first to set the paths to all possible sources and once the page has been loaded or preferably while the page is loading searches for the images and loads them from their original path.
I considered the option of reading the HTML data first, parse it and search for the resources one by one, then edit the html to include the full path of the image but that would take a long time than what I want and it isn't practical.
Can any one put me on the right direction or does any one have any ideas on how such a design can be implemented.
EDIT: I have manage to delegate the requests by overriding the QNetwrokAccessManager and QNetwrokReply and been able to get the path to the image. The only problem is loading the image into view. I am currently using QHttp to handle the incoming requests but so far I haven't been able to load the image.
been trying to use QHttp's Get() function and passing the path to the jpg image as (file:///path/to/image) and also tried using the local path but nothing is working.
Take a look at How to tell QWebPage not to load specific type of resources?
You need the same approach but instead of dropping request by constructing QNetworkRequest with empty QUrl you need to pass url to the file on the disk.