i am trying to add static file to single page blazor app. I created new folder Images uder wwwroot set image as embeded but its not showing.
private void ConfigureVirtualFiles(IWebHostEnvironment hostingEnvironment)
{
Configure<AbpVirtualFileSystemOptions>(options =>
{
options.FileSets.AddEmbedded<SimplyMapModule>();
if (hostingEnvironment.IsDevelopment())
{
/* Using physical files in development, so we don't need to recompile on changes */
options.FileSets.ReplaceEmbeddedByPhysical<SimplyMapModule>(hostingEnvironment.ContentRootPath);
}
});
<div class="col-md-auto text-center">
<img src="~/Files/rent-kollagenprotein.png" style="max-width: 400px;" class="w-100 mb-5 my-md-3">
</div>
this is default virtual files system registration. any help is welcome.
Related
I'd like to use a button to download file stored in public folder. I have test.xlsx in public folder, and here is my code
<a href={"/test.xlsx"} download target='_blank'>
<button> click </button>
</a>
However, when I go to the website, it says Failed - No file. How can I fix it? Do I have to edit webpack.config.js?
Could you try this method, this should work. Using a file-saver hook.
import React from "react";
import { saveAs } from "file-saver";
export default function App() {
const saveFile = () => {
saveAs(
"https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf",
"example.pdf"
);
};
return (
<div>
<button onClick={saveFile}>download</button>
</div>
);
}
Your code works 100% but you only need the download
<a href="/test.xlsx" download ><button> click </button></a>
I would suggest remove the target='_blank' as every browser can respond differently and may not trigger the download especially if it is counted as an attempt to redirect to a viral alternative like a popup advert etc.
What is wrong is checking the URL so if a browsers sees / it will attempt to open the download from its own root and logically I do not have your /test.xlsx in my c:\ folder. but it is in the working folder
However it is in the HTML working folder
so all I need to do is simply ensure I use the correct relative call to the valid files location e.g. this if its in the same folder
<body>
<a href="./test.xlsx" download ><button> click </button></a>
<body>
or simpler for current work folder if it is the public folder remove the path
<body>
<a href="test.xlsx" download ><button>Click to download test.xlsx</button></a>
<body>
I am trying to create similar components on my webpage, so instead of hot coding the data i decided to map through an external data(an array i created in an external module in the same project folder). ` {
workflow.map((w) =>{
return(
<div className='process'>
<h2 className="processName">
{w.name}
</h2>
<img src={require(`${w.image}`)} alt="" className="processImage" />
<h4 className="processDescription">
{w.description}
</h4>
</div>
)
})
}`
Everything worked fine until i added images.
i got this error instead
error message
i feel am doing something wrong. please what is the right way to this?
I'm still pretty new to react and I have an application that I'm trying to deploy to the web. I've noticed that when I use 'npm run build' it doesn't populate my chunk.js scripts with a '.' before the location. That's an easy fix, I just add the '.' manually and move on with my life. But now it's doing the same thing with images, and these are rendered dynamically so it's not an easy manual fix once the build is run. I've got code below.
For example: <script src="/static/js/2.4724d625.chunk.js"></script>instead of <script src="./static/js/2.4724d625.chunk.js"></script>
I tried manually entering the period like so:
const Certificate = ({
firstName,
lastName,
completionDate,
userToken,
division
}) => (
<div id="box" className="container-fluid text-center">
<div id="nice-border">
<div className="row">
<div className="col-12">
<div id="sov-logo">
// this is where i manually put a . before the logo directory
<img src={`.${Logo}`} alt="Logo" />
</div>
</div>
</div>
but that didn't help at all. It seems that the build just ignores that. So how can I get these images to work properly once it's deployed on a server?
This is how the image looks when I inspect it in the browser: <img src="/static/media/capitolREDback.dad6f9b2.jpg" alt="Logo"> and as soon as I add a dot like so: <img src="./static/media/capitolREDback.dad6f9b2.jpg" alt="Logo"> it loads the image just fine. How do I fix this?
In your package.json, set "homepage" to "."
Then you can build and deploy correctly.
I have saved some files in SQL table through an application in admin side, but now I have to take back the files saved in the table to a folder in another application to the website. I need to save the files in a folder called MyFiles and want to download the files by clicking on the download link
controller
public ActionResult Index()
{
var Downloads = db.Downloads.ToList();
return View(Downloads);
}
View
#model List<ThaniyamBank.Models.Download>
<div class="row">
#foreach (var item in Model)
{
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 form_cont">
<p class="all_sub_hed">#item.ItemName</p>
<p class="tet">#item.Description</p>
Download Form
</div>
}
</div>
this is my folder which I need to save the data from table
the files shows here is which I have added directly
How can I get files directly from table
this is my table called downloads
Here the Url column is the name of the file with extension, I need to get this Url to the folder myFiles in the application. How can I get the files from table? can anyone please help me to find the solution, how the working ??
You should define your file path by mapping to its server path.
In your action, you can do like this :
public ActionResult Index()
{
var Downloads = db.Downloads.ToList();
Downloads.ForEach(x=>{
x.Url = Server.MapPath(Url.Content("~/MyFiles/" + x.Url));
});
return View(Downloads);
}
In your view side, you can simply give Url :
#model List<ThaniyamBank.Models.Download>
<div class="row">
#foreach (var item in Model)
{
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 form_cont">
<p class="all_sub_hed">#item.ItemName</p>
<p class="tet">#item.Description</p>
Download Form
</div>
}
</div>
First thing, you need to change URL Column of your Table. It should contains full Directory path of your PDF file at your Admin Project and add another column for file name.
And in your Action Method, Simply retrieve the data from your table and pass it to view.
public ActionResult Index()
{
var Downloads = db.Downloads.ToList();
return View(Downloads);
}
And at your View, bind File URL to another action link:
#model List<ThaniyamBank.Models.Download>
<div class="row">
#foreach (var item in Model)
{
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 form_cont">
<p class="all_sub_hed">#item.ItemName</p>
<p class="tet">#item.Description</p>
Download Form
</div>
}
</div>
And in your SaveFile Action Method:
public ActionResult SaveFile(string FilePath, string FileName)
{
using(WebClient client = new WebClient())
{
client.DownloadFile(FilePath , Server.MapPath(Path.Combine("~/MyFiles/", FileName));
}
}
WebClient
I am playing with readymade code in my squarespace website. I found a way to upload files to my google drive by setting up a readymade google apps script. It works fine on the url given by publishing the app.
However i implemented the html code from the readymade solution on my squarespace page by code injection and it obviously doesn't work. Probably there is no info in the script code that leads to the particular URL generated by publishing the app.
This is the code i use for injection in squarespace (i need some code that connects me to the google app script server side)
<div align="center">
<table width="459" border="0">
<tbody>
<tr>
<td width="462"><div align="center">
<hr>
</div>
<form id="myForm" align="center">
<input type="text" name="myName" placeholder="Your name..">
<input type="file" name="myFile">
<input type="submit" value="Upload File"
onclick="this.value='Uploading..';
google.script.run.withSuccessHandler(fileUploaded)
.uploadFiles(this.parentNode);
return false;">
</form>
<div id="output"></div>
<script>
function fileUploaded(status) {
document.getElementById('myForm').style.display = 'none';
document.getElementById('output').innerHTML = status;
}
</script>
<style>
input { display:block; margin: 20px; }
</style>
<hr></td>
</tr>
</tbody>
</table>
<h3> </h3>
<p> </p>
</div>
Now here is what the code on server side looks like:
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('form.html');
}
function uploadFiles(form) {
try {
var dropbox = "RHT";
var folder, folders = DriveApp.getFoldersByName(dropbox);
if (folders.hasNext()) {
folder = folders.next();
} else {
folder = DriveApp.createFolder(dropbox);
}
var blob = form.myFile;
var file = folder.createFile(blob);
file.setDescription("Uploaded by " + form.myName);
return "File uploaded successfully " + file.getUrl();
} catch (error) {
return error.toString();
}
}
Please help this must be very simple code to add to make it work.
Thanks a lot
You can now do this by changing the first few lines of your Google Script to the following;
function doGet() {
return HtmlService.createHtmlOutputFromFile('index.html').setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
Then you can either add a Code Block into Squarespace and an iframe, or I have mine located under the Advanced tab of a Form Block, in the POST-SUBMIT HTML section (users fill out my form first, then are able to upload their content with the script) I use this code, but you can adjust the widths or whatnot;
<iframe src="https://YourPublishedGoogleScriptURLhere"width="625"height="361"frameborder="0"></iframe>
I have this same issue. I believe the issue is that Google is blocking us from using the script in iframes and such, outside of their domain. My current solution is to
Create a Form in Squarespace
Enter required information into the "fields"
In the Advanced tab, insert code obtained from http://www.squareguru.com/form-redirect which will automatically redirect users to your Google Script. The code looks like this;
<meta http-equiv="refresh" content="0; url=https://script.google.com/macros/s/etc">
<script>
window.location.href = 'https://script.google.com/macros/s/etc';
window.location.assign('https://script.google.com/macros/s/etc');
</script>
In my Google Script "server.gs" page, I just changed the line return "File uploaded successfully " + file.getUrl(); to return "File uploaded successfully. Please click the back button in your browser to return to Site Name";
If anyone knows how to have a Google Apps Script redirect to another URL after it is completed instead of displaying "File uploaded successfully", then I could have it redirect to a page on my site which says the upload completed successfully and to continue looking at our other blogs, etc.
I'm also testing out jotform.com which lets you do file uploads into Google Drive in their forms, but they charge a monthly fee unless their free tier covers your needs. They then give you the code to insert the form into Squarespace.
Hope this was helpful. If anyone has ideas to redirect to another URL after the Google Apps Script completes, please let me know.
EDIT: I imagine you would also need this <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> which is placed in Advanced > Code Injection > Header, to allow the script run.