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.
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)
so, i've ben hunting for the answer, and seems like i can't get this to work, i wanted to make so that, i have a browser page already made in html, and when i click a link in there, it opens a chosen folder on the computer, but i don't want it to open on just this computer's path, I wanted to open a folder that is inside the main folder, so that anyone that has the same files as I do, can open it, i tried < a href="File_path">, tried putting < a href="file:///(file path)">, tried like i have in excel ../../'file path', and can't see where is the problem, anyone can help?
Here you need to use a "file" protocol to link a file in the HTML like,
Link
The browser may or may not open the file due to the security setting. You can click the right button and choose "copy link address" and then paste it into the browser.
There are security implications of showing a local file/folder from an website. It may work when the page is held locally but when on a server it will be failing. However definitely not any chosen folder anywhere in your PC.
If you require to achieve such you need custom implementation using a programming language like ASP .NET like shown in this example.
https://stackoverflow.com/a/6047826/684030
You haven't mention much details on what web server you are using. But if it's IIS (Windows) you may consider allowing directory browsing which may allow to show a sub directory under your website.
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" />
I want to generate links that can be pasted in emails so I can show people folders in their directory structure such as where to edit their email signature manually.
I'm trying to put a link to the folder in an email but make it generic enough that when they forward it, everyone who opens it will get the link into their own directory structure properly so I need to use environment variables.
I type the text I want the link to say then highlight and CTRL-K then put %CSIDL_APPDATA%\Microsoft\Signatures\ in the link but Outlook changes my % symbols to %25's. I'd ask how to escape a % but it shouldn't be escaped I don't think since it's actually part of a link.
Environment variable list FYI:http://technet.microsoft.com/en-us/library/dd560744(v=ws.10).aspx
Simple answer, you can't. When you're linking like that, the current directory looks like root / to the html. So you could look at a subfolder of current directory (which you aren't guaranteed to know since it could be different on different OS's or even per user configuration) but that won't really help you.
This project will let you edit the actual HTML of your email by adding an Advanced tab but even with full control of the HTML, it can't be done. "It would open up a security hole the size of Denver."
Here's a lot of quality info on Relative Addressing which is what you're trying to do.
this is because outlook parse your input as HTML link.
I did not test it but you should give a try to this file://%CSIDL_APPDATA%/Microsoft/Signatures/
See this answer too : ways to make an html link open a folder
I'm trying to create an editable page in Sharepoint. I already have the page in HTML (it's quite large) and it has many images in it. Previously I have just created a new page in sharepoint and pasted the HTML source in, the uploaded/inserted the images manually, one at a time.
Unfortunately, I am not able to do this in a reasonable amount of time since there are many images this HTML file is using.
So, I want an editable Sharepoint page that keeps the images intact from a directory that looks like this:
thepage.html
1.png
2.png
...
...
...
343.png
etc
Any ideas?
EDIT: For more clarity - this is a specifications document in HTML form, so it has a lot of text and header integrated with images. I'd like it to be converted to an actual Sharepoint Page that is editable from Sharepoint's interface.
Seems best here to use a low-tech solution, some HTML editing and use the best way for you to upload multiple files.
Assuming
C:\mypage
-> \page.html
-> \images\1.png
-> \images\2.png
...
-> \images\100.png
Via the UI
Go to a Document or Image library, and use the "Upload Multiple files/images" (this only appears on Internet Explorer)
Lets say you uploaded it to //sharepoint/myimages
Create a new content page (say an Article page, or WebPart Page with a Content Editor WebPart)
Lets say your page resides now at //sharepoint/pages/mypage.aspx
Change your html to point from <img src="images/1.png" /> to <img src="../myimages/1.png" />
Edit the HTML for your newly created page (Ribbon > Edit HTML Source), paste your HTML code
Via SharePoint Designer
Drag and Drop all the images in your desired location
repeat the HTML steps above
To replace text in bulk, SharePoint Designer, your favorite HTML editor or event Notepad can do that well using the CTRL+H menu / Edit > Find & Replace options.
NOTE: the //sharepoint address up there is the http url for your site, SO won't let me use a full fake address as a sample.
From IE or from Word, save the page as a complete webpage so it creates an HTML file plus a folder with the images.
In network places, create web folder (WebDAV) pointing to Sharepoint. This way, you can access it from the file system in Explorer.
Open your new network place, navigate to the library where you want your HTML file to be, and drag-n-drop the file and folder into there.
The file then will be visible in browser, with the pictures, but the folder will be hidden.
If I have understood correctly your question. You can use this post answer to load list of images by javascript and php ->
Load list of image from folder.
Upload files to Share Point server and use that folder.
Or you can dynamically write c# code to read Share Point folder and display images.