I'm a junior dev trying to build a portfolio site and want to upload a pic of me that is already downloaded on my PC. When I type in an src of an image that exists somewhere online it clearly appears on my live server but when I insert the src of an image existing somewhere within my PC's local drives it doesn't appear. Is it that I have to upload this image somewhere online (e.g. google drive) and then type in its new src or is there a way to upload offline images?
Hope someone can help!
Create a folder called assets in your project and add all images and any other files you may need. Then add the path to your image in src
there are some options to do it.
The more preferable is creating a folder let's say Src or Images. Then download any images into the folder using classes from a namespace System.IO (Path, Directory, ...). But be sure that your image names+extension are unique. Also, you can store in a DB file name and path the related file on your server and userId to be sure who added the file.
Another option is to store byte arrays in DB. Adding action for returning your file
public async Task<AcitonResult> GetImage(int id)
{
byte[] imgBytes = await GetImageFromDbById(id);
if (imgBytes == null)
return NotFound();
return File(imgBytes, "image/jpg");
}
Asking an image
<img src="/**YourControllerName**/GetImage/**#imageId**">
Related
I want to save an image in angular's Assert folder or in a folder created by me. I occupy the input file and a button, nothing more when I save the selected image, I want it to be uploaded or copied to said folders or folder. Can this be done without the backend?
I have been looking for information and watching videos but most of them either use firebase or some other service, I just want it locally. Please, your help would help me a lot.
If I understand your question correctly, you are asking if, at runtime, you can create a file in your Angular applications' 'assets' folder.
This is not possible, because the 'assets' folder is a compile-time artifact. It only exists in your source code tree. In the compiled application, the assets folder does not exist.
Furthermore, when the folder exists, it only does so on the computer on which you wrote the application. The user is running it in their web browser, which is generally running on their computer, not yours.
Now, if you are just asking if you can save a file on the user's computer, take a look at File Save functionality in Angular
I'm using ReactJS to build a site, and I want to create a link (a href="relativepath") to a local HTML file so that when the user clicks on the link, it'll open up the html page. The local file is in a different folder X outside of the project, and I don't want to upload it into my src folder because the html file depends on a lot of other files in X. Is there a good way to do so?
I also want to upload a different local HTML file that is already within the src folder of my React App. I currently have something like this:
import htmlFile from "../links/htmlFile.html"; export default function Something(props) { return (<a href={htmlFile}></a>)}
and it says in my terminal that
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <html>| | <head> >
I already tried adding in webpack + an htmlLoader, but I think I followed the steps incorrectly as I wasn't able to get it to work. I uninstalled those packages, so I'm now back to square one.
Thank you so much!
Just linking to or importing from a local file in some other location won't work unless those local files are also deployed to the server in the same location relative to the app (and the web server has access to that location).
So you'll need to copy the file and its linked dependencies in a folder that will be deployed along with your react build, but not where it'll get treated as part of the react codebase so webpack will try to compile it (so not in src either).
If you used create-react-app to set up your application, for example, this would be the public folder; other webpack setups may use different names but the general concept is the same.
I would like to put a download link on my website so the users can download the file template.csv. The file is static and is located at the root of my /grails-app/assets folder.
Inside my page.gsp, I have tried 2 methods do so, to no avail :
Download the template
this results in a template.csv file being downloaded, but the content is the html code of page.gsp rather than the original content of the file I uploaded in my assets.
Download the template
the generated html file has a link to localhost:8080/mysite/assets/template.csv but clicking it prompts an error message : Failed - no file.
What is the correct way to do what I want to achieve ? Is there an issue with extra permissions I would need to add to allow the download of my file ?
Our webapp relies on a rather old technological stack :
Grails 2.3.4
Plugin asset-pipeline-2.2.5
I have had some troubles with downloading files straight with a -tag.
To overcome this, I use Controller method to return the file and place the downloadable files in their own folder under web-app/:
class MyController {
#Autowired()
AssetResourceLocator assetResourceLocator
def downloadExcelTemplate () {
String fileName = "MyExcelFile.xlsx"
/* Note: these files are found in /web-app/downloadable directory */
Resource resource = assetResourceLocator.findResourceForURI("/downloadable/$fileName")
response.setHeader "Content-disposition", "attachment; filename=${resource.filename}"
response.contentType = 'application/vnd.ms-excel'
response.outputStream << resource.inputStream.bytes
}
}
And just use regular a-tag to to link to this controller method.
This way you also gain more control over file downloads.
I created a mobile html5 web with the playframework 2.x. Users are able to upload images via the app, which then are stored on the server the app is running on.
Images are stored in public/imagesand acessed like this: #routes.Assets.at(images/images1.jpg)
My problem is that whenever a user is uploading an image to my server and then is trying to view the uploaded image afterwards, the image can`t be displayed.
I found out that whenever I restart the play process on the server, then the newly uploaded image will be displayed correctly. I normally start my production server like this:
activator dist
and afterwards unzip the created zip directory and run the generated script.
I figured that the problem is that when the app is packed it will only pack the assets available at the time in the assets.jar and therefore not be able to show new images which are added after the server is started.
So my question is, what do I need to change so that images, which are changed or added while the server is running are displayed correctly, without having to repack and restart the app.
My routes file
# Routes
# This file defines all application routes (Higher priority routes first)
# ~~~~
# Home page
GET / controllers.Application.index
# Used in Javascript to push new User into Database via Ajax
PUT /users/:i controllers.Userdata.addUser(i: Int)
... similiar PUT Requests ...
PUT /deactUser/:i controllers.Userdata.deactUser(i: Int)
GET /reloadUsers controllers.Userdata.reloadUsers(minA: Int, maxA: Int, gend: String, orient: String, verf: String)
GET /ads controllers.Application.getAds()
# Javascript Router
GET /assets/javascripts/routes controllers.Application.javascriptRoutes()
# Map static resources from the /public folder to the /assets URL path
GET /assets/*file controllers.Assets.at(path="/public", file)
After creating dist package the public folder is accessed from created *.jar file, therefore you need to re-dist your app to make uploaded files available in it.
Instead you should create some directory in filesystem and define its path (preferably via configuration file), so you will upload files and serve them into/from independent location. Of course you'll need to write custom action to serve them as well, but that's just several lines of code.
Here's what to implement in practise:
In your routes file, add something like this:
GET /customImage/:name controllers.Application.imageAt(name:String)
Then implement imageAt like this:
public Result imageAt(String imageName) throws FileNotFoundException {
File imageFile = new File("/path/to/image"+imageName);
if (imageFile.exists()) {
String resourceType = "image+"+imageName.substring(imageName.length()-3);
return ok(new FileInputStream(imageFile)).as(resourceType);
} else {
return notFound(imageFile.getAbsoluteFile());
}
}
And that's it. Anything you put to "/path/to/image" will be accessible via url /customerImage/
They can also be accessible via revert routes like #routes.Application.imageAt(imageName)
I am developing some web app to be used on my local pc only.
The question is that I want to be able to browse to some directory or file and get its path. So is this possible using some file/directory path picker (not the whole dir, just its path).
I don't want to manually type the path in the text input, rather to have some visualized way to navigate to the dir.
Thanks
Previous Removed
EDITED:
$("#someFileUpload").change(InputChanged);
function InputChanged(e){
var fileList = e.target.files;
//You now have a list of the files uploaded, from here you can work with the objects..
}